Save payment details during payment

Learn how to save payment details during a payment.

Use the Payment Intents API to save payment details from a purchase. There are several use cases:

Charge a customer for an e-commerce order and store the details for future purchases
Initiate the first payment of a series of recurring payments
Charge a deposit and store the details to charge the full amount later

If you’re looking for the individual Card Element guide, see Save a card during payment with the Card Element.

Set up Stripe
Server-side

First, register for a Stripe account and then use the Dashboard to create an account name. You can always edit your account name later.

Use our official libraries to access the Stripe API from your application:

Command Line

# For detailed setup, see our quickstarts at https://stripe.com/docs/development/quickstart
bundle add stripe

Create a Customer
Server-side

To set a card up for future payments, you must attach it to a Customer. Create a Customer object when your customer creates an account with your business. Customer objects allow for reusing payment methods and tracking across multiple payments.

Command Line

curl https://api.stripe.com/v1/customers \
  -u sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -X "POST"

Enable payment methods

View your payment methods settings and enable the payment methods you want to support. You need at least one payment method enabled to create a PaymentIntent.

By default, Stripe enables cards and other prevalent payment methods that can help you reach more customers, but we recommend turning on additional payment methods that are relevant for your business and customers. See Payment method integration options for product and payment method support, and our pricing page for fees.

Create a PaymentIntent
Server-side

The PaymentIntent object represents your intent to collect payment from a customer and tracks charge attempts and state changes throughout the payment process.

The PaymentIntent includes the payment methods shown to customers during checkout. If your integration requires it, you can list payment methods manually. But Stripe recommends using automated payment methods.

Stripe evaluates the currency, restrictions, and other parameters to determine the list of supported payment methods for each purchase. For relevant payment methods, Stripe prioritizes ones that help increase conversion. Your customers only see options relevant to their currency and location.

If you don’t see a payment method, check that:

The currency specified in the PaymentIntent is supported by the payment method. (If you manually list payment method types, Stripe returns an error if you specify a payment method that doesn’t support the currency in the PaymentIntent.) Read more about payment method and product support to understand which payment methods support which currencies.
Your business operates in a country supported by the payment method.

Always decide how much to charge on the server side, a trusted environment, as opposed to the client. This prevents malicious customers from being able to choose their own prices.

Create a PaymentIntent on your server. Specify an amount, currency, and customer. Enable setup_future_usage, and automatic_payment_methods. The payment methods you configured in the Dashboard are automatically added to the Payment Intent.

Always decide how much to charge on the server side, a trusted environment, as opposed to the client. This prevents malicious customers from being able to choose their own prices.

If you don’t want to use the Dashboard or if you want to specify payment methods manually, you can list them using the payment_method_types attribute.

Command Line

curl https://api.stripe.com/v1/payment_intents \
  -u sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "setup_future_usage"="off_session" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "automatic_payment_methods[enabled]"=true

Included in the returned PaymentIntent is a client secret, which the client side uses to securely complete the payment process instead of passing the entire PaymentIntent object. You can use different approaches to pass the client secret to the client side.

You can retrieve the client secret from an endpoint on your server using the browser’s fetch function on the client side. This approach is generally most suitable when your client side is a single-page application, particularly one built with a modern frontend framework such as React. The following example shows how to create the server endpoint that serves the client secret:

main.rb

get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

This example demonstrates how to fetch the client secret with JavaScript on the client side:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Collect payment details
Client-side

You’re ready to collect payment details on the client with the Payment Element. The Payment Element is a prebuilt UI component that simplifies collecting payment details for a variety of payment methods.

The Payment Element contains an iframe that securely sends the payment information to Stripe over an HTTPS connection. The checkout page address must also start with https:// rather than http:// for your integration to work. You can test your integration without using HTTPS, but remember to enable it when you’re ready to accept live payments.

Set up Stripe.js

The Payment Element is automatically available as a feature of Stripe.js. Include the Stripe.js script on your checkout page by adding it to the head of your HTML file. Always load Stripe.js directly from js.stripe.com to remain PCI compliant. Don’t include the script in a bundle or host a copy of it yourself.

checkout.html

<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Create an instance of Stripe with the following JavaScript on your checkout page:

checkout.js

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

Add the Payment Element to your payment page

The Payment Element needs a place to live on your payment page. Create an empty DOM node (container) with a unique ID in your payment form:

checkout.html

<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

When the previous form loads, create an instance of the Payment Element and mount it to the container DOM node. Pass the client secret from the previous step into options when you create the Elements instance:

Handle the client secret carefully because it can complete the charge. Don’t log it, embed it in URLs, or expose it to anyone but the customer.

checkout.js

const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

The Payment Element renders a dynamic form that allows your customer to pick a payment method. Depending on their payment method, the form automatically requests that the customer fills in all necessary payment details.

You can customize the Payment Element to match the design of your site by passing the appearance object into options when creating the Elements provider.

By default, the Payment Element only collects the necessary billing address details. If you need to collect a customer’s full billing address (for example, for calculating the tax for digital goods and services) use the Address Element in billing mode.

OptionalEnable faster checkout with Link
Client-side

OptionalCollect address details
Client-side

OptionalCustomize the layout
Client-side

OptionalCustomize the appearance
Client-side

OptionalFetch updates from the server
Client-side

Submit the payment to Stripe
Client-side

Use stripe.confirmPayment to complete the payment using details from the Payment Element. Provide a return_url to this function to indicate where Stripe should redirect the user after they complete the payment. Your user may be first redirected to an intermediate site, like a bank authorization page, before being redirected to the return_url. Card payments immediately redirect to the return_url when a payment is successful.

If you don’t want to redirect for card payments after payment completion, you can set redirect to if_required. This only redirects customers that check out with redirect-based payment methods.

checkout.js

const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

stripe.confirmPayment may take several seconds to complete. During that time, disable your form from being resubmitted and show a waiting indicator like a spinner. If you receive an error, show it to the customer, re-enable the form, and hide the waiting indicator. If the customer must perform additional steps to complete the payment, such as authentication, Stripe.js walks them through that process.

If the payment succeeded, the card is saved to the Customer object. This is reflected on the PaymentMethod’s customer field. At this point, associate the ID of the Customer object with your own internal representation of a customer, if you have one. Now you can use the stored PaymentMethod object to collect payments from your customer in the future without prompting them for their payment details again.

Make sure the return_url corresponds to a page on your website that provides the status of the payment. When Stripe redirects the customer to the return_url, we provide the following URL query parameters:

Parameter	Description
`payment_intent`	The unique identifier for the `PaymentIntent`.
`payment_intent_client_secret`	The client secret of the `PaymentIntent` object.

If you have tooling that tracks the customer’s browser session, you might need to add the stripe.com domain to the referrer exclude list. Redirects cause some tools to create new sessions, which prevents you from tracking the complete session.

Use one of the query parameters to retrieve the PaymentIntent. Inspect the status of the PaymentIntent to decide what to show your customers. You can also append your own query parameters when providing the return_url, which persist through the redirect process.

status.js

// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

Charge the saved payment method later
Server-side

bancontact and ideal are one-time payment methods by default. When set up for future usage, they generate a sepa_debit reusable payment method type so you need to use sepa_debit to query for saved payment methods.

When you’re ready to charge your customer off-session, use the Customer and PaymentMethod IDs to create a PaymentIntent. To find a payment method to charge, list the payment methods associated with your customer. This example lists cards but you can list any supported type.

Command Line

curl -G https://api.stripe.com/v1/payment_methods \
  -u sk_test_4eC39HqLyjWDarjtT1zdp7dc: \
  -d customer={{CUSTOMER_ID}} \
  -d type=card

When you have the Customer and PaymentMethod IDs, create a PaymentIntent with the amount and currency of the payment. Set a few other parameters to make the off-session payment:

Set off_session to true to indicate that the customer is not in your checkout flow during this payment attempt—this causes the PaymentIntent to throw an error if authentication is required.
Set the value of the PaymentIntent’s confirm property to true, which causes confirmation to occur immediately when the PaymentIntent is created.
Set payment_method to the ID of the PaymentMethod and customer to the ID of the Customer.

Command Line

curl https://api.stripe.com/v1/payment_intents \
  -u sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d amount=1099 \
  -d currency=usd \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d off_session=true \
  -d confirm=true

OptionalSave payment details for future use
Server-side

Test the integration

Use test payment details and the test redirect page to verify your integration. Click the tabs below to view details for each payment method.

Payment method	Scenario	How to test
Credit card	The card setup succeeds and doesn’t require authentication.	Fill out the credit card form using the credit card number `4242 4242 4242 4242` with any expiration, CVC, and postal code.
Credit card	The card requires authentication for the initial setup, then succeeds for subsequent payments.	Fill out the credit card form using the credit card number `4000 0025 0000 3155` with any expiration, CVC, and postal code.
Credit card	The card requires authentication for the initial setup and also requires authentication for subsequent payments.	Fill out the credit card form using the credit card number `4000 0027 6000 3184` with any expiration, CVC, and postal code.
Credit card	The card is declined during setup.	Fill out the credit card form using the credit card number `4000 0000 0000 9995` with any expiration, CVC, and postal code.

Test charging a saved SEPA Debit PaymentMethod

Confirming the PaymentIntent using iDEAL, Bancontact, or Sofort, generates a SEPA Direct Debit PaymentMethod. SEPA Direct Debit is a delayed notification payment method that transitions to an intermediate processing state before transitioning several days later to a succeeded or requires_payment_method state.

Set payment_method.billing_details.email to one of the following values to test the PaymentIntent status transitions. You can include your own custom text at the beginning of the email address followed by an underscore. For example, test_1_generatedSepaDebitIntentsFail@example.com results in a SEPA Direct Debit PaymentMethod that always fails when used with a PaymentIntent.

Email Address	Description
`generatedSepaDebitIntentsSucceed@example.com`	The PaymentIntent status transitions from `processing` to `succeeded`.
`generatedSepaDebitIntentsSucceedDelayed@example.com`	The PaymentIntent status transitions from `processing` to `succeeded` after three minutes.
`generatedSepaDebitIntentsFail@example.com`	The PaymentIntent status transitions from `processing` to `requires_payment_method`.
`generatedSepaDebitIntentsFailDelayed@example.com`	The PaymentIntent status transitions from `processing` to `requires_payment_method` after three minutes.
`generatedSepaDebitIntentsSucceedDisputed@example.com`	The PaymentIntent status transitions from `processing` to `succeeded`, but a dispute is created immediately.

Save payment details during payment

Set up Stripe
Server-side

Create a Customer
Server-side

Enable payment methods

Create a PaymentIntent
Server-side

Collect payment details
Client-side

Set up Stripe.js

Add the Payment Element to your payment page

OptionalEnable faster checkout with Link
Client-side

OptionalCollect address details
Client-side

OptionalCustomize the layout
Client-side

OptionalCustomize the appearance
Client-side

OptionalFetch updates from the server
Client-side

Submit the payment to Stripe
Client-side

Charge the saved payment method later
Server-side

OptionalSave payment details for future use
Server-side

Test the integration

Test charging a saved SEPA Debit PaymentMethod

OptionalApple Pay and Google Pay
Client-side

See also

Save payment details during payment

Set up StripeServer-side

Create a CustomerServer-side

Enable payment methods

Create a PaymentIntentServer-side

Collect payment detailsClient-side

Set up Stripe.js

Add the Payment Element to your payment page

OptionalEnable faster checkout with LinkClient-side

OptionalCollect address detailsClient-side

OptionalCustomize the layoutClient-side

OptionalCustomize the appearanceClient-side

OptionalFetch updates from the serverClient-side

Submit the payment to StripeClient-side

Charge the saved payment method laterServer-side

OptionalSave payment details for future useServer-side

Test the integration

Test charging a saved SEPA Debit PaymentMethod

OptionalApple Pay and Google PayClient-side

See also

Set up Stripe
Server-side

Create a Customer
Server-side

Create a PaymentIntent
Server-side

Collect payment details
Client-side

OptionalEnable faster checkout with Link
Client-side

OptionalCollect address details
Client-side

OptionalCustomize the layout
Client-side

OptionalCustomize the appearance
Client-side

OptionalFetch updates from the server
Client-side

Submit the payment to Stripe
Client-side

Charge the saved payment method later
Server-side

OptionalSave payment details for future use
Server-side

OptionalApple Pay and Google Pay
Client-side