beastboy_code | Stripe Developers | Page 1

tardy finchBOT Apr 5, 2024, 2:49 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1225819647727763599

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

hot capeBOT Apr 5, 2024, 2:49 PM

#

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

beastboy_docs, 14 hours ago, 14 messages

shy rivet Apr 5, 2024, 2:51 PM

#

Trying to follow these docs: https://docs.stripe.com/payments/payment-element

Stripe Payment Element

Accept payment methods from around the globe with a secure, embeddable UI component.

hot capeBOT Apr 5, 2024, 2:51 PM

#

tough shuttle Apr 5, 2024, 2:53 PM

#

Hi 👋 if you want to build a flow for collecting new Payment Method details from your customers without also processing a payment at that time, I'd recommend looking through this:
https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements
Once you have the Payment Method created you can make a request to update the default payment method on the Customer object.

Set up future payments

Learn how to save payment details and charge your customers later.

shy rivet Apr 5, 2024, 3:04 PM

#

I see

#

I;m using confirm setup right now and

#

"Invalid URL: An explicit scheme (such as https) must be provided."

im getting this error

tough shuttle Apr 5, 2024, 3:06 PM

#

I'm guessing that is referring to what you're providing for the return_url. If you do as the error suggests and include the scheme in the URL value you provide, does the error subside?

shy rivet Apr 5, 2024, 3:14 PM

#

I was setting it to if_required because they arent making a payment immediately

#

If I set it to a hardcoded url then yes it works, but I don't need to redirect them

tough shuttle Apr 5, 2024, 3:15 PM

#

You still have to provide a return_url, in case you expand your integration to accept redirect-based payment methods in the future.

shy rivet Apr 5, 2024, 3:16 PM

#

I'm a little confused - so after I run confirmSetup with the card details they inputted, how do I get the payment method to attach to the subscription?

tough shuttle Apr 5, 2024, 3:23 PM

#

Step 7 in that guide shows how to find the Payment Methods that have been created for the Customer. That would let you list all Payment Methods to find the new one and make the update to the Customer.
Or you could have a webhook endpoint listening for payment_method.attached Events, and use that to trigger your logic for updating the Customer's default payment method.

shy rivet Apr 5, 2024, 3:25 PM

#

But how does stripe know which customer to update when I run confirmsetup? I never told stripe anything about the customer

tough shuttle Apr 5, 2024, 3:26 PM

#

Did you provide the Customer ID when creating the Setup Intent? (Step 4)

shy rivet Apr 5, 2024, 3:30 PM

#

const setupIntent = await stripe.setupIntents.create({
payment_method_types: ['card'],
});

no i create it as above

#

Should I? I don't need to save it to the customer tho

#

just the subscription

tough shuttle Apr 5, 2024, 3:32 PM

#

You do need to save it to the Customer, otherwise you won't be able to use it for the Customer's Subscriptions.

shy rivet Apr 5, 2024, 3:33 PM

#

okay

#

so when I list the payment methods, how do I know which is the one they just added?

tough shuttle Apr 5, 2024, 3:37 PM

#

They should be returned in descending chronological order, where the newest ones are shown first. But if your integration allows customers to create Payment Methods in various ways, it could be hard to know which one they just added. If you have the ID of the Setup Intent you used, you can retrieve it and see the ID of the Payment Method it created in its payment_method field:
https://docs.stripe.com/api/setup_intents/object#setup_intent_object-payment_method

The SetupIntent object | Stripe API Reference

Complete reference documentation for the Stripe API. Includes code snippets and examples for our Python, Java, PHP, Node.js, Go, Ruby, and .NET libraries.

hot capeBOT Apr 5, 2024, 3:44 PM

#

shy rivet Apr 5, 2024, 3:45 PM

#

Okay got it - I think I have it working now!

#

Thank you!

#

The issue im running into is that i render this component in a MUI drawer component. Everytime I open the drawer for the first time I don't see the payment element. I have to close it then open it again to see it. How can I fix this?

tough shuttle Apr 5, 2024, 3:47 PM

#

Any time!

shy rivet Apr 5, 2024, 3:47 PM

#

Sorry my last question haha

tough shuttle Apr 5, 2024, 3:47 PM

#

I'm not sure offhand, do you have any errors that could indicate why the element isn't rendering?

shy rivet Apr 5, 2024, 3:47 PM

#

Seeing no errors

tough shuttle Apr 5, 2024, 3:50 PM

#

I'm not too familiar with React, so I'm not sure what could be leading to that. My initial guess would be that maybe where you're trying to put the Payment Element doesn't exist when you try to mount the element. But I'd expect that to lead to an error.

frank silo Apr 5, 2024, 3:51 PM

#

👋 taking over as toby needs to step away

#

What flow have you integrated for the PaymentElement?
Do you retrieve client-secret before rendering elements?

shy rivet Apr 5, 2024, 3:54 PM

#

Yes the client secret is retrieved before rendering elements

#

ie:

{stripeMetadata?.clientSecret && (
<Elements
stripe={stripePromise}
options={{
clientSecret: stripeMetadata.clientSecret || '',
fonts: [
{
family: 'Tw Cen MT Pro SemiMedium',
src: 'url(/fonts/tw_cent/twc-pro-semimedium.woff2)',
weight: '400',
},
],
}}
>
<Drawer
open={openPaymentMethodDrawer}
onClose={() => setOpenPaymentMethodDrawer(false)}
anchor="right"
PaperProps={{
style: {
width: drawerWidth, // This makes the drawer full screen
},
}}
>
<ChangePaymentMethodDrawer
stripeMetadata={stripeMetadata}
stripeCustomerId={stripeCustomerId}
/>
</Drawer>
</Elements>
)}

#

What flow have you integrated for the PaymentElement?

what do you mean?

frank silo Apr 5, 2024, 3:57 PM

#

There are two flows, one is what you currently have where you retreive client-secret before rendering elements and the other one is where you don't need to retreive client-secret in order to render elements

https://docs.stripe.com/payments/accept-a-payment-deferred

I think the reason it's not showing up initially is because your app is trying to retreive client-secret when you open the drawer first time

shy rivet Apr 5, 2024, 4:00 PM

#

But it is able to retrieve the client secret so I'm not sure what the issue is?

frank silo Apr 5, 2024, 4:01 PM

#

It is possible that your drawer component isn't being re-rendered after the client-secret has been retreived

shy rivet Apr 5, 2024, 4:02 PM

#

I see

#

so that link you provided- what should Ilook at?

#

any section in particular/

#beastboy_code