コンテンツにスキップ

MonstarX のアプリに Stripe を接続する

要点Stripe を接続すると、アプリで本物の決済を受け付けられます。Stripe のキーを「バックエンド」→「クラウド」(またはチャットに表示されるカード)に貼り付けます。試している間は「サンドボックス(テストキー)」、実際のお客様が支払うときは「本番(ライブキー)」を選びます。決済画面は MonstarX が作ります。

アプリでカード決済、サブスクリプション、チェックアウトを受け付けます。

種類
アプリ用
カテゴリ
決済と請求
接続方法
API キー

Stripe は決済サービスです。カードの入力画面、銀行とのやり取り、領収書を引き受け、売上をあなたの銀行口座に振り込みます。接続すると、Stripe が運営する安全な決済ページで、アプリから回数券、商品、月額会員などを販売できます。

  • 「今すぐ購入」ボタン:Stripe の決済ページを開き、支払いが終わるとアプリに戻ります。
  • 回数券やセット販売:「5回券 90ドル」のように、支払い後にアプリ内の何かが使えるようになります。
  • 月額・年額のサブスクリプション:会員向けや有料プラン向けに。
  • 注文履歴:お客様ごとの履歴と、支払いを一覧できる管理ページ。
  • 自動の後処理:Stripe が支払いを確認したら、注文を支払い済みにして領収書をメールで送るなど。
  • Stripe のアカウントが必要です。作成は無料で、Stripe は成功した支払いごとに手数料を受け取ります(Stripe の料金 をご覧ください)。MonstarX が上乗せする料金はありません。
  • テストだけなら、ほかに必要なものはありません。どの Stripe アカウントでもサンドボックス(本物のお金が動かない、練習用のアカウントのコピー)を使えます。
  • 本物の決済を受け付けるには、先に Stripe でアカウントを有効化します。事業の情報と、入金先の銀行口座を登録します。

Stripe には 2組のキーがあり、どちらを貼り付けるのかを MonstarX の 環境 で選びます。

環境キーの始まりどうなるか
サンドボックス(テストキー)sk_test_… と pk_test_…テストカード番号で支払いの練習をします。本物のカードに請求されることはなく、お金も動きません。作っている間はこちらを使います。
本番(ライブキー)sk_live_… と pk_live_…本物のカードで本物のお金が動き、銀行口座に振り込まれます。実際のお客様が支払うときに使います。

一方で作ったものは、もう一方には存在しません。サンドボックスで作った商品、価格、顧客、支払いは、サンドボックスの中だけに残ります。

サンドボックスでは、Stripe の決済ページが Stripe の公開しているテストカードを受け付けます。有効期限は未来の日付(12/34 など)、CVC は任意の 3桁、郵便番号も任意で構いません。

カード番号結果
4242 4242 4242 4242支払いが成功します。
4000 0000 0000 0002カードが拒否されます。支払いに失敗したときにお客様に何が表示されるかを確認できます。
4000 0025 0000 3155支払いの前に、銀行が追加の本人確認(3D セキュア)を求めます。

サンドボックスの決済ページに本物のカード番号を入力しないでください。そのほかのテストカードは Stripe のテストガイド に載っています。

  1. Stripe ダッシュボード にサインインします。

  2. テストするときは、左上のアカウントメニューからサンドボックスを開きます。本番にするときは、代わりに本番環境に切り替えます。

  3. Developers(開発者)の下にある API keys を開きます。Publishable key(公開可能キー)をコピーし、Secret key(シークレットキー)を表示してコピーします。

決済を頼むと、たいていチャットに同じ入力欄のある Stripe を接続 カードが表示されます。自分で接続することもできます。

  1. プロジェクトを開き、上部バーの バックエンド をクリックしてから クラウド を開きます。

  2. コネクタ の Stripe の横にある 接続する をクリックします。

  3. 環境 で サンドボックス(テストキー) か 本番(ライブキー) を選びます。

  4. シークレットキー と 公開可能キー を貼り付けます。Webhook 署名シークレット は今は空欄のままにします。

  5. Stripe を接続 をクリックします。行に 接続済み · サンドボックス(または 接続済み · 本番)と表示され、キーを読み込んでプレビューが再起動します。

MonstarX は、キーと選んだ環境が合っているかどうかを確認しません。sk_test_ のキーは サンドボックス に、sk_live_ のキーは 本番 に入れるよう気をつけてください。

Webhook 署名シークレットは必要ですか?

Section titled “Webhook 署名シークレットは必要ですか?”

Webhook は、お客様が支払い後にアプリへ戻る前にページを閉じてしまっても、Stripe がアプリに「この支払いは完了しました」と知らせるしくみです。支払い後に何かを使えるようにするアプリや、サブスクリプションを扱うアプリには設定をおすすめします。Stripe は非公開のプレビューにはアクセスできないので、アプリを公開してから追加します。

  1. MonstarX に「Stripe の Webhook のアドレスと、受け取るべきイベントを教えて」と聞きます。アドレスはたいてい https://your-app.monstarx.app/api/stripe-webhook です。

  2. Stripe で Webhooks を開き、Create an event destination(イベントの送信先を作成)をクリックし、そのイベントを選んで Webhook endpoint を選び、アドレスを貼り付けます。

  3. signing secret(署名シークレット、whsec_ で始まります)を表示してコピーします。

  4. MonstarX で Stripe の行の キーを更新 をクリックし、Webhook 署名シークレット に貼り付けて キーを保存 をクリックします。公開中のアプリにも反映されるよう、もう一度公開します。

サンドボックスと本番環境には、それぞれ別の Webhook と署名シークレットがあります。

入力する内容どうなるか
「会員が Stripe で 5回券を 90ドルで買えるようにして」購入ボタン、その金額の Stripe 決済ページ、お礼のページができ、支払い後に回数券が追加されます。
「Stripe で月額 12ドルの Pro プランと、自分のプランを確認できるページを追加して」サブスクリプションの決済ページと、会員のプランを表示するページができます。
「すべての支払いを一覧できる管理ページを追加して」誰が、何に、いつ支払ったかがわかる支払い一覧のページができます。
「Stripe の商品をショップに取り込んで」アカウントを読むにはキーが必要なので、カードに 続けるには Stripe が必要です と表示されます。接続すると、MonstarX が自動で作業を続けます。

キーがまだない場合は、カードの 後で をクリックしてください。MonstarX は決済の仕組みをすべて作り、キーを追加するまでボタンには Stripe が未接続であることが表示されます。

  1. Stripe のアカウントを有効化し、本番環境に切り替えてライブキーをコピーします。

  2. バックエンドクラウド で、Stripe の行の キーを更新 をクリックします。

  3. 環境 を 本番(ライブキー) にし、ライブキーを 2つ(使う場合は本番用の Webhook 署名シークレットも)貼り付けて キーを保存 をクリックします。

  4. アプリをもう一度公開します。これ以降の支払いは本物です。

  • キーはこのアプリ専用に暗号化して保存されます。名前は バックエンドシークレット に表示されますが、値が再び表示されることはありません。
  • シークレットキー と Webhook 署名シークレット は、アプリのサーバーだけが使います。公開可能キー はブラウザに表示される前提のキーなので、見えても問題ありません。
  • カード番号は Stripe の決済ページに入力されます。アプリや MonstarX に届くことはありません。
  • Stripe を接続、更新、接続解除できるのはプロジェクトのオーナーだけです。接続を解除 するとこのアプリからキーが削除され、決済ページには Stripe が未接続であることが表示されます。
  • キーが漏れた場合は、Stripe ダッシュボードでキーをロール(再発行)し、キーを更新 で新しいキーを貼り付けてください。
  • 1つのアプリで使える Stripe の環境は一度に 1つです。公開中のアプリをサンドボックスのキーに戻すと、再び切り替えるまで本物の決済は止まります。
  • Stripe には、選んだ権限だけを持つ制限付きキー(rk_…)もあります。決済セッションの作成など、アプリが行うすべての操作が許可されていれば、シークレットキー 欄で使えます。
  • QA テスト は、決済の流れを Stripe の手前までテストし、Stripe が未接続の間は「キーが必要」と記録します。
MonstarX は売上の一部を受け取りますか?

いいえ。支払いはあなたの Stripe アカウントに直接入ります。かかるのは Stripe の手数料だけです。

本物のカードなしで決済を試せますか?

はい。サンドボックス(テストキー) で接続し、テストカード 4242 4242 4242 4242、未来の日付、任意の CVC で支払ってください。お金は動きません。

テストから本物の決済に切り替えるには?

Stripe の行の キーを更新 をクリックし、環境 を 本番(ライブキー) にしてライブキーを貼り付け、キーを保存 をクリックしてから、もう一度公開します。

決済ページに Stripe が未接続と表示されるのはなぜですか?

キーがまだ入っていないか、削除されています。バックエンド → クラウド を開いて Stripe を接続すると、キーを読み込んでプレビューが再起動します。

MonstarX で支払いを確認できますか?

アプリには、注文ページなど MonstarX が作った画面が表示されます。すべての支払い、返金、入金の完全な記録は Stripe ダッシュボードにあります。