お仕事でStripeを使う機会があったのですが、公式ドキュメントを読んでも概要がわからなくて混乱したので、自分なりにまとめてみました。
実際の経験は少ないため、間違ってるよ！等あれば教えて下さい。Stripeの情報あまり少ないので、知見をためていきましょう、、、
注意
- この記事は2021/06/28時点での情報です。Stripeは進化が早そうなので、情報が古くなる可能性が大いにあります。ご注意ください。
- webサービス以外は考慮していません（スマホアプリ、対面決済等）
コード書かない方法
支払いリンクを送信する
個人的に、一番お手軽な方法。
これで良いじゃん！と思いますが、制限があります。
Payment links only support credit cards, debit cards, Apple Pay, and Google Pay.
You can’t use the API to create payment links.
Payment links don’t support tiered prices.
ドキュメントが英語しかないのですが、手元のDeepLで翻訳するとこうなりました。
決済リンクは、クレジットカード、デビットカード、Apple Pay、Google Payにのみ対応しています。
APIを使用して決済リンクを作成することはできません。
決済リンクは、階層化された価格には対応していません。
すっごい雑に、不特定多数のユーザーを対象に、ここから（サービスページや、SNS等でリンク貼るイメージ）支払ってね、みたいな運用で良ければ十分いける事が多そうです。
オンライン請求書を送信する
https://stripe.com/docs/invoicing/create
https://stripe.com/docs/invoicing/hosted
こちらは先に顧客を何かしらの方法で作って、その顧客に対して請求書（インボイス）を送ります。
なので、決済とは別で、既に顧客リストが手元にあって、その顧客への請求、支払いを効率化したい、みたいな時にフィットしそうです。
ちなみに、ドキュメントは請求（書）とinvoicingとインボイスがまざっていてカオスです。頑張るか、英語で読んだほうが良さそう。
定期支払（サブスクリプション）
プランと料金体系が複雑でない場合は、ダッシュボードから直接定期支払いを作成 できます。これによって、スケジュールを設定して (毎月など) で顧客に請求できます。Stripe では、コードを記述することなく、クレジットカード、デビットカードまたは銀行振込を使用して、毎回支払うことのできるインボイスがメールで送信されます。自動的に定期支払いを顧客に請求する前に顧客の支払い情報を収集する場合は、コードの記述が必要になります。
請求書と同じのりで、顧客に対してサブスクリプションの設定をすると、定期的にインボイス（つまり請求書）が送られるようです。
外部サービスとの連携方法
はい、プラグインまたはパートナーを介して連携できます。Stripe は、Shopify、Squarespace、Freshbooks などの 数千の大手プラットフォーム と提携しているため、コードを記述することなく、それらのサービスを利用できます。また、Stripe は、ほぼすべての E-コマースプラットフォームとも連携しているため、Web サイト内で Stripe を使用した支払いの受け付けを可能にするプラグインも提供しています。
色々あるみたいです。既に何らかのプラットフォームを使っている場合は、個別でどこまでできるか確認し、用途に合うようであれば採用できそうですね。
コード書く方法
まず、コードを書く方法として、CheckoutとElementの2種類が提供されています。
Checkoutは決済画面をStripeに任せる方法、Elementは決済画面を基本的に自分で作る方法です。
Checkout クライアントのみ
クライアント（ここではHTMLとjs）のみで完結できるので楽じゃん！と思いますが、色々制限があります。
また、ドキュメントの目次からリンクされていないページなので、非推奨な気がします（明記されてはいない）。
Checkout バックエンドも含む
構築済みの Checkout ページ というのがわかりにくいですが、Stripeが提供している決済画面、という事です。このCheckoutはライブラリじゃなくて、一般的な用語の決済、という意味だと思います。
書くべきコードはシンプルな上に、丁寧なコードサンプルもついています。バックエンドの言語も色々。
オプションは色々あるので、とりあえずサンプルコードを動かしてみて、足りない要素を追加する方法を調べるのが良さそうです。
Elementを使う
カスタムの支払いフローというのは、つまりElementを使うパターンです。
Elementがやってくれる範囲ですが、
- カード情報の入力フォームの提供
- iframe内に作ってセキュアに
- 決済処理の呼び出し
です。逆にいうと、カード情報以外の請求先住所等は自前でフォームを作成する必要がありますし、デザインもごりごりcssを当てる事になります。
おまけ
個人的見解です。
どの方法が良いの？？
- まずはコード書かないでできる方法を試してみる。それで行けそうならそれで
- ダメそうならコード書く方法を試してみる
Checkout or Element どっちを使う？
- できるだけ楽をしたい -> Checkout
- 見た目に超こだわりがある -> Element
- 画面遷移させたくない -> Element
ドキュメントを読むコツとか
- 日本語翻訳が追いついていなかったり、精度が怪しいので、英語で読んだほうが捗るかも
-
Checkoutがライブラリの方なのか、一般的な用語の決済をさすのか、注意深く読む - 素のHTMLとReactは公式でサポートされているけど、vueはプラグインサポートなので、vueなプロジェクトの場合は頑張って脳内翻訳しながら読む
- フレームワーク用のライブラリを使う場合でも、どの仕組みで動いてるかを理解しておくと、調べる時にドキュメントのどこを調べればよいのかわかるので便利