Creating a Credit Card in Stripe

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: