#coachleyton
solemn gull
hallow citrus
I basically just need to make a payment method from the client side, but use the PaymentElement rather than the CardElement. Not sure how to go about it however 😦
Could make it from the server side also (.NET), not opposed to that if need be
tawdry meadow
To create a payment method with Payment Element, you may use Setup Intent: https://stripe.com/docs/payments/save-and-reuse?platform=web&ui=elements
hallow citrus
The docs seem to suggest that I need to provide a return URL. What if I want the user to stay on that page?
tawdry meadow
Alternatively, you can use deferred intent flow by creating Payment Method with Payment Element: https://stripe.com/docs/payments/build-a-two-step-confirmation
tawdry meadow
Alternatively, you can use deferred intent flow by creating Payment Method with ...
More specifically, Step 4 of Create a PaymentMethod
hallow citrus
So I just pass it the "elements", and it will auto-detect the contents of the <PaymentElement /> component? I, as the dev, don't need to make that connection?
tawdry meadow
return_url is necessary as user might be redirect to complete authentication or further operation at another page. This return_url is where customer will be returned after completing the payment
So I just pass it the "elements", and it will auto-detect the contents of the <PaymentElement /> component? I, as the dev, don't need to make that connection?
Yes
hallow citrus
One moment please. Please keep the thread open 🙂
tawdry meadow
Sure, no problem!
hallow citrus
If I am to use this approach, I must "paymentMethodCreation to 'manual'."
When I check the docs, they are using "stripe.elements()" to creat the elements, however I am simply using the react jsx component, "<Elements />"
How can I set the paymentMethodCreation here?
tawdry meadow
You can click the React version of the integration: https://stripe.com/docs/payments/build-a-two-step-confirmation?client=react
The React example in above doc should look something like:
function App() {
const options = {
mode: 'payment',
amount: 1099,
currency: 'usd',
paymentMethodCreation: 'manual',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
return (
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
);
};
hmm
are those docs up to date? Becuase the intellisense seems to think that paymentMethodCreation isn't a property of the options:
Or maybe it's just wrong lol
tawdry meadow
Which version of stripe-react-js and stripe-js are you using?
hallow citrus
I'm using the package @stripe/react-stripe-js, version ^2.1.0
looks to be the latest version
tawdry meadow
How about stripe-js?
hallow citrus
my @stripe/stripe-js is at ^1.54.0
latest version, published 14 days ago
it could just by the intellisense being wrong. I'll just try a cheeky "@ts-ignore" and see if it fixes the issue
Hi, okay it really was just Typescript being weird
This is a bit hacky, but what can be done
seems to work just fine. Thank you for your help 🙂
tawdry meadow
This is indeed strange. I'm able to see paymentMethodCreation type being defined in stripe-js in v1.51.0 and above