Stripeを利用する場合、もっとも単純な方法は”checkout.js”を利用する方法です。
“PHPからStripeを利用する〜もっとも単純な課金処理の実装〜“では、最低限のパラメータのみ指定しましたが、他にも沢山のパラメータがあり、用途に合わせた表示を行う事が可能です。
例えば、カード情報の取得と同時に決済を行う動作であったり、会員登録後別途カード情報のみ取得する仕組みのように柔軟な設定が可能です。
今回は”checkout.js”のパラメータと、用途に応じた設定について紹介します。
“checkout.js”に指定可能な主なパラメータ
指定できるパラメータは非常に多く全ての説明はできませんので、ここでは比較的利用される可能性が高いと思われるもののみ触れたいと思います。
| パラメーター名 | 必須 | 内容 | 設定例 |
|---|---|---|---|
| data-key | 必須 | PublishableKeyを設定します。 PublishableKeyはダッシュボード内の"API"メニューから確認する事ができます。 | data-key="pk_test_Xf6Op1Nxr9V7ediBcJx6bNWD" |
| data-image | オプション | クレジットカード情報入力フォームの上部に表示されるアイコンを設定。 リソースへのURLまたは相対パスを設定する。 | data-image="/sample-02/shoplogo.png" |
| data-name | オプション | クレジットカード情報入力フォームの上部に表示するショップ名やサイト名を設定します。 | data-name="サンプルショップ" |
| data-description | オプション | クレジットカード情報入力フォームの"data-name"の下に表示される説明文を設定します。 全角17文字以上の場合、それ以降は省略されるようです。 | data-description="サービス購入代金のお支払い" |
| data-amount | オプション | 課金額を設定します。 課金時に使用する通貨の設定は"data-currency"にて行います。 | data-amount="250" |
| data-locale | オプション | 使用する言語を設定します。 未設定の場合"English (en)"となります。 | data-locale="ja" |
| data-currency | オプション | 使用する通貨を設定します。 未設定の場合"USD"が設定されます。 日本円での決済を行う場合"JPY"を設定します。 | data-currency="JPY" |
| data-panel-label | オプション | クレジットカード情報入力フォームに表示される決定ボタンに表示する名称を設定します。 未設定時の表示内容は言語の設定（data-locale）により異なります。 なお、表示内容に金額を含めたい場合は"{{amount}}"を指定する事でその部分にdata-amountで設定した金額が表示されます。 | data-panel-label="{{amount}}を支払う" |
| data-email | オプション | 決済時に入力が必要となるメールアドレスを予め指定（設定）する事ができます。 | data-email="erorr@example.com" |
| data-label | オプション | クレジットカード情報入力フォームを呼び出すボタン上の文字列を設定します。 未設定の場合"pay with card"と表示されます。 | data-label="購入する" |
| data-allow-remember-me | オプション | 決済情報の保存機能を利用するかどうかを設定します。 利用する場合、クレジットカード情報入力フォーム上に決済情報の保存の可否を選択するチェックボックスが表示されます。 利用しない場合は"false"を指定します。 なお、この手続きで保存される情報はあくまでもStripeとして保存する手続きです。その為、ここで決済情報が保存されてもその情報を利用する事はできません。 | data-allow-remember-me="false" |
ケース別のカスタマイズ例
以下はそれぞれのケースに応じた設定例です。
例1）都度課金を行うケース
最も利用が想定されるケースです。
最低限”data-locale”、”data-currency”、”data-amount”、”data-label”、”data-panel-label”の指定は行った方がよいでしょう。
その他、支払内容がわかるように”data-name”または”data-description”に支払い内容や説明を記載する方が良いと思います。
その他、”data-allow-remember-me”についてはどちらでも良いのですが、離脱を想定すると”false”にしてもよいかと思います。
上記の実際の実装結果（動作）を確認する場合はコチラから確認できます
※このサンプルは実行後、元のURLにリダイレクトされます
例2）定期課金を行う為にクレジットカード情報（トークン）を取得するケース
例1とは異なり、こちらは請求そのものは別途行う為、その際に利用するトークン情報を取得する為のカード登録をのみを行うケースです。
例1で設定した”data-currency”、”data-amount”は不要ですので設定していません。
一方で、登録されるカード情報がどのユーザーの情報であるか紐付ける必要がありますので、その為にメールアドレスを”data-email”に設定しています。
上記の実際の実装結果（動作）を確認する場合はコチラから確認できます
※このサンプルは実行後、元のURLにリダイレクトされます
思いの他いろいろなオプションが指定できるので、用途に応じて柔軟な構成で利用できると思います。