Accept a payment using Stripe Elements and the Charges APICharges API
Accept online payments from US and Canadian customers.
Legacy API
The content of this section refers to a Legacy feature. Use the Payment Intents API instead.
The Charges API doesn’t support the following features, many of which are required for credit card compliance:
- Merchants in India
- Bank requests for card authentication
- Strong Customer Authentication
Use Stripe Elements, our prebuilt UI components, to create a payment form that lets you securely collect a customer’s card details without handling the sensitive data. The card details are then converted to a representative Token that you can safely send to your servers. Your server can use that token to create a charge.
Set up Stripe![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
First, you need a Stripe account. Register now.
Use our official libraries for access to the Stripe API from your application:
Create your payment formClient-side![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
To securely collect card details from your customers, Stripe Elements creates UI components for you that are hosted by Stripe. They are then placed into your payment form, rather than you creating them directly.
Set up Stripe Elements![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Create a tokenClient-side![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
createToken also accepts an optional second parameter containing additional card information collected from the customer, which is not used in this example. The function returns a Promise
which resolves with a result
object. This object has either:
result.
: a Token was created successfully.token result.
: there was an error. This includes client-side validation errors. Refer to the API reference for all possible errors.error
If the object contains a result.
, send it to your server. Otherwise, show the customer an error.
Submit the token to your serverClient-side![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Send the token to your server along with any additional information that has been collected:
Create a charge with the tokenServer-side![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
After the client posts the token to your server, you can use it to create a charge. On your server, grab the Stripe token in the POST parameters submitted by your form. From there, it’s one API call to charge the card:
The response from creating a charge will either be a charge or an error with an error code. If the response succeeds, fulfill the customer’s order and show them a success page. Otherwise, show them an error page.
Test your integration![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
If you can reliably enter a test card in your HTML form, submit it to the server, and see that your server created the charge, then your integration is finished.
Congratulations! You completed a basic payments integration with the Charges API. This API doesn’t support scaling businesses or customers outside of the US and Canada. For more robust and global payments, learn to accept a payment with the Payment Intents API.
See also![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
You can learn more about Elements and how to save cards with the Charges API.