これまでのStripe Checkoutは、サーバー側の実装も必要でした。その関係で手軽に埋め込むにはちょっとハードルが高いかなぁと思っていたのですが、まさかのクライアントオンリー版が登場した様子です。

はじめる

ダッシュボードの設定画面から、Checkoutを有効化しましょう。

URL: https://dashboard.stripe.com/account/checkout/settings

有効化すると、本番環境で利用するドメインのホワイトリスト登録や利用開始のためのウィザードが表示されます。

商品を登録する

まずは[新規商品を作成]を押してみましょう。商品情報は以下の内容を登録できます。

一回限りの商品で登録できる内容

• 商品名
• 通貨
• 金額
• 画像

定期利用する商品で登録できる内容

• 商品名
• ユニットラベル
• 明細書表記

登録後の表示

登録が終わると[商品]ページに移動します。

購入ボタンを埋め込む

[Checkoutで使用]をクリックすることで、コードが発行されます。

発行されるコードは、以下のようなものです。

<!-- 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. -->
<button id="checkout-button" role="link">Pay</button>
<div id="error-message"></div>

<script>
  var stripe = Stripe('pk_test_XXXXXX', {
    betas: ['checkout_beta_4']
  });

  var checkoutButton = document.getElementById('checkout-button');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: 'sku_XXXXXXXX', quantity: 1}],

      // Note that it is not guaranteed your customers will be redirected to this
      // URL *100%* of the time, it's possible that they could e.g. close the
      // tab between form submission and the redirect.
      successUrl: 'https://your-website.com/success',
      cancelUrl: 'https://your-website.com/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>

これを埋め込むと、”Pay”というボタンが表示されます。

ボタンをクリックすると、Stripe側の決済ページに移動します。

購入が完了すると、先程のフォームで指定したURLにリダイレクトされます。

ざっと触って感じたProps / cons

props

• 簡単に決済ボタンを作れる
• 定期決済もできる
• HTML / JS詳しくなくてもだいたい動かせる

cons

• 顧客が都度新規に作成されるので、あくまで単発決済目的っぽい
  • Promiseでresultが来るので、後続で紐づけとかはできそうではある
  • ただしStripe SDKが要るので結局サーバーサイドの実装が必要に
• ベータ版故に基幹ビジネスへの投入は蛮勇の可能性あり
• Stores.jpやShopifyあたりの購入ボタン埋め込み機能のほうが自由度高い可能性はある