Instance · Integrations

Creating a Credit Card in Stripe

Last updated 2 November 2026

To ensure the security of all transactions, Stripe tokenizes sensitive information such as credit card details. As such, we need to use with to access and use these tokens.

Setting up Stripe JS

Import on your page header.

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

Using Stripe Element

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

Stripe 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

Here we will use Stripe's Card Element. This element lets you collect card information within one element and create a credit card object on Stripe. The returned value of the Stripe card element is a 'credit card ID' which you should save and use in your checkout flow to charge transactions in Stripe.

HTML:

Displayed below is the HTML for the form used for this Stripe Element example:

<form action="/charge" method="post" id="payment-form">
  <div id="card-element">
     <!-- A Stripe Element will be inserted here. -->
  </div>
  <!-- Used to display form errors. -->
  <div id="card-errors"></div>
  <button>Submit</button>
</form>

Javascript:

Displayed below is the Javascript code used for this Stripe Element example:

// Create a Stripe client.
var stripe = Stripe('<stripe_public_key>');

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

// Custom styling can be passed to options when creating an Element.

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`.
  card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.on('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 is 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');

  // This value is the tokenized credit card ID you should save and use for charging transactions.
  hiddenInput.setAttribute('value', token.id); 
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

Note

Please visit the Stripe documentation for more details on the use of Stripe Elements: Stripe Elements