Stripe not setting default payment method after payment with Payment Component

Question

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?

Answer 1

Setting payment_settings.save_default_payment_method to on_subscription when creating the Subscription should save the Payment Method as the default on the Subscription.

If you retrieve the Subscription using the Subscription ID you should see the Payment Method ID in the default_payment_method property. You can also confirm the value of payment_settings.save_default_payment_method is set to on_subscription as expected.