BidBird® | Stripe Developers | Page 1

ionic archBOT Feb 23, 2023, 3:23 PM

#

solid burrow Feb 23, 2023, 3:25 PM

#

What are you trying to do?

#

Are you a developer?

rare crown Feb 23, 2023, 3:26 PM

#

yes, I am. Have been trying to update the old 2018 api stripe elements to the new api. So the PI flow is a bit different.

#

At this point, I've got the card element mounted, a PI was created when the page loads. Now, I'm trying to get the updated info in the PI after a customer selects quantity of items, etc.

solid burrow Feb 23, 2023, 3:29 PM

#

Oh if you're upgrading to the new flow, I highly recommend you follow this guide: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements

Accept a payment

Securely accept payments online.

#

Payment Element is generally recommended over the card element now

rare crown Feb 23, 2023, 3:30 PM

#

I see, for all the other pay options?

solid burrow Feb 23, 2023, 3:30 PM

#

Yeah it gives you other payment options, but you can set it to only accept card if you like

rare crown Feb 23, 2023, 3:32 PM

#

Ok, well since I'm starting over, I'll follow your advice.

solid burrow Feb 23, 2023, 3:32 PM

#

Yeah that above guide is fairly comprehensive so I recommend it

#

Let us know if you have any questions while integrating

rare crown Feb 23, 2023, 3:33 PM

#

Would you add anything to this?

$stripeIntent = \Stripe\PaymentIntent::create([    'setup_future_usage' => 'off_session',    
'amount' => 500,    
'currency' => 'usd',    
'customer' => auth()->user()->stripeCustomer->stripe_id,    'automatic_payment_methods' => ['enabled' => true],
], ['api_key' => $this->apiKey]);

#

This is a php implementation

solid burrow Feb 23, 2023, 3:37 PM

#

Well it's hard to say

#

I don't know what your specific integration calls for

#

I recommend reading the documentation to understand all the available params and tailor it to your specific usecase

rare crown Feb 23, 2023, 3:47 PM

#

gotcha. Alright, so I've swapped out the card element to the payment element but it's not fully mounting.

#

Screen_Shot_2023-02-17_at_3.18.48_PM.png

solid burrow Feb 23, 2023, 3:51 PM

#

Check your console errors. Anything?

rare crown Feb 23, 2023, 3:52 PM

#

not related to that.
So, there's this line:
The selector you specified (payment-element) applies to no DOM elements that are currently on the page.

That's only after I remove the # from paymentElement.mount('#payment-element');

solid burrow Feb 23, 2023, 4:02 PM

#

That means you probably didn't create a div with the payment-element id

rare crown Feb 23, 2023, 4:04 PM

#

This is exactly how it looks now:

<!-- Display a payment form -->
<div id="payment-element" class="my-3">    
<!-- Elements will create form elements here -->
</div>

#

that should be correct?

solid burrow Feb 23, 2023, 4:05 PM

#

Looks like it

rare crown Feb 23, 2023, 4:09 PM

#

are there known issues if this div is within another? like a form-group?

solid burrow Feb 23, 2023, 4:16 PM

#

Good question. Not sure off the top of my head. Can you try placing the div outside the form group and see if the error persists?

rare crown Feb 23, 2023, 4:18 PM

#

It became an unstyled mess. However, the payment element outline shows, but did not fully render

solid burrow Feb 23, 2023, 4:19 PM

#

Ok. Can you share the code you are using in here? There's probably conflicting styles you are using

#

Or if you have a live test page, can you share that?

rare crown Feb 23, 2023, 4:19 PM

#

https://bidbird.us-1.sharedwithexpose.com

BidBird®

Building materials procurement the modern way. | BidBird®

Save more money with our modern building materials procurement process for contractors, suppliers, manufacturers, & building owners.

#

lets' see if that works, it was loading slow here. Click on post jobs at the top

solid burrow Feb 23, 2023, 4:21 PM

#

This is all I see:

rare crown Feb 23, 2023, 4:21 PM

#

not sure how it looks on your end. The assets were not loading well on this machine

#

that's assetless! ha

#

maybe leave it open a sec

#

This is the first time I used expose, as ngrok was giving me troubles

solid burrow Feb 23, 2023, 4:27 PM

#

Still looks the same

rare crown Feb 23, 2023, 4:32 PM

#

man, using vite

#

Ok did my best to clean that up...doesn't come out too well on this chat, sorry

📎 message.txt

vocal grail Feb 23, 2023, 4:44 PM

#

👋

#

Stepping in as codename needs to step away

#

How we doing today @rare crown ?

#

Looks like a challenge getting Payment Element to mount/render?

rare crown Feb 23, 2023, 4:48 PM

#

hello!

#

Yes, for some reason I can get the card element to mount but not payment element. Here's the js

vocal grail Feb 23, 2023, 4:50 PM

#

Above you said it was mounting but there seemed to be a style issue, correct?

#

Have you removed all styling pieces and commented out everything but the payment-element div and made sure it renders?

rare crown Feb 23, 2023, 4:51 PM

#

that's how it stands now

📎 message.txt

vocal grail Feb 23, 2023, 4:52 PM

#

That looks fine

#

I'd assume there are some styling conflicts going on

#

Can you comment everything out in your HTML except for your payment-element div?

rare crown Feb 23, 2023, 4:52 PM

#

I can confirm commenting out appearance does nothing

#

here's what happens:

#

more of nothing

Screen_Shot_2023-02-23_at_9.53.52_AM.png

vocal grail Feb 23, 2023, 4:54 PM

#

Is there a link I can repro at?

#

Any error in Console?

rare crown Feb 23, 2023, 4:55 PM

#

I was trying to share with ngrok the other day and still have not resolved. that. Tried expose today but the assets dont seem to load

#

there's a fair amount of these errors:
Uncaught (in promise) FetchError: Error fetching https://r.stripe.com/0: NetworkError when attempting to fetch resource.

vocal grail Feb 23, 2023, 4:57 PM

#

Those are fine you can ignore those

rare crown Feb 23, 2023, 4:57 PM

#

ok

vocal grail Feb 23, 2023, 4:57 PM

#

Any r.stripe stuff is just our fraud prevention stuff

#

And that will show up here and there especially when in development

rare crown Feb 23, 2023, 4:57 PM

#

ok nice I'll remember that

vocal grail Feb 23, 2023, 4:57 PM

#

But should have no effect

#

Okay so what does your html look like right now?

#

Can you have the body just be <div id=payment-element></div>

rare crown Feb 23, 2023, 4:59 PM

#

let me giv that a go

#

that's with all body stuff gone

Screen_Shot_2023-02-23_at_10.00.58_AM.png

vocal grail Feb 23, 2023, 5:03 PM

#

Hmm okay and still no error in console

#

And your script is imported?

rare crown Feb 23, 2023, 5:03 PM

#

This is what I have in head <script src="https://js.stripe.com/v3/"></script>

vocal grail Feb 23, 2023, 5:03 PM

#

Do you have your JS file as a script there?

#

Or it is inline?

rare crown Feb 23, 2023, 5:07 PM

#

That's the stripe script, discord seems to have added some % signs

this seems to be the only relevant error, which makes sense:
Uncaught TypeError: can't access property "addEventListener", form is null

vocal grail Feb 23, 2023, 5:09 PM

#

Where is the JS code that you shared above where you are mounting Payment Element?

#

Do you have that script within your HTML file?

#

Or its own file?

rare crown Feb 23, 2023, 5:10 PM

#

that script is at the bottom of the html page

#

very bizarre

vocal grail Feb 23, 2023, 5:12 PM

#

Huh weird. Can you move it up above the body and into the header?

#

That shouldn't really matter but I'm running out of ideas quickly

#

Also have you looked at the Elements on the page via dev tools and confirmed that nothing is getting mounted?

#

Like it isn't getting hidden by some CSS that you don't realize is affecting this page, right?

rare crown Feb 23, 2023, 5:15 PM

#

API version 2022-11-15 Default. I recently upgraded this on the dashboard. This should be correct?

vocal grail Feb 23, 2023, 5:15 PM

#

Yeah that has no effect at all here

rare crown Feb 23, 2023, 5:16 PM

#

heres what happens when I select

#

seems to be mounted to me... Just don't see anything

Screen_Shot_2023-02-23_at_10.16.25_AM.png

#

other than the outline

vocal grail Feb 23, 2023, 5:19 PM

#

No that's just the stripe.JS script

#

Nothing is within your payment element div

#

Can you share your full HTML here which includes the JS script you are using inside it?

#

Also can you remove that class selector from your payment-element div?

#

We can add that back later

rare crown Feb 23, 2023, 5:25 PM

#

there you are....

📎 create.blade.php

vocal grail Feb 23, 2023, 5:26 PM

#

Thanks give me a moment to look

rare crown Feb 23, 2023, 5:27 PM

#

no prob. I'm baffled

vocal grail Feb 23, 2023, 5:39 PM

#

Okay can you add a simple log like console.log("test"); in your JS script?

#

Can we just make sure that is running at all

#

Hmm actually it has to be

#

If you are seeing an error about the form

#

Can you remove the class="my-3" from your payment-element div

rare crown Feb 23, 2023, 5:43 PM

#

actually, after reviewing it here - ha, not on MY machine. I saw the vue component was incorrect.

<script type="module">    import JobFileUploaderCreate from "../../js/components/JobFileUploaderCreate.vue";    export default {        components: { JobFileUploaderCreate }    }</script>

#

so now the stripe elements loaded properly, though it's a bit garrish

#

h

Screen_Shot_2023-02-23_at_10.43.45_AM.png

vocal grail Feb 23, 2023, 5:44 PM

#

Nice

#

That's progress at least

rare crown Feb 23, 2023, 5:44 PM

#

my friend thank you. Vue is so touchy

#

not sure how that affects your scripts. Anyhow, what's the trick to geting that styled more orderly

vocal grail Feb 23, 2023, 5:45 PM

#

Well you use the Appearance API to style Payment Element

#

But then you are going to need to handle placing it within your other elements on the DOM so it isn't overlaid

rare crown Feb 23, 2023, 5:47 PM

#

it's strange it has both the card input and another card input

vocal grail Feb 23, 2023, 5:49 PM

#

Are you mounting Card Element somewhere?

rare crown Feb 23, 2023, 5:50 PM

#

no

#

there are 0 results for card-element

vocal grail Feb 23, 2023, 5:50 PM

#

Where do you see the second number input?

rare crown Feb 23, 2023, 6:02 PM

#

see between quantity of credits and expiration

vocal grail Feb 23, 2023, 6:03 PM

#

That is a coupon code field, no?

rare crown Feb 23, 2023, 6:19 PM

#

that's actually the div payment-element

ember siren Feb 23, 2023, 6:26 PM

#

Hello! I'm taking over and catching up...

#

Based on your screenshot I'm seeing the Payment Element overlayed on top of other form elements. I do not see two card input fields. I think what you're seeing is the labels for the card input fields from the Payment Element landing on top of the coupon field.

rare crown Feb 23, 2023, 6:38 PM

#

hi. The lighter one in the middle is the payment-element.

Working on getting the form to show up again. Made some tweak and can't figure that out. One moment

#

alright, got it back up. I'm having difficulty styling. Let me dive in the appearance api..

rare crown Feb 23, 2023, 6:58 PM

#

the appearance api doesn't seem to have anything to do with overlays.

ember siren Feb 23, 2023, 7:02 PM

#

The Payment Element has a transparent background by default I believe, so because you have it on top of other parts of your page you can see those other parts behind it.

#

The recommendation is to not have the Payment Element overlap other parts of your page.

#

You should set up your page so the container the Payment Element is in can grow or shrink in height as required by the Payment Element.

#

It looks like you might be setting an explicit height.

#BidBird®