Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in

Save payment methods for checkoutPrivate preview

Learn how to save payment methods for reuse in future Checkout Sessions.

Private preview

The Custom Checkout integration is in private preview. To request access, click here.

Note

Custom Checkout support for saved payment methods only includes cards. It doesn’t support other saved payment methods, such as bank accounts.

Enable saved payment methods

Add an endpoint on your server that creates a Checkout Session object and set the ui_mode to custom.

A Checkout Session represents your customer’s session as they pay for one-time purchases or subscriptions. Checkout Sessions expire 24 hours after creation. To allow a customer to save their payment method for future use, specify the saved_payment_method_options.payment_method_save parameter when creating the Checkout Session.

Saving a payment method requires a Customer. Pass an existing customer, or, to create a new customer, set the Checkout Session’s customer_creation to always.

After you create the Checkout Session, use the client secret returned in the response to mount Elements.

server.ts
const session = await stripe.checkout.sessions.create({
  line_items: [
    {
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    },
  ],
  mode: 'payment',
  ui_mode: 'custom',
  return_url: '{{RETURN_URL}}',
  customer_creation: 'always',
  saved_payment_method_options: {
    payment_method_save: 'enabled',
  },
});

Collect consent

Caution

Global privacy laws are complicated and nuanced. Before implementing the ability to store customer payment method details, work with your legal team to make sure that it complies with your privacy and compliance framework.

In most cases, you must collect a customer’s consent before you save their payment methods. The following example shows how to obtain consent using a checkbox.

ConsentCollection.jsx
import React from 'react';
import {useCustomCheckout} from '@stripe/react-stripe-js';

type Props = {
  savePaymentMethod: boolean;
  onSavePaymentMethodChange: (save: boolean) => void;
}
const ConsentCollection = (props: Props) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSavePaymentMethodChange(e.target.checked);
  };
  return (
    <label>
      <input
        type="checkbox"
        checked={props.savePaymentMethod}
        onChange={handleChange}
      />
      Save my payment information for future purchases
    </label>
  );
};

export default ConsentCollection;

Indicate to Stripe whether your customer has provided consent when you call confirm by passing the savePaymentMethod parameter. When you save a customer’s payment details, you’re responsible for complying with all applicable laws, regulations, and network rules.

PayButton.jsx
import React from 'react';
import {useCustomCheckout} from '@stripe/react-stripe-js';

type Props = {
  savePaymentMethod: boolean;
}
const PayButton = (props: Props) => {
  const {confirm, canConfirm, confirmationRequirements} = useCustomCheckout();
  const [loading, setLoading] = React.useState(false);

  const handleClick = () => {
    setLoading(true);
    confirm({savePaymentMethod: props.savePaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
      setLoading(false);
    })
  };

  return (
    <button disabled={!canConfirm || loading} onClick={handleClick}>
      Pay
    </button>
  )
};

export default PayButton;

Next steps

Next, learn how to use saved payment methods in your checkout flow.

Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our product changelog.
Questions? Contact Sales.
Powered by Markdoc
On this page
Enable saved payment methods
Collect consent
Next steps
Products Used
Checkout