🐩

stripeの決済処理の方法をパターン別にまとめ(合計3パターン)

2024/01/15に公開

はじめに

案件で、stripeの実装をすることになり、stripeの実装方法について色々と調べることになったので、備忘的な感じで投稿することにしました。

stripeのドキュメント結構ボリュームあって、見るのに結構苦労したので、この記事参考にしていただけると幸いです。

stripeドメイン内のURLで決済をします。
開発してるアプリケーションから、stripeドメインの決済ページに飛ばして、あとはstripeに任せてしまうという楽なやり方です。

今回こちらの実装方法を採用しなかったので、具体的な実装方法は触れませんが、以下のドキュメントを見ればわかるかと思います。

Wordpressのショートコード的なノリで、決まったコードを貼ったら表示されるようなやり方です。

デザインはダッシュボードで色などを変えられるくらいで、基本は以下のUI。カスタマイズ性が低いようです。

フロントエンドのみの実装もいけるが、その場合制限が多いです。公式的にも非推奨です。

その他の特徴
後述のElementsより実装が楽ですが、決済処理後、画面遷移してしまいます。
決済処理後のstripeからのレスポンスによって、色々処理を分けるのは多分できません。

自由度ないけど開発してるアプリケーションのドメイン内のページに決済機能をつけられればいいだけならこれかなと思います。

一番実装コストがかかりますが、自由度が高く作成することができます。
好きな場所に表示できたり、CSSを一部変えることができたり、その他決済方法？なども自由度高いようです。

実装方法はこちら。フロントの人はNext.jsの例を見ればわかりやすいと思います。(カスタム支払いフローってやつ)

バックエンドの実装が必須です。(シークレットキーが必要なので。)
バックエンドの方では、stripe.paymentIntents.createという関数を使って、clientSecretというものを作る必要があります。これがないと、フロント側の決済処理を実装できません。

以下がstripe.paymentIntents.createのドキュメント。引数に顧客情報や金額を設定して、決済処理を行うことができます。

フロント・バックエンドの実装の流れ
以下で実装するのが一般的なようです。

制限付きのキーか、シークレットキーを作って、ダッシュボードに登録した商品を取得する。
制限付きのキーとは、どこにどの権限でアクセスできるかを決めて作れるキー。例えば、Productsに読み取り権限でアクセスすることができるキーなどが作れる。

FEはこの制限付きのキーを使えば良い。

こういったドキュメント、少し読めるようになった気がしています←