【Bubble】Stripe２大プラグイン使ってみた
Bubbleで決済機能を実装するには、Stripeプラグインをよく利用します。
複数種類ありますが、ダウンロード数が多いのが以下２つ。
・Stripe
・Stripe.js 2
これらの使用感、使い分けを、僕が把握できた範囲で紹介します。
Stripeとは？
プラグインを使いこなすには、まずStripeの仕組みを理解する必要があります。
この記事がとても分かりやすかったです。
まずStripeで自分のアカウントを作り、プラグインへ連結します。
そしてStripe上のダッシュボードで顧客情報やカード情報、取引履歴を管理できるので
Bubbleのワークフローやデータベースを組み合わせて仕組みを構築します。
--
また、決済方法がいくつもあるので、これらの用語をざっくり理解しておくと楽です。
APIも種類が豊富なので、上手く使い分けられるようになるでしょう。
・Charges APIしか対応していない支払い方法（AlipayやWeChat Payなど）を実装する場合は、Charges API。
・Payment Intents APIしか対応していない支払い方法（Apple Pay、Google Payなど）を実装する場合は、Payment Intents API。
・尚、これらはCharges APIを使っても実装可能かもしれませんが、StripeのドキュメントではPayment Intents APIを使ったものしかありませんでした。
・どちらも対応しているものは、Payment Intents API。
CHARGES API PAYMENT
カード決済の簡単な導入を希望する主に米国/カナダの顧客を持つ企業に推奨
INTENTS API
複数の支払い方法と認証を必要とする企業に必要 （例：ヨーロッパでの強力な顧客認証のため）
最も基本的となる、１度きりの支払いはCharges。
複雑な支払い方法はPayment Intentsで実現できるようです。
僕は今回Chargesで問題なかったので、あまり深く調べていませんが笑
--
アカウントタイプも数種類あるので、把握しておくと良いでしょう。
基本は無料のStandardで問題ないのかなという印象です。
1. Standard
2. Express
3. Custom
Standard は、決済に関係する部分は、ほぼStripe にお任せする変わりに 、販売者自身でStripe に接続アカウントを作成してもらうように促す必要があります。
Express と Custom は有料になりますが、プラットフォーム側で支払いについてカスタマイズが可能です。特に Custom は、顧客に Stripeブランドを完全に見せることなくデザインできますが、すべてをカスタマイズできる反面、導入までに開発工数がかかるといったデメリットもあります。
Bubble公式プラグイン「Stripe」
DL数が飛び抜けて多いのが、Bubble公式プラグインです。
単純な決済の場合、1つのワークフローで実装することができます。
使い方は公式リファレンス内に掲載されています。
また、YouTubeに動画がいくつか上がっていますし
ノーコードラボさんも日本語で丁寧に解説してくれています。
ユーザー間の支払いや、サブスクリプションにも対応しています。
実現幅が広い「Stripe.js 2」
現在２番目のDL数なのが、Stripe.js 2です。
こちらは公式プラグインより細かい単位でワークフローを設定します。
これにより、公式プラグインよりも複雑な設定が可能です。
ただし大変なのは、このプラグイン提供元がドキュメントを用意していないことです。
エレメント内の詳細書きや、Stripeドキュメントから理解してねって感じです。
また、提供元のCopilotホームページにて、有料のコースを受講したり、直接教えてもらうことができます。
僕は最初こちらを使おうと、自力で詳細書きやStripeドキュメントを読みあさっていましたが、諦めましたw
もし複雑な機能を実装したい時は、また挑戦してみます。
両者の使い分け
僕は今回「決まった金額をカードで運営へ支払う」という最も単純なフローで利用したかったので、公式プラグインを利用しました。
日本語の情報もあるので、まずこちらを使ってみてください。
その上で物足りなさを感じたら、後者のコースを探して受講したり、直接聞いてみると良さそうです。（ただし全て英語です）
評価をしている人も多いので、きっと良い解決策を提案してくれるのだと思います。
この記事が気に入ったらサポートをしてみませんか？