Stripe Payment Elementを試してみる

この記事はStripe Advent Calendar2021の19日目のエントリーです。 StripeからPayment Elementというものが出ていたので試してみました。

サンプルアプリのダウンロード

Stripe Document「オンライン支払い」の「クイックスタート」ページを開くと、各言語ごとのサンプルアプリ一式がダウンロードできます。

プラットフォーム・フロントエンド・バックエンドの言語・環境を選択でき、それぞれのサンプルコードが右側に表示されますし、「アプリ全体のダウンロード」ボタンで選択中の環境のコード一式がダウンロードされます(ドキュメントとサンプルがとても使いやすく助かる)。

私はプラットフォーム「Web」、フロントエンド「HTML」、バックエンド「PHP」でダウンロードして、zipファイル内に含まれるREADME.mdの手順に実行するととても簡単にPayment Elementを試すことができます。

今までのStripe Elementを利用している場合、支払い方法に応じてElementを準備する必要がありましたが、Payment Elementを利用すると、通貨(国)に応じて対応する支払い方法UIが自動で構築されます。

バックエンドは以下のようにPaymentIntentで設定します。

automatic_payment_methodsを有効にすると自動的に対応する支払い方法が追加されます。支払い方法を限定的にしたい場合は、payment_method_typesで指定します。

作成したPaymentIntentのclient_secretをJSライブラリ側に渡すことで、Payment Elementが生成できます。

ちなみに上のサンプルでも指定していますが、appearance設定でUIスタイルを変更できます。ざっくりテーマで切り替えることもできたり、とても細かくスタイルを上書きできたりします。上の例ではテーマを適用しています。

ただでさえStripeは少ない手数で構築できますが、Stripeが対応する支払い方法が増える中開発側の負荷が上がるためのStripeとしての配慮なのかなと感じました。

Stripeとしても間違って構築されるリスクより、一貫した仕組みを提供できたほうがリクスを小さくできるというメリットもありそうです。