1. Building a Lightweight
Stripe Checkout
System

2. JAM for designers
(and everyone)

3. *
What we’re building
J — Vanilla (!!), and jQuery *
A — Stripe charge microservice
JM — Reusable checkout form
Or React, more on that later

4. Stripe
Checkout
Elements
React-Stripe-Elements

5. require('dotenv').config();
const {send, json} = require('micro');
const post = require('./post');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
module.exports = post(async (req, res) => {
const data = await json(req);
stripe.charges.create(data, (err, resp) => {
if (err) {
send(res, 400, {message: `Charge could not be created.`})
}
else {
send(res, 200, {message: `Charge created.`})
}
})
})

6. module.exports = exports = function (fn) {
return (req, res) => {
res.setHeader('Access-Control-Request-Method', 'POST,
GET')
res.setHeader("Access-Control-Allow-Credentials",
"true");
res.setHeader("Access-Control-Allow-Headers", "Origin, X-
Requested-With, Content-Type, Accept, Authorization");
// set this with your own URL
res.setHeader('Access-Control-Allow-Origin',
process.env.ORIGIN);
…

7. const {method} = req
if (method === 'OPTIONS') {
return {}
}
if (method === 'GET') {
return {message: 'The Stripe charge server is up and
running!', timestamp: new Date().toISOString()}
}
if (method === 'POST') {
return fn(req, res)
}
else {
res.writeHead(405)
res.end('Method Not Allowed')
return
}
}

8. Markup
Javascript
jQuery
Plain ‘ol HTML

9. function createCharge(token) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: 'https://micro-stripe-api.twnsnd.co/',
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer pk_test_JS759ictlRv2JtrZ9aRgqFKR'
},
data: JSON.stringify({
"amount": 2500,
"currency": "usd",
"source": token
}),
success: function () {
alert('Successfully charged!');
},
error: function (xhr, status, error) {
alert('Error with card');
console.log(error.message, xhr, status)
}
});
}

10. Examples
Stripe Elements
Stripe Checkout
micro-stripe.twnsnd.co

11. Deploying with Now
is a breeze
now -E