💳

[Stripe]チェックアウトセッションのカスタマイズ方法

2024/09/02に公開

Next.js

TypeScript

Stripe

tech

 はじめにStripeのチェックアウトセッションは、簡単に決済フローを実装できる便利な機能です。しかし、デフォルトの設定では不十分な場合があります。この記事では、Stripeチェックアウトセッションをカスタマイズして、より充実した決済体験を提供する方法を解説します。

 目次基本的なチェックアウトセッションの実装
住所情報の収集
電話番号の収集
配送方法の選択
カスタムテキストの追加
クロスセルの実装（おすすめの商品表示）
プロモーションコードの有効化

 基本的なチェックアウトセッションの実装まず、基本的なチェックアウトセッションの実装例を見てみましょう。
Typescript
import { NextResponse } from "next/server";
import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-06-20',
});

export async function POST(req: Request) {
  try {
    const { priceId, productId } = await req.json();

    const session = await stripe.checkout.sessions.create({
      line_items: [
        {
          price: priceId, 
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/product/${productId}/checkout-success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/product/${productId}`,
    });

    return NextResponse.json({ url: session.url });
  } catch (err: any) {
    return new Response(err.message, {
      status: err.statusCode || 500,
    });
  }
}


この基本的な実装では、以下の情報が収集されます
メールアドレス
カード情報
カード保有者の名前
国または地域
しかし、ECサイトではより多くの情報が必要になることがあります。

例えば、配送に必要な「住所」確認の際に必要な「電話番号」など。

以下では、チェックアウトセッションをカスタマイズする方法を紹介します。

 参考https://docs.stripe.com/api/checkout/sessions/create

 住所情報の収集住所情報を収集するには、shipping_address_collectionパラメータを追加します。
Typescript
const session = await stripe.checkout.sessions.create({
  // ... 他のオプション
  shipping_address_collection: {
    allowed_countries: ['JP'], // 日本に限定
  },
  // ...
});

 電話番号の収集電話番号を収集するには、phone_number_collectionパラメータを使用します。
Typescript
const session = await stripe.checkout.sessions.create({
  // ... 他のオプション
  phone_number_collection: {
    enabled: true,
  },
  // ...
});

 配送方法の選択配送方法の選択肢を提供するには、まずStripeの管理画面で配送料金を設定し、そのIDを使用します。

Typescript
const session = await stripe.checkout.sessions.create({
  // ... 他のオプション
  shipping_options: [
    {
      shipping_rate: "通常配送のID",
    },
    {
      shipping_rate: "お急ぎ便のID",
    },
  ],
  // ...
});
このshipping_rateにあたるコードは、ここにあるIDのことです。

実装後画面は以下のようになります。


 カスタムテキストの追加配送に関する注意事項などのカスタムテキストを追加できます。
Typescript
const session = await stripe.checkout.sessions.create({
  // ... 他のオプション
  custom_text: {
    shipping_address: {
      message: "配送先住所の入力に誤りがありますと、商品が届かない可能性がありますので、ご注意ください。",
    }
  },
  // ...
});

 他にカスタムテキストで実装できること
custom_text.after_submit

Custom text that should be displayed after the payment confirmation button.

（支払い確認ボタンの後に表示されるカスタムテキスト。）
custom_text.shipping_address

Custom text that should be displayed alongside shipping address collection.

（配送先住所の収集と一緒に表示されるカスタムテキスト。）
custom_text.submit

Custom text that should be displayed alongside the payment confirmation button.

（支払い確認ボタンの横に表示されるカスタムテキスト。）
custom_text.terms_of_service_acceptance

Custom text that should be displayed in place of the default terms of service agreement text.

（デフォルトの利用規約テキストの代わりに表示するカスタムテキスト。）

 クロスセルの実装（おすすめの商品表示）Stripeの商品カタログダッシュボードでクロスセルを設定すると、自動的に関連商品が表示されます。



こうすると、購入画面に反映されます。


 プロモーションコードの有効化まずStripeにプロモーションコードを事前に登録しておきましょう！

こちらは事前に特定の方に向けてメールやチラシ、LINE等で配信しておくことを想定しています。



プロモーションコードを使用可能にするには、allow_promotion_codesパラメータを追加します。
Typescript
const session = await stripe.checkout.sessions.create({
  // ... 他のオプション
  allow_promotion_codes: true,
  // ...
});

 まとめこの記事では、Stripeのチェックアウトセッションをカスタマイズする方法について詳しく解説しました。

住所情報の収集: shipping_address_collectionパラメータを使用して、配送先住所の収集が可能です。

電話番号の収集: phone_number_collectionパラメータを使って、電話番号の収集を追加できます。

配送方法の選択: shipping_optionsパラメータで、複数の配送方法を選択肢として提供できます。

カスタムテキストの追加: custom_textパラメータを用いて、チェックアウトページにカスタムメッセージを追加できます。

クロスセルの実装: 商品カタログで設定したクロスセルオプションを利用して、関連商品を表示できます。

プロモーションコードの有効化: allow_promotion_codesパラメータを使い、プロモーションコードの入力を受け付けられるようにします。
これらのカスタマイズを行うことで、より充実した決済体験をユーザーに提供し、ECサイトの運営効率を向上させることができます。

各オプションの設定方法はStripeの公式ドキュメントで確認し、実装に役立ててください。

 参考
 Stripe API "Create a Session"
https://docs.stripe.com/api/checkout/sessions/create

 紹介
 「獣医学ノート」についてhttps://www.jyuuigakunote.com/
全国の獣医系の学生に向けて「国家試験」「定期試験」の対策ができるオリジナル問題集を販売中です！

ご興味、もしくはお知り合い等に獣医系学生がいらっしゃいましたら、ぜひ共有の方をよろしくお願いいたします！