@stripe/stripe-react-native payment-sheet (Save card data)

Question

i am trying to integrate payment sheet with customer(stripe customer id) and save card option(as shown in image) and the customer was linked with payment but Save this card for future powdur payments option was not showing. i can't understand why that's not showing? if any buddy have idea about this then pls tell..

server-side Code

createCustomer

exports.handler = async (event) => {
  console.log(JSON.stringify(event.arguments));
  const customer = await stripe.customers.create({
    name: event.arguments?.input?.name,
    email: event.arguments.input?.email,
    payment_method: 'pm_card_visa',
    invoice_settings: {
      default_payment_method: 'pm_card_visa',
    },
  });
  console.log('Customer Data', JSON.stringify(customer));
  return {
    id: customer.id ?? 'Default',
  };
};

createPaymentIntent

exports.handler = async (event) => {
  console.log('Event', JSON.stringify(event.arguments.input));
  try {
    const paymentIntent = await stripe.paymentIntents.create({ ...event.arguments.input });
    console.log(paymentIntent.client_secret);
    return {
      clientSecret: paymentIntent.client_secret,
    };
  } catch (error) {
    console.log(JSON.stringify(error));
    return {
      error: error.message,
    };
  }
};

/** createIntent data
 * description: 'Software development services',
    customer: customerId,
    shipping: {
      name: 'Jenny Rosen',
      address: {
        line1: '510 Townsend St',
        postal_code: '98140',
        city: 'San Francisco',
        state: 'CA',
        country: 'US',
      },
    },
    amount: 1099,
    currency: 'usd',
    payment_method_types: ['card'],
 */

Answer 1

You need to specify the customerId while initializing the PaymentSheet in your frontend so that the created PaymentMethod will be attached to a customer and it can be used for future payments[1]

const { error } = await initPaymentSheet({
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
});

​​[1] https://stripe.com/docs/payments/save-during-payment?platform=react-native&ui=payment-sheet#:~:text=To%20set%20up%20a%20payment%20method%20for%20future%20payments%2C%20it%20must%20be%20attached%20to%20a%20Customer