Stripe Checkoutで決済ボタンを作成してみた

寄付・・・は日本ではいろいろ制約ありますが、簡単な決済ボタンが欲しくなる時ってまれによくありますよね。 Stripeでいい方法ないかなーと調べてたところ「Stripe Checkout」がかなり手軽な感じだったので、ちょ […]

寄付・・・は日本ではいろいろ制約ありますが、簡単な決済ボタンが欲しくなる時ってまれによくありますよね。

Stripeでいい方法ないかなーと調べてたところ「Stripe Checkout」がかなり手軽な感じだったので、ちょっと触ってみました。

Stripe Checkoutのいいところ

１行さわればテストと本番を切り替えできる

決済システムの悩みどころとして、本番とテスト環境の切り分けが挙がると思います。
本番で使用する環境ではテスト用のカードで決済させたくないですし、かといってテスト環境で実際にカード決済するのはキャンセル処理するにしても面倒。

Stripeならばテスト環境・本番環境でそれぞれ専用のキーが発行されるので、この辺りの変更がかなり簡単です。

data属性を書き換えるだけで作れる

ドキュメントのコードを見るとわかるかなと思いますが、data-属性にほとんどの設定が記載されています。

ですのでJavaScriptの知識に自信がなくとも、HTMLファイルを触っているような感覚で決済ボタンを実装することができます。

    <form action="/test.html" method="POST">
    <script
      src="https://checkout.stripe.com/checkout.js"
      class="stripe-button"
      data-key="pk_test_XXXXXXXXX"
      data-amount="2000"
      data-name="Stripe.com"
      data-description="2 widgets"
      data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
      data-locale="auto"
      data-zip-code="true">
    </script>
    </form>

細かいカスタマイズも可能

上記のように属性だけで設定をする場合、「カスタマイズがやりにくいのではないか」という懸念を持つ人もいるかなと思います。
ですがStripeでは、そういった人のためにJavaScriptで設定する方法も用意されています。

From:https://stripe.com/docs/checkout#integration-custom

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

<button id="customButton">Purchase</button>

<script>
var handler = StripeCheckout.configure({
  key: 'pk_test_XXXXXXXXXXXX',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'api-test',
    description: '2 widgets',
    amount: 2000
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

簡単設定・詳細設定どちらも選べるので、とても手軽に使えそうです。

使ってみる

ということで実際に使ってみましょう。

Stripe管理画面にログインする

まずは管理画面にログインしましょう。

https://dashboard.stripe.com

Stripeのドキュメントに記載されているコードは、自分の環境のテストモードで使用できる状態で表示されていますので、ログインしてからドキュメントを見ることをおすすめします。

デモコードを取得

以下のページに移動して、デモコードを取得します。
https://stripe.com/docs/checkout#integration-simple

Stripeにログインしている状態であれば、このコードのdata-keyに自分のテスト環境用のものが自動で設定されています。

HTMLに貼り付ける

先ほどコピーしたデモコードをHTMLに貼り付けましょう。

簡単なHTMLだと以下のようになるはずです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Stripe Checkout Test</title>
  </head>
  <body>
    <form action="/test.html" method="POST">
    <script
      src="https://checkout.stripe.com/checkout.js"
      class="stripe-button"
      data-key="pk_test_XXXXXXXXX"
      data-amount="2000"
      data-name="Stripe.com"
      data-description="2 widgets"
      data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
      data-locale="auto"
      data-zip-code="true">
    </script>
    </form>
  </body>
</html>

動作確認

このHTMLファイルにアクセスすると、もう決済ボタンが表示されています。

決済ボタンをクリックすると、下の画像のように入力フォームが表示されます。

設定を変更する

ここまでで簡単にセットアップできることはわかりました。
しかしこのままでは通貨単位がUSDだったり説明文がテスト用のままなので本番には使えません。

ということでdata属性を入力してカスタマイズしていきましょう。

属性をすべて紹介するのはちょっと大変そうでしたので、ざっとみてよく使いそうなものを突っ込んだサンプルを用意してみました。

    <script
      src="https://checkout.stripe.com/checkout.js" // 変更しない
      class="stripe-button"                         // 変更しない
      data-key="pk_test_XXXXXXXXX"                  // 変更しない
      data-currency="JPY"                           // 通貨単位（日本円はJPY）
      data-locale="ja"                              // 地域設定（日本はja）
      data-amount="2000"                            // 価格
      data-name="チケットを購入する"                   // フォーム名
      data-description="2/31のイベント前売り券です"     // フォーム説明文
      data-image="./image/marketplace.png"          // フォーム画像
      data-panelLabel="チケット１枚"                   // 購入ボタンに表示するテキスト
      data-shippingAddress="true"                   // 住所入力フォームを表示するか？（trueで表示。デフォルトはfalse）
      data-zip-code="true"                          // 郵便番号入力フォームを表示するか？（trueで表示。デフォルトはfalse）
>

埋め込むと以下のように表示が切り替わります。

すべての属性が気になる方は、https://stripe.com/docs/checkout#integration-simple-optionsをみてください。

本番環境に切り替える

アカウントを有効化する

テスト環境では、テスト用として用意されているクレジットカード番号以外での決済が許可されていません。
実際に本番環境で使用するには、決済者情報などを登録してアカウントを有効化する必要があります。
https://dashboard.stripe.com/account/details

アカウントの有効化が完了している状態であれば、以下のように[View Test Data]のトグルボタンをオフにすることができます。

APIキーの取得

https://dashboard.stripe.com/account/apikeysからAPIキーを取得します。

「Publishable」と書かれた方のキー（pk_liveで始まるキー）を控えておきましょう。
HTMLファイル内に表示されてしまいますので、絶対に「Secret」のキーは使用しないでください。

Checkout コードの`data-key`を書き換える

先ほどHTMLにコピー＆ペーストしたコード内にあるdata-key="pk_test_XXXXXXXXX"の値を控えておいたAPIキーの値に変更しましょう。

動作確認

更新したHTMLファイルにアクセスすると、テスト用カードでの決済が弾かれるようになっていることが確認できます。

これで本番環境での利用準備ができました。

まとめ

Stripe Checkoutを使うと、簡単に決済ボタンを自分のサイトへ追加することができます。
Stripeの特徴であるSubscriptionなどには対応していませんが、イベントチケットの販売のような１回きりの決済機能が欲しくなった場合などに非常に便利です。