Working with mutation resolvers and Stripe Checkout

Millions of businesses trust Stripe to accept payments. Like every developer product, there are APIs and SDKs you can use to accept payments, create orders, retrieve customers, and more.

Using the Grafbase Edge Gateway and Resolvers we can significantly reduce the setup needed on the frontend. With Grafbase we can expose a unified GraphQL API that contains all of the actions we want to invoke with Stripe.

In this guide we'll be creating a custom Mutation with Edge Resolvers that creates a Stripe Checkout using the server-side Stripe SDK.

If you haven't used Stripe before, I recommend reading this quickstart before continuing with this guide.

Inside of a new directory or an existing project run the following command:

npx grafbase init

Now open grafbase/schema.graphql and replace the contents with this schema:

extend type Mutation {
  checkout(input: CheckoutSessionInput!): CheckoutSession!
    @resolver(name: "checkout")
}

input CheckoutSessionInput {
  lineItems: [CheckoutLineItem]
}

input CheckoutLineItem {
  price: String!
  quantity: Int!
}

type CheckoutSession {
  url: String!
}

In the schema above we extend the type Mutation with a custom mutation checkout.

This mutation accepts a single input argument of the type CheckoutSessionInput.

Inside the grafbase directory initialize NPM with the following command:

npm init -y

Now install the stripe dependency using NPM:

npm install stripe

Sign in to your Stripe Dashboard and toggle "Test mode":

Next go to the Developers > API keys section and copy the Secret key:

Now create the file grafbase/.env and add your STRIPE_SECRET_KEY:

STRIPE_SECRET_KEY=

The schema we created earlier points the checkout mutation to the file checkout with the @resolver directive — @resolver(name: "checkout").

Create the file resolvers/checkout.ts and add the following:

import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2022-11-15',
  typescript: true,
})

export default async function Resolver(_, { input }) {
  const { lineItems } = input

  const data = await stripe.checkout.sessions.create({
    success_url: 'https://example.com/success',
    line_items: lineItems,
    mode: 'payment',
  })

  return { url: data.url }
}

So we can successfully invoke the custom checkout mutation you will need an existing Stripe product.

If you haven't a product already, go to Dashboard > Products > Add Product. Make sure you're still in Test mode.

Give your product a name, upload an image and set a price.

Now copy the Price API ID. We'll use this next.

We're now ready to create a Stripe Checkout Session with GraphQL.

Start the Grafbase CLI:

npx grafbase dev

Then go to http://localhost:4000 and execute the following GraphQL mutation:

mutation {
  checkout(input: {
    lineItems: [
      {
        price: 'price_1Mt5h0D1CEk8AY6BaIVyRJRN',
        quantity: 1
      }
    ]
  }) {
    url
  }
}

That's it! You should see the url to the Stripe Checkout in the mutation response.