Save a card without bank authentication

Before starting this guide, you need a Stripe account. Register now.

Build a checkout page to collect your customer’s card details. Use Stripe Elements, a UI library that helps you build custom payment forms. To get started with Elements, include the Stripe.js library with the following script on your checkout page.

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

Always load Stripe.js directly from js.stripe.com to remain PCI compliant. Do not include the script in a bundle or host a copy of it yourself.

To best leverage Stripe’s advanced fraud functionality, include this script on every page on your site, not just the checkout page. Including the script on every page allows Stripe to detect suspicious behavior that may indicate fraud when users browse your website.

Add Elements to your page

To securely collect card details from your customers, Elements creates UI components for you that are hosted by Stripe. They are then placed into your payment form, rather than you creating them directly. To determine where to insert these components, create empty DOM elements (containers) with unique IDs within your payment form.

<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>

Next, create an instance of the Stripe object, providing your publishable API key as the first parameter. After, create an instance of the Elements object and use it to mount a card element in the DOM.

The card Element simplifies the payment form and minimizes the number of required fields by inserting a single, flexible input field that securely collects all necessary card details.

Otherwise, combine cardNumber, cardExpiry, and cardCvc Elements for a flexible, multi-input card form.

var stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

var elements = stripe.elements();
var cardElement = elements.create('card');
cardElement.mount('#card-element');

A Stripe 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. Enable it when you’re ready to accept live payments.

var cardholderName = document.getElementById('cardholder-name');
var cardButton = document.getElementById('card-button');
var resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', function(ev) {

  stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  ).then(function(result) {
    if (result.error) {
      // Display error.message in your UI
      resultContainer.textContent = result.error.message;
    } else {
      // You have successfully created a new PaymentMethod
      resultContainer.textContent = "Created payment method: " + result.paymentMethod.id;
    }
  });
});

Send the resulting PaymentMethod ID to your server.

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

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

Save the card by attaching the PaymentMethod to a Customer. You can use the Customer object to store other information about your customer, such as shipping details and email address.

curl https://api.stripe.com/v1/customers \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc: \
  -d payment_method="{{PAYMENT_METHOD_ID}}"

If you have an existing Customer, you can attach the PaymentMethod to that object instead.

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

At this point, associate the Customer ID and the PaymentMethod ID with your own internal representation of a customer, if you have one.

When you are ready, fetch the PaymentMethod and Customer IDs to charge. You can do this by either storing the IDs of both in your database, or by using the Customer ID to look up all the Customer’s available PaymentMethods.

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

Use the PaymentMethod ID and the Customer ID to create a new PaymentIntent. Set error_on_requires_action to true to decline payments that require any actions from your customer, such as two-factor authentication.

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 error_on_requires_action=true \
  -d confirm=true

When a payment attempt fails, the request also fails with a 402 HTTP status code and Stripe throws an error. You need to notify your customer to return to your application (for example, by sending an email) to complete the payment. Check the code of the Error raised by the Stripe API library or check the last_payment_error.decline_code on the PaymentIntent to inspect why the card issuer declined the payment.

Notify your customer that the payment failed and direct them to the payment form you made in Step 1 where they can enter new card details. Send that new PaymentMethod ID to your server to attach to the Customer object and make the payment again.

Alternatively, you can create a PaymentIntent and save a card all in one API call if you have already created a Customer.

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 error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

Setting setup_future_usage to on_session indicates to Stripe that you wish to save the card for later, without triggering unnecessary authentication.

Stripe provides test cards you can use in test mode to simulate different cards’ behavior. Use these cards with any CVC, postal code, and expiry date in the future.