経緯

今までは個人で運営しているスクールなどで発生する毎月の集金にはPaymoBizを利用していました。そんな中PaymoBizサービス終了が発表され、別の集金方法を模索することを余儀なくされてしまいました。「決済APIを利用するという方法が手数料安く済みそうだけど、自前でシステム作るしかないのか・・・手間がかかりそうだなぁ。。」などと思いながら詳しく調べていたところ、StripeではCheckoutという機能が提供されており、その機能を使うと自動生成されたコードを貼り付けるだけで決済機能が導入できるようでした。このシンプルさが自分にはドンピシャだったのですぐに試してみました。

所感

試してみて複雑にデータを管理しなければならないものでなければCheckoutで十分だと感じました。またStripeはただオンライン決済のAPIを提供しているだけの印象でしたが実はそうではなく、ダッシュボードが充実していたりサードパーティ製の決済アプリのマーケトットプレイスとしての側面も持ち合わせていていわゆる「プラットフォーム」という方がしっくりきました。書いた後気付いたのですがPAY.JPが同様の機能を提供していてかつ手数料も1%ほど安いです。

Stripe Checkoutの導入手順メモ

公式ドキュメント

できること

  • WEBページにJSのスクリプトを貼り付けることで、サーバー側の処理を実装することなく決済機能を導入できます
  • 月額課金にも対応しています
  • カスタマイズ次第で顧客データの収集なども可能

仕様について

  • 実際に使用する際はテストモードと本番モードを切り替える必要があります。最初はテストモードで挙動を確認しておくことをお勧めします。
  • 決済成功時・失敗時の遷移先を用意しておく必要があります。
  • サイトはhttps化されている必要があります
  • 手数料は一律3.6%(同じく決済APIを提供しているBASE社のPAY.JPは2.6%でした。こちらでも良いかもしれない)

1. アカウントの有効化

導かれるまま本人情報などを入力すればおkです。

2. Checkoutの設定

公式ドキュメント、Checkout Client Quickstartを参考に導入します。主にやることは以下の二つです。

  • ドメインの設定
  • 商品の作成とCheckoutの有効化

3. LIVEモードに切り替え

Going Live with Checkoutを参考にLIVEモードでチェックアウトできるように設定します。本番モードで稼働する際はドメインが設定されていないとボタンを押しても正しく動作しないので注意。

4. コードの貼り付けとカスタマイズ

上のボタンを押すとクレジットカード情報の入力フォームにリダイレクトされるはずです。中身のコードは以下に掲載しています。見た目や顧客データの処理についてのカスタマイズも可能です。詳しくは公式ドキュメントを参照してください。

<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-plan_FIfczSYPCPZLe1"
  role="link"
>
  テスト 
</button>

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

<script>
    // 本番はLIVEモードのAPIキーを入力してください
  var stripe = Stripe('pk_test_IYYRFH7Xe3g9nygvZkfKsT4I006VEBDP5U');

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

      // 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: window.location.protocol + '//success',
      cancelUrl: window.location.protocol + '//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>

まとめ

ダッシュボードのUIが非常にわかりやすかったおかげで特に詰まることなく導入できてしまいました。。。労力で考えると自前で用意するのとCheckoutを使うのでは雲泥の差だったと思うので非常に助かりました!!