Stripe Checkout API in Node.js Tutorial

https://stripe.com/img/v3/payments/shared/social.png

Stripe is the new standard in online payments. Stripe is arguably best software platform for running an internet business. They handle billions of dollars every year for businesses around the world.

Today, I will be walking you through the Stripe documentation by implementation. The reason I chose to write this article is because I had a really tough time as a new developer understanding their documentation. Although it was well explained, I still struggled understanding “where do i put this code in my project” and had more questions. Stripe Checkout API allows you to securely collect card information from your customers and create a card payment. It’s important to note that Stripe uses tokenization to ensure that no sensitive card data ever touches your server, so your integration can operate in a PCI-compliant way. Also, card details are never fully revealed, although Stripe’s Dashboard and API do provide limited information about the card (such as its last four digits, expiration date, and brand). This can be useful in some cases where I client might reach out and ask did my payment go through? And you can then verify their payment and identity by asking them a few basic questions.

To get started, you will need create an account and obtain your API keys. Use your test keys in testing and development and live keys for production.

Next, install Stripe. In my code walk through, I’ll be using a Node.js/Express.js app, if you’re using something else just see how to install it here

So in a controller, at the top of the file, you should require your stripe module like so:

const stripe = require("stripe")("sk_test_4ed24rkbnvcb3987dd23rc");

I use const because const is better than var, feel free to Google, ‘const vs let vs var if you do not know why, this is important for any developer to understand.

In that controller, ideally semantically, at a specific route such as /charge, your logic should be the give code:

(async () => {
const charge = await stripe.charges.create({
amount: 999,
currency: 'usd',
source: 'tok_visa',
receipt_email: 'jenny.rosen@example.com',
});
})();

It looks like Stripes docs recently hopped on the async/await hype, it’s great, go read about it. It doesn’t make your code better by any means, but it reads better to the developer so you should use it! Also, dive into more ES6 stuff to make all your JavaScript the most bad ass to date.

You can see that this route is working if you hit the endpoint, Stripe returns a Charge object in response to your API request.

Finally, in the view where the user will see this payment form or button, slap this code in:

<form action="your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_JYkoM8sdvfbJHB23432IBphI4jw"
data-amount="999"
data-name="Stripe.com"
data-description="Example charge"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true">
</script>
</form>

Sometimes in the amount if you pass in a dynamic variable here, you have to times it by 100 like so: amount: price*100 because Stripe will for some reason make something like $100 actually read as $1.00.

Your keys should be place in env variables for security purposes.

Lastly, I’d like to show you how you can allow users to enter in the amount they’d like to pay you, imagine a button for a donate form, something you could throw on all your projects 😉

Basically, within the form, before your script, add an input for the user to enter how much they’d like to donate. Give it a unique ID, and onchange method that calls a function like saveValue()

In your file, create a saveValue() function

Here I’m using your lovely jQuery to easily grab the stripe form by it’s unique id (just give it a unique id as a property), then using this syntax set the attribute on the stripe form to be the value of the input. And that’s about it. Be sure to set the parameters in your controller to the values you set in the views. Hit the button, the Stripe form will appear, use the Stripe test card information and see the response come through!

Hope this was useful and helps you secure that bag! 💸💰💻

Follow me on GitHub: @awesomezaidi

Follow me on Twitter: @theasimzaidi

Feel free to comment any questions you may have as I did not explain every detail here and there are always more than one way to skin a cat!