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 ?

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).

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 yourStripe 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 !

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

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

<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 yourStripe 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 !

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

The life, work, and tactics of entrepreneurs around the world. Welcoming submissions on technology trends, product design, growth strategies, and venture investing. Learn more about how you can get involved at startupgrind.com.

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

The life, work, and tactics of entrepreneurs around the world. Welcoming submissions on technology trends, product design, growth strategies, and venture investing. Learn more about how you can get involved at startupgrind.com.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade