Use Stripe without server side code in less than 5 minutes
Quick Tips
Problem — How to implement Stripe on a single .html page without a back-end server ?
Last week, I was looking for a solution on Google to make a payment form works on a simple HTML static page (simple .html unique file, no PHP, no NodeJS, no nothing).
For security reasons, Stripe doesn’t allow to make his solution works without server’s side code (to handle the payment process).
Why ? Because of his token generation method who generate a unique token each time a customer is paying using Stripe.
Stripe give this token back to you and after that you can perform any operation you want using Stripe API (create new order, pay a new charge, create a customer, …) by manipulating this only token (and not the real Credit Card number).
Requirements
So to do this, we need:
- A Stripe Account (to generate your API Keys)
- A Stripe Product created
- A Stripe product SKU (Stock Keeping Unit) attached to your product
- An account on webtask.io
Order & Pay Serverless on Stripe — WebTask.io
What is WebTask.io ?
Webtask.io is a FAAS (Functions-As-A-Service) who allow you to host some code and make Serverless endpoints to use this code, it provide you to run backend micro-services without a backend using Webhooks (like Amazon Lambda) .
🔐 How is it secure ?
Everything is secure, your code and your secret vars are separated, when a request reach the endpoint generated by Webtask.io, the code and secret vars (here our Stripe API key) will be encrypted, signed and bundled together.
→ Know more about Webtask.io concept and security, click here.
Why we are going to use Webtask.io ?
We are going to create two functions, in fact two Webtask endpoints:
- One to handle a new Stripe Order
- An other to handle the payment of our previous Stripe’s order
First Webtask — Handle Stripe Order
1. Login to Webtask.io and create a new Webtask
2. Define you Stripe private API key in a Webtask secret
ℹ| Access to stripe_private_api_key
viactx.secrets.stripe_private_api_key
3. Put some logic in our Stripe Order function
ℹ| You seectx.body.name, ctx.body.phone, ctx.body.address
, it’s the way you access to POST variables in our webtask function.
That’s it for, we can now handle new orders ! We have now an endpoint who can catch new Stripe order by reaching it via POST, and passing it some POST variable like the customer name, email, address, and some informations about the product (SKU reference ID, quantity).
ℹ| The endpoint URL generated by Webtask is surrounded in blue on the screenshot.
Second Webtask — Handle Stripe Payment 💳
1. Create another new Webtask
Same as for the first Webtask, call it “webtask-stripe-payment
“.
2. Define you Stripe private API key
Same as for the first Webtask.
3. Put some logic in our Stripe Payment function !
ℹ| Get the endpoint URL generated by Webtask.
Try everything together
So now we have two different endpoints who can handle the creation of a new Stripe order and the payment process of an order.
On our unique .html webpage, we just need to:
- import Stripe JavaScript library:
<script src="https://js.stripe.com/v3/"></script>
- a form who contains our customer informations (name, address, phone, email and everything you want)
- a Credit Card input.
Stripe Element to create Stripe Credit Card input
I’ve made the choice of using Stripe Element to handle the Credit Card input, it’s simple to use, full customisable and secure.
You just have to define a specific div
in your .html page, the Stripe JavaScript Library will do the rest to generate a well formatted Credit Card input.
The .html page
The main.js file
JavaScript logic to create an order and perform a payment.
We have our HTML page with the form, we have generated an Credit Card input, now we need to handle the submission of the form and the whole UI of our payment process.
We can use React, VueJS, vanillaJS, or anything you want to perform an API call to our first Webtask endpoint “webtask-stripe-order
“ (we have the endpoint URL in previous steps) to make an order.
If this first API call success (we get an JavaScript object order
) we can perform a second API call to our second Webtask endpoint “webtask-stripe-payment
“.
If this second API call success (we get an JavaScript object paid_order
) the payment is a success and we can check it on our Stripe Dashboard !