Blitz: Feature request: Stripe Recipe

Created on 8 May 2020  路  10Comments  路  Source: blitz-js/blitz

What do you want and why?

To make Blitz the first choice framework for makers, it would be great to have Stripe integration so we can quickly go from a blank slate to selling products on the site.

Possible implementation(s)

This can likely be achieved as a Blitz installer. Stripe integration I believe just requires a serverless endpoint and configuration. Might need to explore this more before suggesting how exactly it could work.

kinrecipe statuready-to-work-on

All 10 comments

Great request @needcaffeine!

What are the exact use cases that you want to be made easy?

This can certainly be added as a Blitz installer, once installers are ready to use. Might also be an opportunity for a plugin too.

What I envision is an equivalent to say Laravel, where one can bake an entire application with auth all the way to Stripe checkout integration, and focus only on their business problems. Stripe currently supports Checkout, which takes care of a LOT for us. Just something to keep in mind for installers/plugins.

@needcaffeine How does Laravel do this and what do you like and not like about it?

Laravel Cashier is actually more of a wrapper around Stripe's subscription service, with PDF invoice generation. It used to support Braintree too but that was later removed when it couldn't maintain feature parity. It does support one-off payments but it's not really the primary focus.

@flybayer Apologies, I don't actually know how Laravel does this because I don't use it. I just happened to notice that it's a pain point for me and other makers because I recently made a thing, and then had to go digging into documentation to make payments work. I used Laravel as an example because I saw lots of saas startups using it with Laravel Cashier or something. Maybe it _isn't_ a thing you want Blitz to focus on, which I totally understand.

Ok yeah that makes sense. This can definitely be added as an installer/recipe once that support is added.

Could this be implemented with the new Stripe portal feature? 馃憖 has kind of like an oauth redirect flow.

https://youtu.be/u8H6awDJVpM

I'm not sure if this is related, but how do I can get the raw body of an API request? this is needed for verify Stripe webhooks.

https://flaviocopes.com/express-get-raw-body/

UPDATE: Dammn, it was not _easy_. This code worked for me:

import db from "db"
import Stripe from "stripe"

export const config = {
  api: {
    bodyParser: false,
  },
}

export default async function handleSubscriptionChange(req: any, res: any) {
  const payload = await new Promise<string>((resolve) => {
    let buffer = ""
    req.on("data", (chunk) => {
      buffer += chunk
    })

    req.on("end", () => {
      resolve(Buffer.from(buffer).toString())
    })
  })

  const stripe = new Stripe(process.env.STRIPE_SECRET!, {
    apiVersion: "2020-08-27",
  })

  const stripeEvent = stripe.webhooks.constructEvent(
    payload,
    req.headers["stripe-signature"],
    "<WEBHOOK_SECRET>"
  )
  const subscription = stripeEvent.data.object as any

  await db.user.update({
    where: { stripeId: subscription.customer },
    data: {
      plan: subscription.items.data[0].plan.nickname,
    },
  })

  res.status(200).send("OK")
}

Hey Folks, I have working example using Blitz and Stripe checkout/portal. I don' think that a recipe will be a good choice here because it will introduce a lot of files and people can do this differently. However I will happy to add a simple example to the repo. If that's ok with you I can do ion the upcoming days.

To achieve this you can

  • use a query to get a stripe session id
  • on the front end use that session id to build a checkout url using stripe js sdk
  • add an API endpoint to act as a webhook
  • Update the data base once you receive and validate the stripe purchase event

@Khaledgarbaya yeah, that'd be a good starting point at least!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MrLeebo picture MrLeebo  路  5Comments

flybayer picture flybayer  路  4Comments

merelinguist picture merelinguist  路  3Comments

timsuchanek picture timsuchanek  路  5Comments

netheril96 picture netheril96  路  4Comments