Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Building a Lightweight Stripe Checkout System

198 visualizaciones

Publicado el

JAMStack boston.

Publicado en: Tecnología
  • Sé el primero en comentar

Building a Lightweight Stripe Checkout System

  1. 1. Building a Lightweight Stripe Checkout System
  2. 2. JAM for designers (and everyone)
  3. 3. * What we’re building J — Vanilla (!!), and jQuery * A — Stripe charge microservice JM — Reusable checkout form Or React, more on that later
  4. 4. Stripe Checkout Elements React-Stripe-Elements
  5. 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. 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. 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. 8. Markup Javascript jQuery Plain ‘ol HTML
  9. 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. 10. Examples Stripe Elements Stripe Checkout micro-stripe.twnsnd.co
  11. 11. Deploying with Now is a breeze now -E

×