口座を収集して、データを活用する商品を構築する

サーバ側

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

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

ユーザーが貴社でアカウントを作成するときに、Customer (顧客) オブジェクト を作成します。メールアドレスを提供することで、 Financial Connections は Link のリピーターユーザーに効率的なユーザーインターフェイスを動的に表示し、認証フローを最適化できます。

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d email={{CUSTOMER_EMAIL}} \
  -d name={{CUSTOMER_NAME}}

Financial Connections を使用してユーザーの銀行口座からデータを取得するには、ユーザーが認証フローでその口座を認証する必要があります。

ユーザーは、口座をサイトまたはアプリケーションに関連付けるときに認証フローを開始します。ユーザーが口座を関連付けられるようにするボタン (銀行口座を関連付けるなど) またはリンクをサイトやアプリケーションに挿入します。

/v1/financial_connections/sessions に送信することで、Financial Connections Session を作成します。

curl https://api.stripe.com/v1/financial_connections/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "account_holder[type]"=customer \
  -d "account_holder[customer]"=
{{CUSTOMER_ID}} \
  -d "permissions[]"=balances \
  -d "permissions[]"=ownership \
  -d "permissions[]"=payment_method \
  -d "permissions[]"=transactions

1. account_holder[customer] を Customer の id に設定します。
2. ユースケースの実施に必要なデータを含めてデータの permissions パラメーターを設定します。
3. (オプション) アカウント作成時に、データ取得用の prefetch パラメーターを設定します。

permissions パラメーターは、アクセスできる口座データを管理します。少なくとも 1 つの権限をリクエストする必要があります。認証フローが完了すると、ユーザーはアクセスをリクエストしたデータを確認し、そのデータの共有に同意することができます。

ユースケースの実施に必要なデータを検討し、必要なデータのみにアクセスする権限をリクエストします。アプリケーションの範囲を大きく超える権限をリクエストすると、データの使用方法におけるユーザーの信頼を失う可能性があります。たとえば、個人向けの財務管理アプリケーションや融資商品を構築する場合は、transactions データをリクエストします。アカウントの乗っ取りなどの不正利用を減らす場合は、ownership の詳細をリクエストします。

ユーザーがアカウントを認証した後に権限を拡張するには、新しい Financial Connections Session を作成し、permissions パラメーターに新しい値を指定する必要があります。ユーザーは認証フローを再度完了する必要があり、そこでアクセスの権限をリクエストした追加データを確認し、データの共有に同意します。

オプションの prefetch パラメーター は、ユーザーが口座を連結した直後に取得するデータを制御します。特定の種類のデータが常に必要である場合は、このオプションを使用します。これにより、データの更新を開始するために追加の API コールを実行する必要がなくなります。

ACH ダイレクトデビットによる決済を受け付けるためのオプションを保持するには、payment_method 権限をリクエストします。

Stripe の React Native SDK から collectFinancialConnectionsAccounts 関数をインポートします。

import {collectFinancialConnectionsAccounts} from '@stripe/stripe-react-native';

collectFinancialConnectionsAccounts を使用し、上記の client_secret を渡して銀行口座を収集し、結果を適切に処理します。

// Assume you have a <Button /> to collect payout accounts, whose onPress is handleCollectPress
const handleCollectPress = async () => {
  // Fetch the clientSecret you created above and pass it to collectFinancialConnectionsAccounts
  const {session, error} = await collectFinancialConnectionsAccounts(
    clientSecret,
  );

  if (error) {
    Alert.alert(`Error code: ${error.code}`, error.message);
  } else {
    Alert.alert('Success');
    console.log(
      'Successfully obtained session: ',
      JSON.stringify(session, null, 2),
    );
  }
};

collectFinancialConnectionsAccounts は Promise を返します。ユーザーがモーダルフローを完了すると、Promise が以下のいずれかで解決されます。

• ユーザーがアカウントを正常にリンクできる場合、完了した Financial Connections Session を表す session。この session には、連結アカウントのリストが入った accounts 配列が含まれています。
• セッションが失敗した場合またはキャンセルされた場合は error。

デフォルトでは、Stripe は ACH が有効なアカウントへの入金のみに対応できるため、連結アカウントの認証フローでは、当座預金口座や普通預金口座などの口座タイプのみを追加できます。

When a customer exits your app (for example to authenticate in Safari or their banking app), provide a way for them to automatically return to your app. Many payment method types require a return URL. If you don’t provide one, we can’t present payment methods that require a return URL to your users, even if you’ve enabled them.

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

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

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

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

ユーザーが認証フローを正常に完了したら、Financial Connections Session の permissions パラメーターで指定した口座データのアクセスや更新を行います。

ユーザーのデータのプライバシーを保護するために、アクセスできる口座データは、permissions パラメーターで指定したデータに制限されています。

口座データの取得を開始するには、残高、所有権、取引のガイドをご覧ください。