Image for post
Image for post

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

Image for post
Image for post

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

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

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

Image for post
Image for post
Click on the “Key tool icon”, and “Secrets”
Image for post
Image for post
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

Image for post
Image for post
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 !

Image for post
Image for post
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

Image for post
Image for post

The main.js file

Image for post
Image for post
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.

Image for post
Image for post
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 😉

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Startup Grind

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

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

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store