On my server I create a payment intent based on Stripes docs with:
const subscription = await stripe.subscriptions.create({
customer: customer.id,
items: [{ price: getPricePlan(plan) }],
payment_behavior: "default_incomplete",
payment_settings: { save_default_payment_method: "on_subscription" },
expand: ["latest_invoice.payment_intent"],
});
Then I pass the client_secret to my front end and I render the Stripe Payment Component (React)
<Elements options={{ clientSecret }} stripe={stripePromise}>
<PaymentElement
onChange={(e) => {
setIsPaymentFormCompleted(e.complete);
}}
/>
<Button
onClick={async () => {
const response = await stripe.confirmPayment({
type: "card",
elements,
redirect: "if_required",
});
}}
>
Pay Now
</Button>
</Elements>;
After I enter the card details and pay, the subscription is created, the first payment works but the card used does not become the default. This means that for the subsequent payment (like month 2 of the subscription for example) the payment will fail, since there is no default payment method.
This is super strange. Any idea why the card does not get set as a default given the save_default_payment_method: "on_subscription" is passed?