Checkout Form で遊んでみる #stripe

Stripe のお問い合わせを担当していると、Stripe ユーザさんからフォームの言語やフォームのフィールドに関するお問い合わせを、いただくことも多くなってまいりました。ありがたい限りです。
日本語にするにはどうしたらいいの？
逆に、それ以外の言語の時には、どうしているのだろうか？
フォームのXXの文言変えたいんだけど、できるんだっけ？
などなどフォームに関して質問をいただきます。

Stripe の Checkout Form はどのあたりを自分で変更できるんだろうか。そう思っている方がありがたいことにいらっしゃるので、
今回は、決済情報入力フォームを日本語にしたい場合やラベルの文言を修正するのに便利なパラメータを、いくつかご紹介したいと思います。

日本語のフォーム

data-locale="ja"


  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_MMvYzV41lrxHdYoVPk1wVpVZ"
    data-label="カードで支払う" 
    data-name="Toku Qiita デモ店"
    data-description="テスト商品 hogehoge"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="ja"
    data-currency="jpy"
    data-amount="1000">
  </script>

上のコードの挙動は⬇️のボタンから確認できます。
https://jsfiddle.net/ytoku/9yaj10gy/7/

日本語のフォームと通貨に合わせた記号で出てきていると思います。
では次に、もう一点。
フォーム内の「¥1000を支払う」という文言を変更したり、価格を可変にしたりすることもできます。

data-panel-label="{{amount}}のお支払い"


  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_MMvYzV41lrxHdYoVPk1wVpVZ"
    data-label="カードで支払う"
    data-name="Toku Qiita デモ店" 
    data-description="テスト商品 hogehoge" 
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="ja" 
    data-amount="1000"
    data-currency="jpy"
    data-panel-label="{{amount}}のお支払い">
  </script>

上のコードの挙動は⬇️のボタンから確かめられます。
https://jsfiddle.net/ytoku/9yaj10gy/12/

最終行に data-panel-label を持ってきました。また、{{amount}} で、data-amount の数字を引っ張ることができますのでフォームの中に金額を表示するよう変更しました。
なお、data-label は、ローカライズされていないので、カードで支払う、Purchase などなど自分で書く必要があります。

少々パラメータについて補足をしたいと思います

data-key: Publishable Key を入れます
data-label: チェックアウトフォームを呼び出すボタンに表示されるテキストです
data-name: フォームの上に表示されるテキストです
data-description: data-name の下に、小さく表示されます
data-image: フォーム内に表示されるアイコンです
data-locale: 言語を指定します（下記に詳細があります）
data-amount: 価格を入れます
data-currency: 表示される通貨を3文字で入力します
data-panel-label: フォーム内のボタンに表示されるテキストです

詳しくはStripeのドキュメントをご覧ください（英語で申し訳ないです）: https://stripe.com/docs/checkout

他の言語にしてみる

Checkout のフォームは、以下の12言語に対応していますが、
全部に合わせるのは面倒くさいという場合 data-locale を auto と指定が出来ます。

その場合は、ユーザのブラウザ規定言語が呼び出されますが、以下の 12 言語にない場合は、英語 en がデフォルトとなります。

da - デンマーク語
de - ドイツ語
en - 英語
es - スペイン語
it - イタリア語
ja - 日本語
fi - フィンランド語
fr - フランス語
nl - オランダ語
no - ノルウェイ語
sv - スウェーデン語
zh - 簡体字

それでは "10USドル" を表示するフォームのサンプルを書いてみます。

data-locale="auto"


<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="pk_test_MMvYzV41lrxHdYoVPk1wVpVZ"
  data-amount="1000"
  data-currency="usd"
  data-name="Toku Qiita Demo"
  data-description="Test Product hogehoge"
  data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
  data-locale="auto"
  data-zip-code="true">
</script>

data-locale="auto" としました。
お店の名前data-name や商品名data-descriptionは英語表記にしてみました。
また、data-label フィールドは自動で変換されませんので、今回は指定せずデフォルトの Pay with Card （英語表記）としております。

加えまして、アメリカのクレジットカードなどは、不正利用の対策で郵便番号を入力してもらうことが一般的です。
data-zip-code="true"と指定しています。
フォームで 4242 4242 4242 4242 とテストカード番号を入力して、試してみてください。
そうすると、Zip Code として入力項目が自動でカード番号を入力中に出てきます。これは多通貨決済時には不正対策にも有効で、オススメです。

ぜひ、ブラウザの設定言語を変えて、いろいろと試してみてください！
何かご不明なことがあれば、support-jp@stripe.com までご連絡ください。日本語でサポートしております。

参考URL

https://stripe.com/docs/checkout