Stripe Connectでcheckout sessionを使い定期支払いを実装（Node）

実装していく

前提として、料金を選択できる処理は実装済みとします。

フロント側

front.ts

import axios from 'axios'
import { Stripe } from '@stripe/stripe-js'

const API_BASE_URL = 'https://xxx'

/**
 * checkout sessionを作成するAPIを叩く
 */
const getCheckoutSession = async (
  accountId: string,
  priceId: string,
  originUrl: string
): Promise<{ id: string }> => {
  const url = API_BASE_URL + '/stripe/create_session'
  const data = {
    apiKey,
    accountId,
    priceId,
    originUrl,
  }
  const res = await axios.post<{ checkout_session: { id: string } }>(
    url,
    data,
    { 'Content-Type': 'application/json', }
  )

  return res.data.checkout_session
}

/**
 * stripeの支払い画面に遷移する
 */
const transitionToPaymentStripe = async (): Promise<void> => {
  const checkoutSession: { id: string } = await getCheckoutSession(
    {{ConnectアカウントID}},
    {{選択された料金ID}},
    window.location.origin
  )
  const stripe: Stripe | undefined = window.Stripe
    ? window.Stripe({{親アカウントの公開キー}}, {
        stripeAccount: {{ConnectアカウントID}},
      })
    : undefined
  if (stripe) {
    // ここに入れば、checkout sessionの決済画面に遷移する
    stripe.redirectToCheckout({ sessionId: checkoutSession.id })
  }
}

checkout sessionで作成が成功したらidだけ取得できればいいので、返り値はid: stringのみとしております。

サーバ側

expressを使用してAPIを作成。

server.ts

import * as cors from 'cors'
import * as express from 'express'
import Stripe from 'stripe'

let status: number = 200
const stripe = (apiKey: string): Stripe =>
  new Stripe(apiKey, { apiVersion: '2020-08-27' })
  
const app = express()

app.use(cors({ origin: true }))

app.post('/stripe/create_session', (req, res) => {
  const result: { checkout_session: {} } = {
    checkout_session: {},
  }

  try {
    const { apiKey, accountId, priceId, originUrl } = req.body

    result.checkout_session = await stripe(apiKey).checkout.sessions.create(
      {
        success_url: originUrl + '/',
        cancel_url: originUrl + '/item_select',
        payment_method_types: ['card'],
        line_items: [{ price: priceId, quantity: 1 }],
        client_reference_id: clientReferenceId,
        mode: 'subscription',
      },
      { stripeAccount: accountId }
    )
  } catch (error) {
    console.log(error)
    status = 405
  }

  res.status(status).json(result)
}

req.bodyで取得しているパラメータの詳細：

• apiKey: 親アカウントのシークレットキー
• accountId: ConnectアカウントID
• priceId: フロントで選択された料金ID
• originUrl: フロントのオリジン

参考記事

https://stripe.com/docs/connect/creating-a-payments-page?ui=checkout