🏦

priceIdなしでStripe Checkoutのリンクを作成する方法

kboy

2023/04/19に公開

Stripe

tech

Stripe Checkoutは3年前くらいから使っているのですが、priceIdなしでStripe Checkoutのリンクを作成したのは初めてだったので、その方法をまとめます。

背景

今回この実装を行ったCodeBoy2の開発背景についてはこちらの記事に書きましたので、 なんでこの実装したの？ という話が気になる方はチェックしてみてください。

要は、値段のパターンがたくさんあるCtoCの決済を行いたかったというのが背景です。

事前準備

Stripeのアカウントを作成し、必要なAPIキーを取得しておいてください。

また、Stripeの公式ドキュメントやチュートリアルに従って、基本的なStripe Checkoutのセットアップを完了しておいてください。

この辺の説明は割愛します。

手順

私のケースでは、フロントエンドはFlutter Web、バックエンドはFirebase Functionsで構成されています。

手順は以下の2ステップです。

①【Firebase Functions】Checkout Sessionを作成し、URLを返す
②【Flutter Web】関数を呼び出してStripe CheckoutのURLを受け取る

①【Firebase Functions】Checkout Sessionを作成し、URLを返す

Stripe APIを使用して、サーバーサイドでCheckout Sessionを作成します。以下の例は、Firebase FunctionsのNode.jsでStripe APIを使用してCheckout Sessionを作成する例です。

index.ts

import Stripe from 'stripe';
const STRIPE_SECRET_KEY = functions.config().secret.stripe.secret_key;
const stripe = new Stripe(STRIPE_SECRET_KEY, { apiVersion: '2020-08-27' });

export const createStripeCheckoutUrl = functions.region('asia-northeast1').https.onCall(async (data, context) => {
  const session = await stripe.checkout.sessions.create(data);
  return session.url;
});

②【Flutter Web】関数を呼び出してStripe CheckoutのURLを受け取る

以下のようにline_itemsの中にname、description、amount等を渡す感じで、事前にproductおよびpriceが作られていなくても決済ができます。

import 'dart:html' as html;

Future openStripeCheckout() async {
    final checkoutSession = {
      'allow_promotion_codes': true,
      'billing_address_collection': 'auto',
      'success_url': successUrl,
      'cancel_url': cancelUrl,
      'mode': 'payment',
      'line_items': [
        {
          'price_data': {
            'currency': 'jpy',
            'product_data': {
              'name': title,
            },
            'unit_amount': amount,
          },
          'quantity': 1,
        },
      ],
      'payment_intent_data': {
        'application_fee_amount': amount * (10 / 100),
        'transfer_data': {
          'destination': accountId,
        },
      },
      'customer': customerId,
    };
    final result = await _functionsRepository.call(
      functionName: 'stripe-createStripeCheckoutUrl',
      parameters: data,
    );
    final url = result.data;
    html.window.open(url);
}