Accept a payment

We'll collect the card information using a library of prebuilt UI components: Stripe Elements.

For that we need some empty DOM nodes. So we create an html file with three elements.

• #card-element will be the container of the card input element
• #submit is the button to trigger the payment
• and #card-errors is where we'll put the error messages

We add some styles to make the demo look a bit better.

To use the prebuild UI components, we need to include the Stripe.js script on our page.

We also include the client.js script, that's where we'll initialize the UI components and handle the user events.

The first thing we do is create an instance of Elements, create a card element and mount it to the DOM.

The card Element simplifies the form and minimizes the number of required fields by inserting a single, flexible input field that securely collects all necessary card and billing details. Otherwise, combine cardNumber, cardExpiry, and cardCvc Elements for a flexible, multi-input card form.

Elements validates user input as it is typed. To help your customers catch mistakes, listen to change events on the card Element and display any errors.

The next thing we need to do is to confirm the payment when the user clicks the submit button. But for that first we need to create a PaymentIntent, and we can't do that on the client, we need a server.

For easy access to the Stripe API from our application we'll use the official Stripe library for Node.

We also install express and body-parser.

And we add the boilerplate to serve index.html and client.js.

And now we are ready to create the PaymentIntent.

Stripe uses a PaymentIntent object to represent your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process.

We only need to pass the currency and amount for the payment. The amount represents how much to charge in the smallest currency unit (e.g., 98000 cents to charge $980.00 or 100 to charge ¥100, a zero-decimal currency).

Included in the returned PaymentIntent is a client secret, which we’ll use to securely complete the payment process instead of passing the entire PaymentIntent object. We send the client secret back to the client so we can use to confirm the payment.

Now we can handle the user's click to the "Pay" button. We call the endpoint we created in the previous step and get the paymentClientSecret.

With the `paymentClientSecret` we can now call the `confirmCardPayment` method, which combines the info from the PaymentIntent (amount and currency) with the info from the card element (card number, CVC, expiration date, postal code), and submit the payment to Stripe.

When the payment completes successfully, the value of the returned PaymentIntent’s status property is succeeded. Check the status of a PaymentIntent in the Dashboard or by inspecting the status property on the object. If the payment is not successful, inspect the returned error to determine the cause.

By this point you should have a basic card integration that collects card details and makes a payment.

There are several test cards you can use in test mode to make sure this integration is ready:

For the full list of test cards see our guide on testing.