I have 2 flows regarding payment:
- Charge a customer using payment element created from paymentIntent.
- I have another flow where I only accept payment methods from a customer using setupIntent.
In this first flow I follow below steps:
- Create a paymentIntent using customerId and amount
const paymentIntent = await stripeKey.paymentIntents.create({
customer: customerId,
setup_future_usage: 'off_session',
amount: amount,
currency: 'usd',
metadata : {
tenantId : tenantId,
customerId : customerId,
transaction_from : transaction_from,
},
automatic_payment_methods: {
enabled: true,
allow_redirects: 'always'
}
});
- Use paymentIntent secret key to show paymentelement
const appearance = {
theme: 'stripe',
};
const options = {
clientSecret: paymentIntent.client_secret,
appearance,
};
elements = stripe.elements(options);
paymentElement = elements.create("payment");
paymentElement.mount("#payment");
- This shows payment element as below:
Payment element created using paymentIntent
In this second flow I follow below steps:
- Create a setupIntent
const setupIntent = await stripe.setupIntents.create({
customer: customerId,
metadata: {clientid : tenantId},
automatic_payment_methods: {
enabled: true,
allow_redirects: 'always'
}
});
- Use setupIntent secret key to show paymentelement
const appearance = {
theme: 'stripe',
};
const options = {
clientSecret: setupIntent.client_secret,
appearance,
};
elements = stripe.elements(options);
const paymentElement = elements.create("payment");
paymentElement.mount("#paymentMethod");
- This shows payment element as below:
payment element created using setupIntent
The problem here is that both payment elements are not showing the same payment methods, which results in inconsistency. What additional steps do I need to take to show the same payment methods on both payment elements?