【Stripe】Checkoutに商品の選択ボックスを付ける

StripeはWebサイトにオンライン決済を導入できるサービスです。
オンラインイベントでの集金にクレジットカード決済を導入したい
と思った時にとても便利です。

Stripeを導入する方法はいくつかありますが、
中でもStripe Checkoutは自動的に生成されたコードをコピペするだけで
サイト内に決済ボタンを導入できてしまいます。

ただし、デフォルトで生成されるコードは、
一つの商品について一つのボタンのみです。

Stripe自体では、一つの商品について複数の料金体系を設定できるのですが、
この場合も、Checkoutで生成されるのは一つの料金に対して一つのボタンです。
このままだと、複数の商品から一つ選んで購入するような形にしたい場合は、
商品の数だけボタンが並ぶことになります。 ちょっとスマートじゃないですよね。

ここでは、生成されるコードに少し改変を加えて、
下の図のように選択ボックスで商品を選択できるようにしたいと思います。

商品の選択ボックス

準備

まずは、Stripeのアカウントを作成しておきましょう。

次に、Checkout を有効にしておきます。
以下の手順でCheckoutの設定ができます。

1. ダッシュボードの検索ボックスに「checkout」と入力します。

   

   checkoutを検索

2. 「Checkoutの設定」をクリックします。
3. 「Checkoutクライアント専用組み込み」を「有効」にします。

   

   checkoutの有効化

4. サイトのドメイン名を「ドメイン欄」に入力します。

   

   ドメイン名の入力

5. 「保存」ボタンをクリックします。

ここではテスト環境で試すことを想定していますが、
本番環境に変更するためにはダッシュボードから利用申請を行う必要があります。

商品の作成

商品はstripeのダッシュボードから「商品」のメニューを開き、
「商品を追加」で新しい商品を作成します。

商品を追加

表示されるフォームに沿って商品の情報を入力します。
「別の料金を追加」で複数の商品を作っても良いですし、
「商品を追加」を繰り返して複数の商品を作ってもOKです。

※1 料金体系モデルは「標準の料金体系」を想定しています。
※2 支払いは「一括」「継続」のどちらかに統一されていることを想定しています。

サイトに購入ボタンを設置する

それでは作成した商品を購入するボタンをサイトに設置します。

Checkoutのコードを取得する

商品を購入するためのボタンを設置するコードを取得します。
このコードをもとに選択ボックスを付けていきます。

1. 上記で作成した商品の一つをクリックします。

   

   作成した商品をクリック

2. 「料金体系」右端の「・・・」をクリックします。

   

   コードスニペットを取得

3. 「Checkoutのコードスニペットを取得」をクリックします。
4. 成功時とキャンセル時にリダイレクトされるURLを設定します。
5. 表示されるコードをコピーします。

単にボタンを設置するだけなら、
このコードをそのままサイト上に貼り付けて完了ですが、
今回は、複数の商品から選択できるようにプルダウンメニューを作成するので、
このコードを少し編集します。

コードを編集する

上記で取得したコードを適当なエディタに貼り付けて編集します。

下の「+」の部分が追加したコードで、
「-」の部分が削除したコードを表します。

<option value='....の所に商品のIDを並べて、
itemA,itemBにはメニューに表示される名前を入力します。

商品のIDは各商品の料金体系の「API ID」欄から取得します。

商品のID

下では二つの商品のみですが、<option value='....の行を追加することで、
さらに商品を追加していくことができます。

 <!-- Load Stripe.js on your website. -->
 <script src="https://js.stripe.com/v3"></script>

 <!-- Create a button that your customers click to complete their purchase. 
 Customize the styling to suit your branding. -->
+ <form>
+    <select id="stripe_select_box">
+        <option value='ここに商品IDを入力'> itemA</option>
+        <option value='ここに商品IDを入力'>itemB</option>
+    </select>
+ </form>

 <button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-price_1H53TSIcYB2Y06an324Hsf5r"
  role="link"
  type="button"
 >
  Checkout
 </button>

 <div id="error-message"></div>

 <script>
(function() {
  var stripe = Stripe('pk_test_*******************************************');

  var checkoutButton = document.getElementById('checkout-button-price_1H53TSIcYB2Y06an324Hsf5r');
  checkoutButton.addEventListener('click', function () {
+  var select = document.getElementById("stripe_select_box");
+  const num = select.selectedIndex;
+  const price = select.options[num].value;
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
-     lineItems: [{price: 'price_**********************', quantity: 1}],
+    lineItems: [{price: price, quantity: 1}],
      mode: 'payment',
      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: 'https://********/success',
      cancelUrl: 'https://********/canceled',
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
 </script>

まとめ

Stripeでプルダウンメニューから選ぶ形式で、
商品の購入ボタンを設置する方法を紹介しました。

オンラインのイベントが増える昨今では、
このようなオンライン決済ツールを上手く使っていきたいですね。