Use Stripe without server side code in less than 5 minutes

Quick Tips

Thomas Brodusch

Follow

Published in

Startup Grind

5 min readJun 17, 2017

--

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

**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 your** “**Stripe Dashboard > API”.**

ℹ| Access to stripe_private_api_keyviactx.secrets.stripe_private_api_key

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**

ℹ| 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

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

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 !