Stripe Elements for the web

Use Stripe.js and Elements to build custom payment forms on the web.

Stripe.js is our foundational JavaScript library for building payment flows. The primary integration path through Stripe.js is with Elements, which enables you to collect sensitive payment information using customizable UI components. Stripe.js also provides a single interface for Apple Pay, Google Pay, and the Payment Request API.

With Stripe.js, you can also tokenize sensitive information, integrate with Checkout, and handle 3D Secure authentication. Because all sensitive information is handled by Stripe.js, it features simple PCI compliance with SAQ A reporting.

Setup Stripe.js

You need to include Stripe.js on your checkout page by either adding the script tag to the head of your HTML file, or importing it from the stripe-js module:

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

npm install @stripe/stripe-js

Next, create an instance of the Stripe object by providing your publishable API key as the first parameter:

var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

Stripe Elements

Stripe Elements is a set of prebuilt UI components, like inputs and buttons, for building your checkout flow. It’s available as a feature of Stripe.js. Stripe.js tokenizes the sensitive information within an Element without ever having it touch your server.

Elements includes features like:

Formatting card information automatically as it’s entered
Translating placeholders into your customer’s preferred language
Using responsive design to fit the width of your customer’s screen or mobile device
Customizing the styling to match the look and feel of your checkout flow

The Card Element lets you collect card information all within one Element. It includes a dynamically-updating card brand icon as well as inputs for number, expiry, CVC, and postal code. Get started with accepting a payment.

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

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;

See all 31 lines }

// Create a Stripe client.
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

See all 70 lines // Handle real-time validation errors from the card Element. card.addEventListener('change', function(event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; } }); // Handle form submission. var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); stripe.createToken(card).then(function(result) { if (result.error) { // Inform the user if there was an error. var errorElement = document.getElementById('card-errors'); errorElement.textContent = result.error.message; } else { // Send the token to your server. stripeTokenHandler(result.token); } }); }); // Submit the form with the token ID. function stripeTokenHandler(token) { // Insert the token ID into the form so it gets submitted to the server var form = document.getElementById('payment-form'); var hiddenInput = document.createElement('input'); hiddenInput.setAttribute('type', 'hidden'); hiddenInput.setAttribute('name', 'stripeToken'); hiddenInput.setAttribute('value', token.id); form.appendChild(hiddenInput); // Submit the form form.submit(); }

The Payment Request Button lets your customers check out with Apple Pay, Google Pay, Chrome saved cards, and Microsoft Pay. When using an Apple Pay-enabled browser, your customer will see the button on the left below. When using a browser that supports the Payment Request API, they’ll see the button on the right below. Note that for demonstration purposes, these are just images, not live demos. You can read more about browser support in the Payment Request Button Quickstart.

Apple Pay Button and Payment Request Button Element

The IBAN Element lets you collect your customers’ bank account details. It validates IBAN formats in all SEPA countries, emits the bank’s name, and includes a dynamically updating bank logo icon for many popular banks. Refer to the IBAN Element Quickstart to get started.

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

<form action="/charge" method="post" id="payment-form">
  <div class="form-row inline">
    <div class="col">
      <label for="name">
        Name
      </label>
      <input id="name" name="name" placeholder="Jenny Rosen" required>
    </div>
    <div class="col">
      <label for="email">
        Email Address
      </label>
      <input id="email" name="email" type="email" placeholder="jenny.rosen@example.com" required>
    </div>
  </div>

  <div class="form-row">
    <label for="iban-element">
      IBAN
    </label>
    <div id="iban-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>
  <div id="bank-name"></div>

  <button>Submit Payment</button>

See all 44 lines  <div id="error-message" role="alert"></div>  <div id="mandate-acceptance"> By providing your IBAN and confirming this payment, you are authorizing Rocketship Inc. and Stripe, our payment service provider, to send instructions to your bank to debit your account and your bank to debit your account in accordance with those instructions. You are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. </div> </form>

/**
* The CSS shown here will not be introduced in the Quickstart guide, but
* shows how you can use CSS to style your Element's container.
*/
input,
.StripeElement {
  height: 40px;
  padding: 10px 12px;

  color: #32325d;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

input:focus,
.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;

See all 31 lines }

// Create a Stripe client.
// Note: this merchant has been set up for demo purposes.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    },
    ':-webkit-autofill': {
      color: '#32325d',
    },
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a',
    ':-webkit-autofill': {
      color: '#fa755a',
    },
  }
};

See all 95 lines // Create an instance of the iban Element. var iban = elements.create('iban', { style: style, supportedCountries: ['SEPA'], }); // Add an instance of the iban Element into the `iban-element` <div>. iban.mount('#iban-element'); var errorMessage = document.getElementById('error-message'); var bankName = document.getElementById('bank-name'); iban.on('change', function(event) { // Handle real-time validation errors from the iban Element. if (event.error) { errorMessage.textContent = event.error.message; errorMessage.classList.add('visible'); } else { errorMessage.classList.remove('visible'); } // Display bank name corresponding to IBAN, if available. if (event.bankName) { bankName.textContent = event.bankName; bankName.classList.add('visible'); } else { bankName.classList.remove('visible'); } }); // Handle form submission. var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); showLoading(); var sourceData = { type: 'sepa_debit', currency: 'eur', owner: { name: document.querySelector('input[name="name"]').value, email: document.querySelector('input[name="email"]').value, }, mandate: { // Automatically send a mandate notification email to your customer // once the source is charged. notification_method: 'email', } }; // Call `stripe.createSource` with the iban Element and additional options. stripe.createSource(iban, sourceData).then(function(result) { if (result.error) { // Inform the customer that there was an error. errorMessage.textContent = result.error.message; errorMessage.classList.add('visible'); stopLoading(); } else { // Send the Source to your server to create a charge. errorMessage.classList.remove('visible'); stripeSourceHandler(result.source); } }); });

The iDEAL Bank Element lets you collect your customers’ bank for use with iDEAL payments. It displays a list of iDEAL-member banks and their logos, allowing customers to select their bank inline (rather than in an interstitial bank selection page) and check out faster. Refer to the iDEAL Bank Element Quickstart to get started.

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

<form id="payment-form">
  <div class="form-row">
    <label for="name">
      Name
    </label>
    <input id="name" name="name" placeholder="Jenny Rosen" required>
  </div>

  <div class="form-row">
    <label for="ideal-bank-element">
      iDEAL Bank
    </label>
    <div id="ideal-bank-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <button>Submit Payment</button>

  <!-- Used to display form errors. -->
    <div id="error-message" role="alert"></div>
</form>

/**
* The CSS shown here will not be introduced in the Quickstart guide, but
* shows how you can use CSS to style your Element's container.
*/
input,
.StripeElement {
  height: 40px;

  color: #32325d;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

input {
  padding: 10px 12px;
}

input:focus,
.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

See all 34 lines .StripeElement--webkit-autofill { background-color: #fefde5 !important; }

// Create a Stripe client.
// Note: this merchant has been set up for demo purposes.
var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    padding: '10px 12px',
    color: '#32325d',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    },
  },
  invalid: {
    color: '#fa755a',
  }
};

// Create an instance of the idealBank Element.
var idealBank = elements.create('idealBank', {style: style});

// Add an instance of the idealBank Element into the `ideal-bank-element` <div>.
idealBank.mount('#ideal-bank-element');

See all 67 lines var errorMessage = document.getElementById('error-message'); // Handle form submission. var form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); showLoading(); var sourceData = { type: 'ideal', amount: 1099, currency: 'eur', owner: { name: document.querySelector('input[name="name"]').value, }, // Specify the URL to which the customer should be redirected // after paying. redirect: { return_url: 'https://shop.example.com/crtA6B28E1', }, }; // Call `stripe.createSource` with the idealBank Element and additional options. stripe.createSource(idealBank, sourceData).then(function(result) { if (result.error) { // Inform the customer that there was an error. errorMessage.textContent = result.error.message; errorMessage.classList.add('visible'); stopLoading(); } else { // Redirect the customer to the authorization URL. errorMessage.classList.remove('visible'); stripeSourceHandler(result.source); } }); });

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;

See all 31 lines }

import { useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import {
  CardElement,
  Elements,
  useElements,
  useStripe
} from '@stripe/react-stripe-js';

// Custom styling can be passed to options when creating an Element.
const CARD_ELEMENT_OPTIONS = {
  style: {
    base: {
      color: '#32325d',
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      }
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
    }
  }
};

const CheckoutForm = () => {
  const [error, setError] = useState(null);

See all 98 lines const stripe = useStripe(); const elements = useElements(); // Handle real-time validation errors from the card Element. const handleChange = (event) => { if (event.error) { setError(event.error.message); } else { setError(null); } } // Handle form submission. const handleSubmit = async (event) => { event.preventDefault(); const card = elements.getElement(CardElement); const result = await stripe.createToken(card) if (result.error) { // Inform the user if there was an error. setError(result.error.message); } else { setError(null); // Send the token to your server. stripeTokenHandler(result.token); } }; return ( <form onSubmit={handleSubmit}> <div class="form-row"> <label for="card-element"> Credit or debit card </label> <CardElement id="card-element" options={CARD_ELEMENT_OPTIONS} onChange={handleChange} /> <div className="card-errors" role="alert">{error}</div> </div> <button type="submit">Submit Payment</button> </form> ); } // Setup Stripe.js and the Elements provider const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); const App = () => { return ( <Elements stripe={stripePromise}> <CheckoutForm /> </Elements> ); } // POST the token ID to your backend. async function stripeTokenHandler(token) { const response = await fetch('/charge', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({token: token.id}) }); return response.json(); }

Apple Pay Button and Payment Request Button Element

/**
* The CSS shown here will not be introduced in the Quickstart guide, but
* shows how you can use CSS to style your Element's container.
*/
input,
.StripeElement {
  height: 40px;
  padding: 10px 12px;

  color: #32325d;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

input:focus,
.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;

See all 31 lines }

import { useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import {
  IbanElement,
  Elements,
  useElements,
  useStripe
} from '@stripe/react-stripe-js';

// Custom styling can be passed to options when creating an Element.
const IBAN_ELEMENT_OPTIONS = {
  supportedCountries: ['SEPA'],
  style: {
    base: {
      color: '#32325d',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
      ':-webkit-autofill': {
        color: '#32325d',
      },
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a',
      ':-webkit-autofill': {
        color: '#fa755a',

See all 175 lines }, } } }; const CheckoutForm = () => { const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(false); const [paymentMethod, setPaymentMethod] = useState(null); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [bankName, setBankName] = useState(''); const stripe = useStripe(); const elements = useElements(); // Reset the demo. const handleReset = () => { setPaymentMethod(null); setIsLoading(false); setName(''); setEmail(''); setBankName(''); setError(null); elements.getElement(IbanElement).clear(); } const handleChange = (event) => { // Handle real-time validation errors from the iban Element. if (event.error) { setError(event.error.message); } else { setError(null); } // Display bank name corresponding to IBAN, if available. if (event.bankName) { setBankName(event.bankName); } else { setBankName(null); } } // Handle form submission. const handleSubmit = async (event) => { event.preventDefault(); setIsLoading(true); const ibanElement = elements.getElement(IbanElement); const result = await stripe.createPaymentMethod({ type: 'sepa_debit', sepa_debit: ibanElement, billing_details: { name, email, } }); setIsLoading(false); if (result.error) { // Inform the user if there was an error. setError(result.error.message); } else { setError(null); // Normally you would send the PaymentMethod to your server. // In this demo we store it in state and display it. setPaymentMethod(result.paymentMethod); } }; return ( // Wrapper to handle display of loading spinner and demo result. <Wrapper isLoading={isLoading} paymentMethod={paymentMethod} onReset={handleReset}> <form onSubmit={handleSubmit}> <div className="form-row inline"> <div class="col"> <label for="name"> Name </label> <input id="name" name="name" placeholder="Jenny Rosen" required value={name} onChange={(event) => { setName(event.target.value); }} /> </div> <div class="col"> <label for="email"> Email Address </label> <input id="email" name="name" type="email" placeholder="jenny.rosen@example.com" required value={email} onChange={(event) => { setEmail(event.target.value); }} /> </div> </div> <div className="form-row"> <label for="iban-element"> IBAN </label> <IbanElement id="iban-element" options={IBAN_ELEMENT_OPTIONS} onChange={handleChange} /> </div> <div id="bank-name" className={bankName ? 'visible' : ''}>{bankName}</div> <button type="submit">Submit Payment</button> <div id="error-message" role="alert" className={error ? 'visible' : ''}>{error}</div> {/* Display mandate acceptance text. */} <div id="mandate-acceptance"> By providing your IBAN and confirming this payment, you are authorizing Rocketship Inc. and Stripe, our payment service provider, to send instructions to your bank to debit your account and your bank to debit your account in accordance with those instructions. You are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. </div> </form> </Wrapper> ); } // Setup Stripe.js and the Elements provider const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); const App = () => ( <Elements stripe={stripePromise}> <CheckoutForm /> </Elements> );

/**
* The CSS shown here will not be introduced in the Quickstart guide, but
* shows how you can use CSS to style your Element's container.
*/
input,
.StripeElement {
  height: 40px;

  color: #32325d;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

input {
  padding: 10px 12px;
}

input:focus,
.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

See all 34 lines .StripeElement--webkit-autofill { background-color: #fefde5 !important; }

import { useState } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import {
  IdealBankElement,
  Elements,
  useElements,
  useStripe
} from '@stripe/react-stripe-js';

// Custom styling can be passed to options when creating an Element.
const IDEAL_ELEMENT_OPTIONS = {
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
    invalid: {
      color: '#fa755a',
    }
  }
};

const CheckoutForm = () => {
  const [error, setError] = useState(null);

See all 116 lines const [isLoading, setIsLoading] = useState(false); const [paymentMethod, setPaymentMethod] = useState(null); const [name, setName] = useState(''); const stripe = useStripe(); const elements = useElements(); // Reset the demo. const handleReset = () => { setPaymentMethod(null); setIsLoading(false); setName(''); setError(null); elements.getElement(IdealBankElement).clear(); } // Handle form submission. const handleSubmit = async (event) => { event.preventDefault(); setIsLoading(true); const idealBankElement = elements.getElement(IdealBankElement); const result = await stripe.createPaymentMethod({ type: 'ideal', ideal: idealBankElement, billing_details: { name, } }); setIsLoading(false); if (result.error) { // Inform the user if there was an error. setError(result.error.message); } else { setError(null); // Normally you would send the PaymentMethod to your server. // In this demo we store it in state and display it. setPaymentMethod(result.paymentMethod); } }; return ( // Wrapper to handle display of loading spinner and demo result. <Wrapper isLoading={isLoading} paymentMethod={paymentMethod} onReset={handleReset}> <form onSubmit={handleSubmit}> <div className="form-row"> <label for="name"> Name </label> <input id="name" name="name" placeholder="Jenny Rosen" required value={name} onChange={(event) => { setName(event.target.value); }} /> </div> <div className="form-row"> <label for="ideal-bank-element"> iDEAL Bank </label> <IdealBankElement id="ideal-bank-element" options={IDEAL_ELEMENT_OPTIONS} /> </div> <button type="submit">Submit Payment</button> <div className="error-message" role="alert">{error}</div> </form> </Wrapper> ); } // Setup Stripe.js and the Elements provider const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); const App = () => ( <Elements stripe={stripePromise}> <CheckoutForm /> </Elements> );

Elements examples

Elements are completely customizable. You can style Elements to match the look and feel of your site, providing a seamless checkout experience for your customers. It’s also possible to style various input states, for example when the Element has focus.

To see some ways you can use Elements, check out our open source examples on GitHub.

For an end-to-end example illustrating how to integrate Elements with a backend to process payments, check out this demo application and browse its source code on GitHub. This sample store accepts card payments with support for Payment Request, Apple Pay, Google Pay, and other payment methods.

Demo application on Chrome with the Payment Request Button

Demo application on iPhone X with Apple Pay on Safari

Sample e-commerce store implementing both the Card Element and the Payment Request Button.

Next steps

Build an integration with Stripe.js and Elements.

English

Deutsch

English

Español (España)

Français

Italiano

日本語

简体中文

Sign In →

Stripe Elements for the web

Setup Stripe.js

Stripe Elements

Elements examples

Next steps

Was this page helpful?

On this page