BacodoBACODO

React Native アドオン

React Native の Stripe 統合

ネイティブ カード フォーム、3-D セキュア、秘密キーの間違いを最初から構築することなく、既存の React Native アプリに @ストライプ/ストライプ-反応ネイティブ ペイメント シートを追加します。 React Native は Webhook をホストしませんが、API はホストします。

  • 完全なソースコードが含まれており、永久にあなたのものになります
  • アドオン ライセンス キーや定期ライセンスは必要ありません
  • 本番環境に対応し、テスト済み
  • 既存の React Native プロジェクトとスタックに統合
  • 引き渡し後30日間のテクニカルサポートが含まれます
  • オプションの 6 か月延長テクニカル サポート (アドオン価格の 20%)

〜から

$145

USD · React Native

デモを見る

React Native の Stripe 統合 · React Native

完全なソースコードライセンスキーがありません本番環境に対応テスト済みの統合30日間のサポート

Requirements

What React Native の Stripe 統合 needs

  • 既存の React Native プロジェクト
  • Stripe Test Mode アクセス
  • 安全な決済にはバックエンドが必要です

リポジトリ権限は不要です。Bacodo に直接組み込んでほしい場合のみ、一時的なプロジェクト権限が必要です。

できること

React Native アプリの支払いシート — API は引き続きシークレットを所有します

Bacodo は、Stripe を既存の React Native プロジェクト (Expo またはベア) に統合します。ハンドオーバー後、React Native ソースはリポジトリ内に存在します。秘密キーと Webhook は、すでに実行されているバックエンドに残ります。お客様は引き続き Stripe アカウントと Stripe 料金を所有しています。

解決する問題

React Native アプリは、PaymentIntent を安全に作成したり、Webhook を検証したりすることができません。支払いシートとクライアント シークレットを返すバックエンドが必要です。間違って分割したビルドでは、秘密キーがバイナリで配布されます。

プロジェクトに落とし込むまでの経緯

@ストライプ/ストライプ-react-native を追加し、既存の React Native チェックアウト アクションから支払いシートを提示し、PaymentIntents に API がすでに必要としているフェッチ呼び出しを配線します。 Webhook 検証は React Native 内ではなく、その API 上で行われます。

開発時間を節約できる理由

あなたのチームは、最初の本番環境の Stripe React Native 実装 (支払いシート、SCA、ネイティブ構成、およびアプリが API と通信する方法を文書化するハンドオーバー) をスキップします。

誰のためのものなのか

すでに React Native iOS/Android アプリと API を持っており、Flutter でアプリを書き換えることなく保守可能な Stripe パスを必要としている開発者および代理店。

主な機能

React Native の Stripe 統合に含まれるもの

React Native の支払いシート

React Native の支払いアクションから @ストライプ/ストライプ-react-native を含む Stripe 支払いシートを提示します。カード データは Stripe 上に残ります。React Native 状態を維持するのではありません。

React Native はクライアント シークレットを取得します (秘密キーは取得しません)

React Native アプリは、API からの公開可能なキーと有効期間の短いクライアント シークレットのみを使用します。 React Native 用の Stripe Integration は、JS バンドルまたはネイティブ バイナリに STRIPE_SECRET_KEY を配置しません。

React Native の Apple Pay と Google Pay

Stripe アカウント、Apple 販売者 ID、Google Pay の設定でウォレットが許可されている場合は、ペイメント シートでウォレットを有効にします。 React Native フォールバックはカード支払いシートに残ります。

React Native テスト モードとライブ公開可能キー

まず、Stripe テスト公開可能キーを使用して React Native アプリを出荷します。ライブ カットオーバーは、文書化された環境/フレーバーの変更と、API 上の一致するライブ シークレットです。

フルフィルメントは React Native の成功画面ではありません

React Native の感謝の画面は真実の情報源ではありません。 API が Stripe Webhook を検証し、React Native アプリがその API から有料状態を読み取ります。

React Native エラーとキャンセル状態

React Native UI が顧客をデッドスクリーンのままにしないように、拒否されたカード、キャンセルされた支払いシート、ネットワーク障害、不完全な 3-D セキュアを処理します。

用途

React Native の Stripe 統合が合うとき

iOS および Android 上の既存の React Native ストア

React Native アプリと API はすでに持っています。 Flutter でカタログを書き換えることなく、支払いシートのチェックアウトが必要になります。

React Native クライアント アプリを本番環境に引き渡す代理店

React Native の保守可能な Stripe パス、クライアント リポジトリのソース、スナック デモの代わりに文書化されたライブキー カットオーバーが必要です。

React Native の SaaS ペイウォール

React Native アプリは最初の支払い方法を収集しますが、サブスクリプションは API に残り、すでに使用している場合は Stripe Billing に残ります。

React Native アプリ、Django、または Node API がすでに導入されている

React Native の Stripe Integration はモバイル クライアント側です。 API の構築も必要な場合は、別途範囲が設定されます。この価格は新しいバックエンドではありません。

デモ

React Native 支払いシート フローのプレビュー

React Native のチェックアウト パス (支払いアクション、支払いシート、確認、失敗の状態) をプレビューします。 Stripe アカウントに対するライブ サンドボックスは、互換性チェック後に利用可能になります。このページでは実際の請求は処理されません。

仕組み

React Native 向けの Stripe Integration の提供方法

標準の Bacodo アドオン ワークフロー。Expo とベア、iOS/Android ターゲット、アプリがすでに呼び出している API について React Native 固有のチェックを行います。

  1. 01

    反応ネイティブストライプを選択します

    React Native の Stripe 統合と、PaymentIntent を作成できる API を持っている (またはスコープする) ことを確認します。

  2. 02

    React Native 互換性チェック

    React Native バージョン、Expo またはベア ワークフロー、既存のチェックアウト UI、アプリがすでに使用しているバックエンド言語を確認します。

  3. 03

    React Native に統合する

    @ストライプ/ストライプ-反応ネイティブ、支払いシートのプレゼンテーション、ネイティブ構成、フェッチ コントラクトを PaymentIntent エンドポイントに追加します。

  4. 04

    React Native アプリを構成する

    env またはフレーバーを介して公開可能なキーを接続します。秘密キーと Webhook は API 上に残ります。

  5. 05

    React Native の支払いパスをテストする

    iOS および Android で Stripe テスト カードを実行し、3-D セキュアを実行し、キャンセル/拒否し、React Native アプリが読み取る API Webhook 更新の状態を確認します。

  6. 06

    React Native ソースを引き継ぐ

    React Native ソース、環境ノート、ライブキー チェックリストを提供します。 React Native の実装はあなたが保守します。

アーキテクチャ

Stripe が React Native プロジェクトに接続する方法

React Native バイナリは秘密鍵を保持しません。支払いシートは API のクライアント シークレットを使用します。 Stripe はその API を Webhook で通知します。次に、React Native は注文の状態を読み取ります。

React ネイティブ アプリ支払いシートあなたの APIStripe PaymentIntentsWebhook → APIReact Native が有料状態を読み取る

対応技術

React Native の Stripe 統合が実際に使うもの

iOS および Android での React Native

Expo の現在の React Native または裸のワークフロー。これは React Web サイトでも Flutter でもありません。スタックについては Stripe のランディングを参照してください。

@ストライプ/ストライプ反応ネイティブ

支払いシートとウォレット用の公式 Stripe React Native SDK。

既存の API

React Native アプリがすでに呼び出しているバックエンドでの PaymentIntent の作成と Webhook 検証。このアドオンは、その API を Bacodo 専用のサービスに置き換えるものではありません。

React Native アプリの Stripe アカウント

Stripe アカウント、テスト キーとライブ キー、API 上の Webhook エンドポイント、およびダッシュボード イベント。

必要なバックエンド

React Native アプリはクライアントです。 Webhook は電話だけで動作することはできません。 API を持たないアプリ専用プロジェクトは、このチェックアウト パスを完了できません。

含まれるもの

React Native 向けの Stripe Integration の内容

  • 既存の React Native プロジェクトへの統合
  • リポジトリ内の完全なソースコード
  • 公開可能キー環境と支払いシートのプレゼンテーション
  • PaymentIntent API にコントラクトを取得します
  • 引き継ぎ前に iOS と Android で React Native の支払いフローをテストしました
  • テストからライブへの切り替えに関する引継ぎメモ
  • 引き渡し後30日間のテクニカルサポート

追加価格には含まれていません

  • Stripe アカウント、API キー、Stripe 処理手数料 - これらはお客様が所有します
  • PaymentIntents を作成できる API がない場合は、新しいバックエンド
  • React Native から Flutter への書き直し
  • Apple または Google のアプリ内購入の代替品
  • Marketplace Connect またはカスタム請求 (カスタム作業としてスコープが設定されている場合を除く)

Pricing

React Native 向けの Stripe 統合の価格設定

この価格は React Native プラットフォームのみに適用されます。 Next.js、React、Django、または Flutter のアドオン価格は使用しません。

React Native の Stripe 統合

本番環境に対応した Stripe Payment Sheet を既存の React Native アプリに追加し、ソース コードを保持します。

前提条件

  • 既存の React Native プロジェクト
  • Stripe Test Mode アクセス
  • 安全な決済にはバックエンドが必要です

$145

一回払い

React Native

バックエンドが必要ですか?

  • ソースコード一式
  • ライセンス料なし
  • 30日間サポート
  • フル統合

安全な決済:stripe

納品とセキュリティ

React Native の配信とセキュリティの実践

React Native の推定納期

一般的な React Native Stripe チェックアウトは、React Native 互換性チェックの後にスコープされます。タイムラインは、Expo とベア、現在のチェックアウト UI、および API によって異なります。

引き継ぎ前に React Native でテスト済み

テストモード カード、3-D セキュア、キャンセル、拒否のパスは、引き渡し前に iOS と Android で実行されます。

Stripe シークレットは React Native バイナリから除外されます

公開可能なキーのみがクライアント内にあります。秘密キーと Webhook シークレットは、React Native アプリが呼び出すサーバー上に残ります。

Webhook 検証は React Native ではなく API 上で行われます

React Native は Stripe 署名を検証しません。 API が実行すると、React Native が結果を読み取ります。

検証できない React Native のセキュリティに関する主張はありません

当社は PCI 認証や不正行為ゼロを主張するものではありません。 React Native は、当社が保存するカスタム カード フォームではなく、Payment Sheet を通じてカードを収集します。

FAQ

よくある質問

React Native の Stripe Integration には何が含まれますか?

React Native 向けの Stripe 統合には、@ストライプ/ストライプ-react-native セットアップ、既存の React Native チェックアウトの支払いシート、PaymentIntent API へのフェッチ コントラクト、iOS および Android のテスト カバレッジ、および引き継ぎメモが含まれます。プロジェクトで React Native ソースを受け取ります。 Stripe の料金、Stripe アカウント、新しいバックエンドの構築は別のものです。

Stripe を既存の React Native アプリに統合しませんか?

はい。 Stripe Integration for React Native は、既存の React Native プロジェクト用に構築されています。成果物として別個のデモアプリを出荷するのではなく、支払いシートと支払いエントリ ポイントを現在の React Native ナビゲーションとチェックアウト UI に組み込みます。

React Native の Stripe Integration にはバックエンドが必要ですか?

本番環境の React Native Stripe パスの場合は「はい」です。 PaymentIntents、秘密キー、および Webhook 検証はサーバー上に存在する必要があります。 React Native アプリは、公開可能なキーとクライアント シークレットのみを受け取ります。 API がない場合、そのバックエンド作業は個別にスコープ設定され、React Native アドオンの価格には想定されません。

Stripe Integration for React Native はどの Stripe パッケージを使用しますか?

React Native 向けの Stripe 統合では、iOS および Android の支払いシートとウォレット ボタンに、Stripe の公式 React Native SDK である @ストライプ/ストライプ-react-native を使用します。明示的に必要としない限り、React Native チェックアウトを文書化されていないプラグインでラップすることはありません。

Stripe Integration for React Native は Apple Pay と Google Pay をサポートしていますか?

Stripe アカウント、Apple 販売者 ID、Google Pay の設定、およびデバイスがそれらをサポートしている場合は、はい。 React Native では、ウォレット ボタンはオプションのスコープです。 React Native のカード支払いシートはデフォルトのフォールバックのままです。

Expo は React Native の Stripe Integration に含まれていますか?

Expo と素の React Native は両方とも候補です。 React Native 互換性チェックでは、Expo SDK、構成プラグイン、ネイティブ モジュールの互換性を確認します。 React Web サイトはここではありません。「React 用の Stripe 統合」を参照してください。

Stripe Integration for React Native はサブスクリプションの支払いを徴収できますか?

React Native クライアントは、PaymentIntent を確認したり、Payment Sheet を通じて支払い方法を収集したりできます。定期的な Stripe Billing 製品、顧客ポータル、請求書のロジックは API 上で稼働します。サブスクリプションの多い React Native の作業には、カスタム見積もりが必要になる場合があります。

Stripe の公開可能キーと秘密キーは React Native アプリのどこに存在しますか?

React Native アプリは、通常は env またはセキュア フレーバーを介して、Stripe 公開可能キーのみを使用します。秘密キーと Webhook 署名秘密はサーバー上に残ります。 Stripe Integration for React Native は、APK または IPA に秘密キーを置きません。

React Native では Stripe テスト モードとライブ モードはどのように機能しますか?

まず、Stripe テスト キーとテスト カードに対して React Native の Stripe 統合を実装します。ライブ公開とは、Stripe ダッシュボードおよび React Native アプリで使用されるサーバー環境における文書化されたキーと Webhook のカットオーバーであり、アドオン ライセンスのアクティベーションではありません。

Stripe Integration for React Native は 3-D セキュア / SCA をどのように処理しますか?

React Native Payment Sheet と PaymentIntents は、@ストライプ/ストライプ-react-native を通じて 3-D セキュアを処理します。 React Native アプリは、Stripe が最終ステータスを返すまでシート フローを維持する必要があります。 Stripe Integration for React Native は、これらの状態を明示的に関連付けます。

React Native チェックアウトには Stripe Webhook が必要ですか?

React Native 支払いシート後のフルフィルメントの場合ははい。 React Native UI は真実の情報源ではありません。バックエンドは Stripe Webhook 署名を検証し、注文に支払い済みのマークを付け、コンテンツのロックを解除するか、フルフィルメントを通知します。

現在の React Native チェックアウト UI を Stripe で維持できますか?

はい。 React Native 向けの Stripe Integration は通常、React Native 製品、カート、支払いボタンを保持し、そのアクションから支払いシートを表示します。生の PAN データを扱うカスタム React Native カード フォームは、Payment Sheet がより安全な PCI パスであるため、デフォルトの範囲外です。

Stripe Integration for React Native の価格には、Stripe アカウントまたは手数料が含まれますか?

いいえ。Stripe アカウント、API キー、および Stripe 処理料金を作成して所有するのはお客様です。 React Native アドオンの価格は、Bacodo 支払いライセンスではなく、React Native プロジェクトへの実装です。

React Native 向けの Stripe Integration は Apple または Google のアプリ内購入に代わるものになりますか?

いいえ、iOS または Android ストア内で販売されるデジタル商品には、依然として IAP が必要なことがよくあります。 React Native 向けの Stripe 統合は、Stripe が製品タイプで許可されている支払いパスである React Native アプリでの Stripe チェックアウト用です。

React Native で Stripe のレシートとメタデータをカスタマイズできますか?

はい。 PaymentIntent メタデータ、顧客レコード、および Webhook 確認後に保持するフィールドは、React Native の Stripe 統合中に既存の React Native アプリの注文モデルに合わせて調整されます。

Stripe ハンドオーバー後にはどのような React Native サポートが含まれますか?

React Native ソースはリポジトリにあるため、チームはそれを保守できます。含まれる 30 日間のサポートは、提供された React Native 向けの Stripe Integration の範囲における技術的な質問と欠陥をカバーします。無関係な React Native 機能の作業はカバーしません。

Stripe-react-native または Stripe API の更新は React Native でどのように処理されますか?

30 日間の期間中、文書化された Stripe または @ストライプ/ストライプ/ストライプ-反応ネイティブの変更によって引き起こされる、提供された React Native 統合の破損をサポートします。その後の継続的な React Native パッケージのアップグレードはメンテナンス、または購入した場合は延長テクニカル サポートになります。

本番環境の React Native アプリで Stripe 支払いが失敗した場合はどうなりますか?

React Native チェックアウト パスから PaymentIntent ステータス、Stripe Dashboard ログ、Webhook 配信を読み取る方法を文書化します。 30 日間のサポートには、配信された React Native フローの拒否、3-D セキュアのドロップ、およびキーの構成ミスのトラブルシューティングが含まれます。

React Native の Stripe Integration と互換性がある React Native のバージョンはどれですか?

React Native バージョン、Expo またはベア ワークフロー、iOS デプロイメント ターゲット、および統合時に固定した @ストライプ/ストライプ-react-native リリースに対する Android minSdk を確認します。古いまたは大きくフォークされた React Native ランタイムには、追加のスコープが必要になる場合があります。

React Native の Stripe 統合の 30 日間サポートと 6 か月延長テクニカル サポートとは何ですか?

引き渡し後 30 日は、配信された React Native Stripe パスに含まれます。延長テクニカル サポートは、この React Native アドオン価格の 20% のオプションであり、新しい製品のビルドではなく、同じ React Native 統合に関するさらに 6 か月のテクニカル サポートをカバーします。

React Native の Stripe 統合

本番環境に対応した Stripe 決済を既存の React Native アプリに追加し、ソース コードを保持し、API の秘密を保持します。

$145