Insites Docs Instance IntegrationsStripe IntegrationCreating a Credit Card in Stripe

Creating a Credit Card in Stripe

Last updated on August 01, 2024.

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.

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:

Javascript:

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

'); // 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
Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.