コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments
決済手段
支払いインターフェイス
決済シナリオ
店頭支払い
決済にとどまらない機能

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

アプリ内決済を受け付ける

Payment Sheet を使用して、iOS、Android、または React Native アプリにカスタムの決済システムを構築します。

Payment Sheet はカスタマイズ可能なコンポーネントであり、アプリ内でボトムシートを使用して決済手段リストを表示し、支払い情報を収集します。

Payment Element を使用すると、一度の導入で複数の決済手段を受け付けることができます。この実装では、Payment Element をレンダリングし、PaymentIntent を作成して、購入者のアプリで支払いを確定するカスタム決済フローを構築します。代わりに、サーバーで支払いを確定する場合は、サーバーで支払いを確定するをご覧ください。

Stripe を設定する
サーバー側
クライアント側

サーバー側

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

Command Line
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

クライアント側

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

Command Line
yarn add @stripe/stripe-react-native

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

  • For iOS, go to the ios directory and run pod install to ensure that you also install the required native dependencies.
  • Android の場合は、依存関係をインストールする必要はありません。

注

公式の TypeScript ガイドに従って TypeScript のサポートを追加することをお勧めします。

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>
  );
}

注

テストおよび開発時には API のテストキーを使用し、アプリの公開時には本番環境キーを使用します。

支払い方法を有効にする

支払い方法の設定を表示して、サポートする支払い方法を有効にします。PaymentIntent を作成するには、少なくとも 1 つは支払い方法を有効にする必要があります。

多くの顧客から決済を受け付けられるよう、Stripe では、カードやその他一般的な決済手段がデフォルトで有効になっていますが、ビジネスや顧客に適した追加の決済手段を有効にすることをお勧めします。プロダクトと決済手段のサポートについては決済手段のサポートを、手数料については料金体系ページをご覧ください。

戻り先 URL を設定する
クライアント側

顧客がアプリを終了すると (Safari やバンキングアプリで認証するなど)、自動的にアプリに戻るための方法を提供します。多くの決済手段タイプで、戻り先 URL の指定が「必須」です。戻り先 URL を有効にしていても、指定がされていないと、戻り先 URL が必要な決済手段をユーザーに提示できません。

戻り先 URL を指定するには、以下のようにします。

  1. カスタム URL を登録します。ユニバーサルリンクはサポートされていません。
  2. カスタム URL を設定 します。
  3. 以下のように、URL を Stripe SDK に転送するようにルートコンポーネントを設定します。

注

Expo を使用している場合は、app.json ファイルでスキームを設定します。

App.tsx
import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}

さらに、initPaymentSheet メソッドを呼び出す際に returnURL を設定します。

await initPaymentSheet({
  ...
  returnURL: 'your-app://stripe-redirect',
  ...
});

ネイティブ URL スキームの詳細については、Android および iOS のドキュメントをご覧ください。

支払いの詳細を収集する
クライアント側

導入ではデフォルトの決済フローまたはカスタムフローを使用できます。

デフォルトカスタムフロー
PaymentSheet
カスタムフロー
支払い情報を収集して支払いを完了する画面を表示します。画面に $X を支払うというボタンが表示され、支払いが完了します。支払い情報の収集のみを行う画面を表示します。画面に続行するというボタンが表示され、顧客はアプリに戻され、ご自身のボタンで支払いが完了されます。

PaymentSheet を初期化する

顧客が購入する場合など、支払いを受け取る準備ができたときに、PaymentSheet を intentConfiguration で初期化します。 intentConfiguration オブジェクトには、金額や通貨などの支払い固有の詳細と confirmHandler コールバックが格納されています。

import {View, Button} from 'react-native';
import {
  useStripe,
  useEffect,
  PaymentMethod,
  IntentCreationCallbackParams
} from '@stripe/stripe-react-native';

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();

  const initializePaymentSheet = async () => {
    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      intentConfiguration: {
        mode: {
          amount: 1099,
          currencyCode: 'USD',
        },
        confirmHandler: confirmHandler
      }
    });
    if (error) {
      // handle error
    }
  };

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

  const confirmHandler = async (
    paymentMethod: PaymentMethod.Result,
    shouldSavePaymentMethod: boolean,
    intentCreationCallback: (params: IntentCreationCallbackParams) => void
  ) => {
    // explained later
  }

  const didTapCheckoutButton = async () => {
    // implement later
  }
  return (
    <View>
      <Button
        title="Checkout"
        onPress={didTapCheckoutButton}
      />
    </View>
  );
}

PaymentSheet を提示する

次に、PaymentSheet を提示します。presentPaymentSheet メソッドは、顧客が支払いを完了したときにプロミスで解決され、その後画面の表示が消えます。

import { PaymentSheetError } from '@stripe/stripe-react-native';
export default function CheckoutScreen() {
  // ...
  const didTapCheckoutButton = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      if (error.code === PaymentSheetError.Canceled) {
        // Customer canceled - you should probably do nothing.
      } else {
        // PaymentSheet encountered an unrecoverable error. You can display the error to the user, log it, etc.
      }
    } else {
      // Payment completed - show a confirmation screen.
    }
  }
  // ...
}

支払いを確定する

顧客が PaymentSheet で支払うをタップすると、顧客の支払い情報に相当する PaymentMethod.Result オブジェクトで initPaymentSheet に渡したコールバックが呼び出されます。

このメソッドを実装してサーバーにリクエストを送信します。サーバーは、PaymentIntent を作成して、その client secret を返します (次のステップで説明します)。

リクエストが返されたら、サーバーレスポンスの client secret またはエラーを指定して intentCreationCallback を呼び出します。PaymentSheet は、client secret を使用して PaymentIntent を確定するために必要な次のアクションを実行します。

export default function CheckoutScreen() {
  // ...

  const confirmHandler = async (
    paymentMethod: PaymentMethod.Result,
    shouldSavePaymentMethod: boolean,
    intentCreationCallback: (params: IntentCreationCallbackParams) => void
  ) => {
    // Make a request to your own server.
    const response = await fetch(`${API_URL}/create-intent`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
    }});
    // Call the `intentCreationCallback` with your server response's client secret or error
    const { client_secret, error } = await response.json();
    if (client_secret) {
      intentCreationCallback({clientSecret: client_secret});
    } else {
      intentCreationCallback({error});
    }
  }
  // ...
}

PaymentIntent を作成する
サーバー側

サーバー側で、金額と通貨を指定して PaymentIntent を作成します。支払い方法はダッシュボードで管理できます。Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。悪意のある顧客が金額を恣意的に選択できないようにするために、請求額はクライアント側ではなく、常にサーバー側 (信頼性の高い環境) で指定してください。

コールが成功した場合は、PaymentIntent client secret を返します。コールが失敗した場合は、エラーを処理して、エラーメッセージと顧客向けの簡単な説明を返します。

注

すべての IntentConfiguration プロパティが PaymentIntent (setup_future_usage、amount、currency など) と一致していることを確認します。

main.rb
Ruby
Python
PHP
Node
Java
Go
.NET
No results
require 'stripe'
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


post '/create-intent' do
  data = JSON.parse request.body.read
  params = {
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
  }
  begin
    intent = Stripe::PaymentIntent.create(params)
    {client_secret: intent.client_secret}.to_json
  rescue Stripe::StripeError => e
    {error: e.error.message}.to_json
  end
end

支払い後のイベントを処理する
サーバー側

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

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

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

イベント説明アクション
payment_intent.succeeded顧客が正常に支払いを完了したときに送信されます。顧客に注文の確定を送信し、顧客の注文のフルフィルメントを実行します。
payment_intent.processing顧客が正常に支払いを開始したが、支払いがまだ完了していない場合に送信されます。このイベントは、多くの場合、顧客が口座引き落としを開始するときに送信されます。その後、payment_intent.succeeded イベント、また、失敗の場合は payment_intent.payment_failed イベントが送信されます。顧客に注文確認メールを送信し、支払いが保留中であることを示します。デジタル商品では、支払いの完了を待たずに注文のフルフィルメントを行うことが必要になる場合があります。
payment_intent.payment_failed顧客が支払いを試みたが、支払いに失敗する場合に送信されます。支払いが processing から payment_failed に変わった場合は、顧客に再度支払いを試すように促します。

実装をテストする

カード番号シナリオテスト方法
カード支払いは成功し、認証は必要とされません。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
カード支払いには認証が必要です。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
カードは、insufficient_funds などの拒否コードで拒否されます。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
UnionPay カードは、13 ～ 19 桁の可変長です。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。

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

このページはお役に立ちましたか。
はいいいえ