Use Stripe without server side code in less than 5 minutes

Quick Tips

Thomas Brodusch
Jun 17, 2017 · 5 min read

Problem — How to implement Stripe on a single .html page without a back-end server ?

Why ? Because of his token generation method who generate a unique token each time a customer is paying using Stripe.

Requirements

Order & Pay Serverless on Stripe — WebTask.io

What is WebTask.io ?

🔐 How is it secure ?

Why we are going to use Webtask.io ?

First Webtask — Handle Stripe Order

1. Login to Webtask.io and create a new Webtask

Click on “Webtask” and name it “webtask-stripe-order”

2. Define you Stripe private API key in a Webtask secret

Click on the “Key tool icon”, and “Secrets”
Name your new Webtask secret variable “stripe_private_api_key” and put you Stripe Private API key in the value field. You can find your Stripe Private API Key on yourStripe Dashboard > API”.

3. Put some logic in our Stripe Order function

Don’t forget to save your Webtask by clicking on the floppy icon and start your microservice by clicking on the play icon

Second Webtask — Handle Stripe Payment 💳

1. Create another new Webtask

2. Define you Stripe private API key

3. Put some logic in our Stripe Payment function !

Don’t forget to save your Webtask by clicking on the floppy icon and start your micro-service by clicking on the play icon

Try everything together

Stripe Element to create Stripe Credit Card input

The .html page

The main.js file

Replace by your own Stripe Public API Key you can find it on yourStripe Dashboard > API”.

JavaScript logic to create an order and perform a payment.

We can see our new order on the Stripe Dashboard and the status is Paid !

That’s all folks, you can now use Stripe payment… Serverless, like a charm👌✨

Psss… there is some others things I’ve wrote 😉

Startup Grind

Stories, tips, and learnings from and for startups around…

Startup Grind

Stories, tips, and learnings from and for startups around the world. Welcoming submissions re: startup education, tech trends, product, design, hiring, growth, investing, and more. Interested in submitting? Visit our submission form here: https://airtable.com/shrShpeN89HrzCzOB

Thomas Brodusch

Written by

Hyperactive creative - My life is driven by the wonderful people I meet and the beautiful things I create with them. From Paris with ❤️

Startup Grind

Stories, tips, and learnings from and for startups around the world. Welcoming submissions re: startup education, tech trends, product, design, hiring, growth, investing, and more. Interested in submitting? Visit our submission form here: https://airtable.com/shrShpeN89HrzCzOB