STUDIOのサイトにStripe決済を実装する方法

2021/05/27 追記

リンクだけで決済ページを生成できる「Stripe Links」がリリースされたので、今後はこっちを使えば行けそうです！ありがとうGTM😂でもこの記事でニーズの高さを実感できたのは面白かった。

はじめに

決済サービスStripeのCheckout機能は、サーバーサイドの実装をしなくてもJavaScriptのコードスニペットをペッと貼り付けるだけで綺麗なボタンと、美しいデザイン・UIの決済画面を実装することが可能です。一方でSTUDIOで作ったサイトはJavaScriptを埋め込むことができません。しかし Google Tag Manager（GTM）を使うとHTMLコードとしてJavaScriptを埋め込むことが可能となり、これによりSTUDIOでもStripe決済を実装することができます！（単発・定期どちらも可。URLは一度stripeに遷移して再度STUDIOのURLにリダイレクトされます）

全体的な流れ

STUDOにはGTMがAppとして提供されているので、GTMで作ったStripeのコードスニペットのタグを埋め込みます。本来はStripeのコードスニペットで生成されたボタンが押されるとJavaScriptが実行されて決済ページにリダイレクトされるのですが、今回はSTUDIOで作ったボタンにIDを付与し、そのIDをもつボタンが押されたらStripeのJavaScriptが実行されるようにカスタマイズをします。

STUDIOで決済ボタンを作成

STUDIOではStripeのJavaScriptが実行されるためのIDを持ったボタンを作るだけです。ボックス要素を追加して任意のIDを設定してください。デザインはお好みで。今回は#plan-jpy-premiumとしました。

また決済成功時とキャンセル時にリダイレクトされるページも作っておきます。

• /success
• /canceled

Stripe側の準備

まずStripeをテストモードにします。左メニューにあるテストデータを表示をオンにするとAPIキーや商品が全てテスト用になります。

Checkoutの設定

設定>商品の設定>Payments>Checkout の設定 にて以下2つの設定をします。

• ドメイン
• 商品

商品の追加は専用の作成画面に飛びます。

商品と料金体系を作成したら、（これがCheckoutでは非常にわかりにくいところにあるのですが）料金の右にある...マークを開くとCheckout コードスニペットを取得を押すと Checkout スニペットジェネレータ が起動します。

料金の詳細画面にいってしまうとコードスニペットは取得できませんので迷子にならないようお気をつけを。

この画面で決済成功時のリダイレクト先URL、決済キャンセル時のリダイレクト先URLを入力してやればコードスニペットが生成されるので、本来はこれをコピーしてウェブサイトに貼り付ければStripe決済ボタンの完成という簡単なシステムなのですが、STUDIOではこれを貼り付けるブロックが現時点でないので、これをカスタマイズしてきます。

<!-- 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. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-price_xxxxx"
  role="link"
  type="button"
>
  Checkout
</button>

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

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

  var checkoutButton = document.getElementById('checkout-button-price_xxxxx');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      lineItems: [{price: 'price_xxxxx', quantity: 1}],
      mode: 'subscription',
      // 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/fulfill-orders
      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>

カスタマイズ後のJavaScriptコード

主な変更点は（今回はSTUDIOで作ったので）button要素を削除したことと、document.getElementById('plan-jpy-premium')のIDをSTUDIOで設定したIDに変更したことです。

<script src="https://js.stripe.com/v3"></script>

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

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

  var checkoutButton = document.getElementById('plan-jpy-premium');
  checkoutButton.addEventListener('click', function () {
    stripe.redirectToCheckout({
      lineItems: [{price: 'price_xxxxx', quantity: 1}],
      mode: 'subscription',
      successUrl: 'https://your-website.com/success',
      cancelUrl: 'https://your-website.com/canceled',
    })
    .then(function (result) {
      if (result.error) {
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
</script>

Webhookについて

Checkoutの設定の3つ目のWebhookというのは、Stripeで決済イベントが発生したときに別のエンドポイント（URL）に通知をして、そっちでも何かごにょごにょしたいとき（例えば決済データをサービスのDBにも保存したいなど）に使う仕組みのことなので、STUDIOに決済システムを導入するだけなら不要です。

JavaScriptのコードコードスニペット側で任意の値をclient_refference_idとして渡してあげると、決済イベント時にWebhook側に渡してあげることができるので、QueryString（URLの?の跡につくやつ）や Cloud Functions for Firebase などと連携してある程度のカスタマイズは可能です。しかし複数の値を通知したいなどあればFullfillmentと呼ばれる1から開発する方法を取るしか無いようです。

Google Tag Manger の設定

GTMの使い方の詳細は割愛しますが、簡単に言うと「指定した条件に合致するページに、解析ツールのJavaScriptなどの"タグ"を埋め込むことができるツール」です。この発火条件のことをトリガーといいます。主にECサイトのカートシステムを導入しているサイトや Google Adwards などの広告系のタグをまとめて管理することが多いと思います。Google Analytics は単体でもサイトに埋め込むコードを取得できますが、GTMでまとめて管理する人もいるようです。

GTMのタグとトリガーを作成

ここでは決済用のページ（https://your-website.com/payment）の閲覧をトリガー（発火条件）とし、StripeのJavaScriptコードのタグが埋め込まれるように設定します。

まずはタグを作成し、タグの種類を「カスタムHTML」に。先程カスタマイズしたStripeのJavaScriptコードを貼り付けましょう。

トリガーは元々ある「All Pages（すべてのページで発火する）」を使ってもいいのですが、なるべくサイトを軽くしたいし不具合を防ぎたいので決済ページの閲覧のみで発火する「Payment Page」トリガーを作成します。

STUDIOにGTMを追加

STUDIOとGTMを紐付けます。公式のAppがあるのでここに「GTM-xxx」のIDを入力してください。

GTMタグ公開

これで準備OKなのでGTMの「公開」ボタンで公開しましょう。GTMにはプレビュー機能もあるので、影響が気になる方やバージョン履歴をキレイに管理したい方はプレビューで確認してから公開してください。

STUDIOにもキャッシュが効いているので、GTMの公開後に一度「Command+Shift+R」でスーパーリロードするとタグが反映されてるはずです。ブラウザの検証機能などでソースをみてgtmと検索してみましょう。

ちなみにGTMで埋め込んだJavaScriptそのものはソースには出てきません。あくまでタグを読み込むscriptが書かれているだけです。

これでSTUDIOのサイトでStripe決済をしてもらう準備ができました。

決済をテストする

Stripeの設定でテストデータとして商品やコードスニペットを作成しました。これであれば424242のダミークレジットカードが使えるのでこちらで試してみてください。日付は未来の日付、CVCは3桁の数字であれば何でもいいです。

https://stripe.com/docs/testing

本番環境

テストが問題なければ本番環境で運用するためにテストモードをオフにします。GTMに埋め込んだJavaScriptのAPIキー（pk_xxxx）や商品の API ID (price_xxx)も変わってしまうのでGTMで書き換えねばならないことに注意してください。本番環境のキーにGTMを変更して公開すれば顧客に決済をしてもらえるはずです。