using tier with checkout

To run this demo, make sure that you have a version of tier
installed that has support for checkout links.

    $ brew upgrade tierrun/tap/tier

Note that the /payment page is now just a redirect, so there's no need
to do a payment method collection template, or any of that.

Author: isaacs

lib/routes.mjs

@@ -12,6 +12,8 @@ import {
   validateNewUser,
 } from './users.mjs'
 
+import { actualRequestUrl } from 'actual-request-url'
+
 import {
   defaultTemplateData,
   showPage,
@@ -52,9 +54,27 @@ routes.get('/pricing', log, async (req, res) => {
 routes.post('/plan', log, mustLogin, async (req, res) => {
   const { plan } = req.body
   const user = req.cookies.user
-  await tier.subscribe(`org:${user}`, plan)
+  const reqUrl = actualRequestUrl(req)
+  const successUrl = String(new URL('/checkout_success?plan='+plan, reqUrl))
+  const cancelUrl = String(new URL('/checkout_cancel', reqUrl))
+  const { url } = await tier.checkout(`org:${user}`, successUrl, {
+    cancelUrl,
+    features: plan,
+  })
+  res.redirect(url)
+})
+
+// just set the cookie and take them back to the pricing page
+routes.get('/checkout_success', log, mustLogin, async (req, res) => {
+  const { plan } = req.query
   res.cookie('plan', plan, { httpOnly: true })
-  res.send({ ok: 'updated plan' })
+  res.redirect('/pricing')
+})
+
+// just redirect back to the pricing page
+// In a real app, you'd probably want to do something here
+routes.get('/checkout_cancel', log, mustLogin, async (_, res) => {
+  res.redirect('/pricing')
 })
 
 // This is the application endpoint, where we convert temperatures
@@ -66,7 +86,7 @@ routes.post('/convert', log, mustLogin, async (req, res) => {
 
   // Check whether the user has access to this feature.  This call
   // will tell us the limit and usage of the feature we care about.
-  const usage = await tier.limit(`org:${user}`, 'feature:convert')
+  const usage = await tier.lookupLimit(`org:${user}`, 'feature:convert')
   if (usage.used >= usage.limit) {
     return res.status(402).send({ error: 'not allowed by plan' })
   }
@@ -121,7 +141,7 @@ const loginUser = async (res, user) => {
   // get the user's current plan
   // We don't need this for much, but it's handy when we show
   // the pricing page to be able to highlight their current plan.
-  const phase = await tier.phase(`org:${user.id}`)
+  const phase = await tier.lookupPhase(`org:${user.id}`)
   res.cookie('plan', phase.plans[0])
 
   await setSecureLoginCookies(res, user)
@@ -196,84 +216,8 @@ routes.use('/ping', log, (req, res) => {
 // let them do a few things before actually requiring a credit card.
 routes.get('/payment', log, mustLogin, async (req, res) => {
   const user = req.cookies.user
-  // This is one of the rare cases where we need to know the actual
-  // Stripe identifier for this customer.
-  const { stripe_id: customerID } = await tier.whois(`org:${user}`)
-
-  const options = {
-    customer: await getStripeCustomer(customerID),
-    setupIntent: await createStripeSetupIntent(customerID),
-    stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
-  }
-  showPage(req, res, 'payment.ejs', options)
-})
-
-const getStripeCustomer = async (customerID) => {
-  const url = new URL('https://api.stripe.com/v1/customers/' + customerID)
-  url.searchParams.set('expand[]', 'invoice_settings')
-  url.searchParams.append('expand[]', 'invoice_settings.default_payment_method')
-  const stripeRes = await fetch(url.href, {
-    method: 'GET',
-    headers: {
-      authorization: `Bearer ${process.env.STRIPE_KEY}`,
-    },
-  })
-  return await stripeRes.json()
-}
-
-const createStripeSetupIntent = async (customerID) => {
-  const setupIntent = await fetch('https://api.stripe.com/v1/setup_intents', {
-    method: 'POST',
-    headers: {
-      authorization: `Bearer ${process.env.STRIPE_KEY}`,
-      'content-type': 'application/x-www-form-urlencoded',
-    },
-    body: new URLSearchParams({
-      customer: customerID,
-      'payment_method_types[]': 'card',
-    }),
-  })
-  const seti = await setupIntent.json()
-  if (seti.error) {
-    throw seti.error
-  }
-  return seti
-}
-
-// redirected here by Stripe
-// /attach-payment-method?setup_intent=seti_...&setup_intent_client_secret=seti_..._secret_...&redirect_status=succeeded
-routes.get('/attach-payment-method', log, mustLogin, async (req, res) => {
-  const parsed = new URLSearchParams(req.url.substring(req.url.indexOf('?')))
-  const setup_intent = parsed.get('setup_intent')
-  const redirect_status = parsed.get('redirect_status')
-
-  const u = new URL(`https://api.stripe.com/v1/setup_intents/${setup_intent}`)
-  const setupIntent = await fetch(u.href, {
-    method: 'GET',
-    headers: {
-      authorization: `Bearer ${process.env.STRIPE_KEY}`,
-    },
-  })
-  const seti = await setupIntent.json()
-  if (redirect_status === 'succeeded' && seti.payment_method) {
-    // attach to customer
-    const { stripe_id: customerID } = await tier.whois(`org:${req.cookies.user}`)
-    const url = 'https://api.stripe.com/v1/customers/' + customerID
-    const stripeRes = await fetch(url, {
-      method: 'POST',
-      headers: {
-        authorization: `Bearer ${process.env.STRIPE_KEY}`,
-        'content-type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        'invoice_settings[default_payment_method]': seti.payment_method,
-      }).toString(),
-    })
-    await stripeRes.json()
-    return res.redirect(303, '/payment')
-  }
-
-  // some kind of error or thing requiring user action
-  // TODO: pass this info to the payment page to resolve
-  return res.json([ seti, redirect_status ])
+  const reqUrl = actualRequestUrl(req)
+  const success = String(new URL('/', reqUrl))
+  const { url } = await tier.checkout(`org:${user}`, success)
+  res.redirect(url)
 })

lib/templates/header.include.ejs

@@ -2,7 +2,6 @@
 <html>
 <head>
 <title><%= title %></title>
-<script src="https://js.stripe.com/v3/"></script>
 <body>
 <h1><%= typeof header === 'undefined' ? title : `${title} - ${header}` %></h1>
 <%- include('./nav.include.ejs') %>

lib/templates/payment.ejs

@@ -85,20 +85,3 @@ for (const p of plans) {
 </tr>
 
 </table>
-
-<script>
-document.body.addEventListener('submit', async e => {
-  e.preventDefault()
-  const form = e.target
-  const url = form.action
-  const formData = new FormData(form)
-  const res = await fetch(form.action, {
-    method: 'POST',
-    headers: {
-      'content-type': 'application/x-www-form-urlencoded',
-    },
-    body: `plan=${formData.get('plan')}`,
-  })
-  location.reload()
-})
-</script>