In this article we’ll be looking into using Stripe’s Charges API to make a basic donation app where we can create customers and submit payments.
Understanding basic promises and how to set up an Express server are necessary.
We’re going to need quite a few things to get this set up. Body-parser
will allow us to convert our form data into something more useful, ejs
will let us render our success page from our server, express
for the server itself, nodemon
to reload our server on save, and finally stripe
to give us access to all the more interesting functionality we want with the Stripe API.
Now over on the Stripe website you’ll need to create an account. When on the Dashboard, the API Keys
under Developers
, you’ll find both a Publishable key
and a Secret Key
. Those are what we’ll need to have access the data later. You’ll want to use the test keys at first.
Here’s how the files for our simple project will be organized:
* views 📂 - Handles our front-end code, must be named views for `ejs` to work.
* card.js
* completed.html
* index.html
* server.js
Just a basic Express server, we’ll require everything we installed, add our Stripe Secret Key
when requiring stripe
, and we’ll use express.static
to render our views folder.
When moving any app to production never put your API keys directly into the code. With whatever hosting service your using, remember to setup environment variables for secure information passing instead. You’ll likely want to setup environment variables right away, so that your secret keys don’t get committed to a repo who’s code could be exposed accidentally.
For our UI and front-end, I’ll be using Tailwind CSS and we’ll also need to get the front-end script from Stripe just before our own front-end code.
At the very bottom of our form we need two empty div
’s with the id’s of card-element
and card-error
for Stripe to display its card inputs and error messages.
First, we need to set up our card inputs and validation. Luckily for us, Stripe will help us with that too. This is going to look a bit complicated so let’s break it down a bit.
card-element
id so it’ll be rendered on our front-end.We’re just creating our inputs, securing the data passed into it, and adding that encrypted data to our form before submitting it to our server.
Now over on our server side we’re going to create a new POST API endpoint for /charge
. We’re just making a promise that creates a customer with our basic information (you can play with all the options here), most importantly, the token we created from the card input.
With our new customer, we’ll create a new charge to their card, passing in the amount in cents. If everything went well, we’ll render our completed.html
page.
When we have successfully sent the donation we can render another page with a thank you message and a button back to our homepage:
Now on localhost:3000
try it out, Stripe gives us a list of test card numbers. Over on our Dashboard we can see the details of any test payments.
Obviously this post only scratched the surface and more complex use cases will require that you dig into the excellent Stripe documentation. A more robust payment system would also take care of things like error handling and avoiding duplicate charges if a user accidentally tries to process the charge twice in a row. However, as you saw, Stripe makes it really easy to create payment pages without ever having to deal with sensitive data like credits card numbers. They take care of handling the sensitive data for us.
Hopefully this short intro was helpful in easing your dive into how processing payments online using Stripe and Node.js works. If you had any problems implementing the code here, feel free to check out this Github repo.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Refused to load the script ‘https://js.stripe.com/v3/’ because it violates the following Content Security Policy directive: “script-src ‘self’ http://gc.kis.v2.scr.kaspersky-labs.com ws://gc.kis.v2.scr.kaspersky-labs.com”. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.
Can you help me with this error ?
I have tried to access stripe api usign digitalOcean Kubernetes that run container with nodejs, similar to this tutorial’s node-express server.
When I used test-mode API keys, It works and paymant was successful in test-mode. But it does not work when I used live-mode API keys.
Nginx reverse proxy shows 502 bad gateway error, when I access stripe API using stripe node module. How can I solve this issue? Is there any live-mode specific issue?