#dux_paymentelement-defer
restive depotBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1255170673379246281
📝 Have more to share? Add details, code, screenshots, videos, etc. below.
polar hatchBOT
jovial jay
Hi there 👋 sounds like you're building this flow in React, is that right?
knotty summit
yea
i'm following this tutorial: https://docs.stripe.com/payments/quickstart?lang=node&client=next
jovial jay
Gotcha! I'm a bit less familiar with React, but my understanding there is that useStripe is used for accessing an existing Stripe object.
To add the paymentMethodCreation parameter, you'll want to include that in the options you pass to the Elements provider. We show that here in our guide for building this type of 2-step confirmation flow:
https://docs.stripe.com/payments/build-a-two-step-confirmation?client=react#add-and-configure-the-elements-provider-to-your-checkout-page
knotty summit
ah gotcha
that worked thanks
one more question - my payment element is only showing a card option. how do i enable more payment methods? from the dashboard? or through the element options?
jovial jay
The second step in the guide that I linked discusses enabling Payment Methods for the flow, and links to the corresponding dashboard page where you can do that. Though it is possible for you to explicitly specify the payment method types that should be offered, so you may want to check your code to see if you're doing so:
https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodTypes
knotty summit
sorry to bother you again, but with something like amazon, when i create a payment method, it doesnt collect any info. but theres that message about redirecting to complete next steps, but i'm not being redirected anywhere
how does this work exactly?
when i press 'pay now', the payment method is created, and i get an ID. but it never collected any info from me
heres the response
i know the words 'pay now' are misleading. i'm actually not paying. i'm using the createPaymentMethod api method
let submitRes;
try {
submitRes = await elements.submit();
createPyamentMethodRes = await stripe.createPaymentMethod({
elements,
});
} catch (e) {
console.log('*** error: ', e);
}```After which you're creating a payment on your server right?
knotty summit
well. we have functionality to collect payment methods, but not necessarily charge the customer right away
they can purchase something* in the future
jovial jay
This isn't the right flow for that
jovial jay
If you want to prepare payment methods for future payments, this is the guide for that:
https://docs.stripe.com/payments/save-and-reuse
The Payment Method is created by the Setup Intent that you use, you don't need to call createPaymentMethod.
jovial jay
Any time! Let me know if that still doesn't seem like it's what you're after.
knotty summit
wait, does this work with react
with elements?
and does this allow me to collect an apple pay or google play payment method?
sorry, idk how these things work
jovial jay
Select Custom payment flow at the top, then in Step 5 you can switch to seeing React instructions instead of HTML instructions.
jovial jay
Apple Pay and Google Pay are discussed in the optional section near the bottom of the guide
knotty summit
ok awesome 👍
so the biggest difference i'm seeing from the code is using this
const {error} = await stripe.confirmSetup({
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: 'https://example.com/account/payments/setup-complete',
},
});
as opposed to stripe.createPaymentMethod. but its still using the same
<PaymentElement id="payment-element" options={paymentElementOptions} />
component, which means the amazon option will still render the same way?
in other words, the amazon option will still not collect any info before creating the setup-intent
is that just an issue with amazon?
i cant see apple pay because the stripe account I'm using doesnt have the domain verified
let me try to generate the client_secret from the server and see if that changes anything
jovial jay
Our Payment Element only collects information that helps improve the likelihood of a payment being approved, so the fields collected for each payment method type fluctuate. What else are you expecting/hoping would be collected there?
knotty summit
something to identify that payment method.
like for a credit card, we would supply CC info (card number, expiration, etc...)
so i would expect for amazon for the user to supply something to identify their amazon account or something?
i'm looking at this real quick: https://docs.stripe.com/api/setup_intents/object?lang=node - my guess is, depending on the client_secret, the payment element will behave differently
i hadnt updated the client secret eyt
yet*
jovial jay
so the biggest difference i'm seeing from the code is using this
```
const {err...
One correction, the flow I linked you to creates the Setup Intent up front, so the Payment Method is created after the Setup Intent is. If you'd rather not create the Setup Intent until after the customer has provided the necessary information (what we refer to as a deferred intent flow) you'll want to follow this guide:
https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=setup
knotty summit
oh ok. let me take a look at that too
jovial jay
something to identify that payment method.
like for a credit card, we would supp...
Is that not collected after clicking on the setup/pay button? Many of our Payment Methods link out to other pages/forms for collecting details from a third-party, Amazon Pay is one of those.
knotty summit
oh, interesting
jovial jay
i'm looking at this real quick: https://docs.stripe.com/api/setup_intents/object...
Yes, for an intent-first flow, the client secret controls most of the behavior of the Payment Element.
knotty summit
yea that's why i had created this screenshot - because it says 'after your submission, you will be redirected' - but i was not getting redirected
this is in test mode btw, not sure if it doesnt work in test-mode?
jovial jay
It's possible we skip over that in testmode (I've not stepped through this flow personally, so I'm not exactly sure what happens after you click Pay Now there)
Since you don't actually reach out to Amazon for testing purposes. (I don't think)
jovial jay
Oh, and with the flow you had before, if you were confirming the payments on the server then that could be why you weren't seeing the rest of the flow. The intent may have been going into a requires_action state where you need to either redirect the user to the next part of the flow or use Stripe.js to surface the next action they have to complete.
restive depotBOT