支払いと送金別方式を作成する

まず、Stripe アカウントが必要です。今すぐ登録してください。

サーバー側

この接続方法では、Stripe API と通信するエンドポイントがサーバー上に必要です。サーバーから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

クライアント側

React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。

yarn add @stripe/stripe-react-native

次に、その他の必要な依存関係をインストールします。

• iOS の場合は、ios ディレクトリに移動して pod install を実行し、必要なネイティブ依存関係もインストールします。
• Android の場合は、依存関係をインストールする必要はありません。

Stripe の初期化

React Native アプリで Stripe を初期化するには、決済画面を StripeProvider コンポーネントでラップするか、initStripe 初期化メソッドを使用します。publishableKey の API 公開可能キーのみが必要です。次の例は、StripeProvider コンポーネントを使用して Stripe を初期化する方法を示しています。

import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

この接続方法では、以下の 3 つの Stripe API オブジェクトを使用します。

1. PaymentIntent (支払いインテント)。Stripe はこれを使用して、顧客から支払いを回収する意図を示し、プロセス全体を通して支払いの試行と支払い状態の変化を追跡します。
2. Customer (顧客) (オプション)。将来の支払いに備えて支払い方法を設定するには、支払い方法を Customer に関連付ける必要があります。顧客がビジネスでアカウントを作成する際に、Customer オブジェクトを作成します。顧客がゲストとして支払いを行う場合は、支払いの前に Customer オブジェクトを作成し、後でこのオブジェクトを顧客のアカウントを表す自社の内部表現と関連付けることができます。
3. Customer Ephemeral Key (顧客の一時キー) (オプション)。Customer オブジェクトの情報は機密情報であるため、アプリから直接取得することはできません。Ephemeral Key により、SDK に Customer への一時的なアクセス権が付与されます。

カードを保存して、保存されたカードの再利用をリピート顧客に許可する場合は、構築されたシステムの Customer オブジェクトおよび Customer Ephemeral Key オブジェクトが必要です。許可しない場合は、これらのオブジェクトを省略できます。

セキュリティ上の理由により、アプリでこれらのオブジェクトを作成することはできません。代わりに、サーバー側で以下を行うエンドポイントを追加します。

1. Customer を取得するか、新規作成する。
2. Customer の一時キーを作成する。
3. サーバーで、amount (金額)、currency (通貨)、customer (顧客)、および transfer group (送金グループ) を指定して、PaymentIntent を作成します。
4. PaymentIntent の client secret、一時キーの secret、Customer ID (顧客 ID)、および貴社の公開可能キーをアプリに返します。

購入プロセスで顧客に表示される支払い方法は、PaymentIntent にも含まれています。Stripe によってダッシュボードの設定から支払い方法を取得することも、手動でリスト化することもできます。

貴社の構築済みのシステムで支払い方法の提供にコードベースのオプションを必要とする場合を除き、支払い方法を手動でリスト化しないでください。Stripe は通貨、支払い方法の制約、その他のパラメーターを評価し、対応可能な支払い方法のリストを決定します。購入完了率の上昇につながり、使用通貨と顧客の所在地に最も適した支払い方法を優先的に表示します。一方、優先度の低い支払い方法は、オーバーフローメニューに隠された状態になります。

# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-07-30.basil" \
  -X "POST" \
  -d "customer"=
{{CUSTOMER_ID}} \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"=
{{CUSTOMER_ID}} \
  -d "amount"=10000 \
  -d "currency"="usd" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d transfer_group="ORDER100" \

決済ページでは、モバイル決済 Element を表示する前に以下を実行する必要があります。

• 購入商品と合計金額を表示する
• 必要な配送先情報を収集する
• Stripe の UI を表示する決済ボタンを含める

アプリの決済フローで、前のステップで作成したバックエンドのエンドポイントにネットワークリクエストを送信し、useStripe フックから initPaymentSheet を呼び出します。

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

顧客が決済ボタンをタップしたら、presentPaymentSheet() を呼び出して画面を表示します。顧客が支払いを完了すると、この画面は閉じ、オプションの StripeError<PaymentSheetError> とともに promise が解決されます。

export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

エラーがない場合は、ユーザーに完了したことを伝えます (注文確認画面を表示するなど)。

allowsDelayedPaymentMethods を true に設定すると、アメリカの銀行口座などの 遅延通知型の支払い方法を使用できます。これらの支払い方法では、PaymentSheet が完了した時点では最終的な支払いステータスが判明せず、後になって成功または失敗が確定します。このようなタイプの支払い方法に対応する場合は、注文が確定済みであることを顧客に通知し、支払いが成功した場合にのみ注文のフルフィルメント (商品の発送など) を実行するようにします。

顧客はお客様のアプリから離れて、(Safari やバンキングアプリなどで) 認証する場合があります。ユーザーが認証後にアプリに自動的に戻れるようにするには、カスタム URL スキームを構成し、URL を SDK に転送するようにアプリのデリゲートを設定します。Stripe はユニバーサルリンクには対応していません。

// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect")
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    guard let url = URLContexts.first?.url else {
        return
    }
    let stripeHandled = StripeAPI.handleURLCallback(with: url)
    if (!stripeHandled) {
        // This was not a Stripe url – handle the URL normally as you would
    }
}

さらに、PaymentSheet.Configuration オブジェクトの returnURL をアプリの URL に設定します。

var configuration = PaymentSheet.Configuration()
configuration.returnURL = "your-app://stripe-redirect"

支払いが完了すると、Stripe は payment_intent.succeeded イベントを送信します。ダッシュボードの Webhook ツールを使用するか Webhook のガイドに従ってこれらのイベントを受信し、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアントでは、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了する場合、また悪意を持つクライアントがレスポンスを不正操作する場合もあります。非同期型のイベントをリッスンするよう組み込みを設定すると、単一の組み込みで複数の異なるタイプの支払い方法を受け付けることができます。

Payment Element を使用して支払いを回収する場合は、payment_intent.succeeded イベントのほかにこれらのイベントを処理することをお勧めします。

サーバーで、Transfer (送金) を作成し、使用する transfer_group を指定することで、アカウントから連結アカウントに送金します。

curl https://api.stripe.com/v1/transfers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=7000 \
  -d currency=usd \
  -d destination=
{{CONNECTED_ACCOUNT_ID}} \
  -d transfer_group=ORDER100

送金額と支払い金額が一致している必要はありません。1 回の支払いを複数の送金に分割したり、複数の支払いを 1 回の送金に含めることができます。以下の例では、同じ transfer_group に関連付けられた追加の送金を作成しています。

curl https://api.stripe.com/v1/transfers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=2000 \
  -d currency=usd \
  -d destination={{OTHER_CONNECTED_ACCOUNT_ID}} \
  -d transfer_group=ORDER100

送金オプション

transfer_group 文字列には任意の値を指定できますが、1 つのビジネスアクションを示す必要があります。また、関連する支払いや transfer_group の指定がない送金を作成することもできます。これはたとえば、プロバイダーに支払いをする必要があるが、それに関連付けられた顧客の支払いがない場合などです。

デフォルトでは、金額がプラットフォームのアカウントの利用可能残高を超えていると送金リクエストが失敗します。Stripe は、失敗した送金リクエストを自動的に再試行しません。

支払いに関連付けられている送金の送金リクエストが失敗しないようにします。関連する支払いを送金の source_transaction として指定すると、送金リクエストは自動的に成功します。ただし、Stripe はその支払いの資金がプラットフォームアカウントで利用可能になるまで送金を実行しません。

実装内容をテストするためのその他の情報については、テストをご覧ください。