口座を収集して、データを活用する商品を構築する
Financial Connections lets your users securely share their financial data by linking their external financial accounts to your business. You can use Financial Connections to access user-permissioned financial data such as tokenized account and routing numbers, account balances, account owner information, and historical transactions.
以下は、Financial Connections をユーザーの製品の操作性の改善に使用する一般的な例です。
- 銀行口座名義人の名前や住所などの口座の所有権情報を確認することで、顧客またはビジネスのアカウント登録時の不正利用を減らします。
- 取引データによって、ユーザーによる経費の追跡、請求書の処理、財務の管理、財務状況の制御を支援します。
- リスク評価を迅速化して、取引と残高のデータを使用するクレジットやその他の金融サービスへのアクセスを向上させることができます。
ユーザーがより少ないステップで自身のアカウントを Link に関連付け、Stripe のすべての加盟店に銀行口座の詳細を保存して、素早く再利用できるようにします。
Stripe を設定するサーバ側クライアント側
サーバ側
この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。
クライアント側
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 { StripeProvider } from '@stripe/stripe-react-native'; function App() { return ( <StripeProvider publishableKey=
urlScheme="your-url-scheme" // required for 3D Secure and bank redirects merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}" // required for Apple Pay > // Your app code here </StripeProvider> ); }"pk_test_TYooMQauvdEDq54NiTphI7jx"
口座名義人を作成または取得するサーバー側
Create a Customer object when users create an account with your business. By providing an email address, Financial Connections can optimize the authentication flow by dynamically showing a streamlined user interface, for returning Link users.
curl https://api.stripe.com/v1/customers \ -u "
:" \ -d email={{CUSTOMER_EMAIL}} \ -d name={{CUSTOMER_NAME}}sk_test_4eC39HqLyjWDarjtT1zdp7dc
Financial Connections Session を作成するサーバー側
注
このエンドポイントの実行可能な実装が Glitch で提供されており、簡単なテストに利用できます。
Financial Connections を使用してユーザーの銀行口座からデータを取得するには、ユーザーが認証フローでその口座を認証する必要があります。
ユーザーは、口座をサイトまたはアプリケーションに関連付けるときに認証フローを開始します。ユーザーが口座を関連付けられるようにするボタン (銀行口座を関連付けるなど) またはリンクをサイトやアプリケーションに挿入します。
/v1/financial_connections/sessions
に送信することで、Financial Connections Session を作成します。
curl https://api.stripe.com/v1/financial_connections/sessions \ -u "
:" \ -d "account_holder[type]"=customer \ -d "account_holder[customer]"=sk_test_4eC39HqLyjWDarjtT1zdp7dc\ -d "permissions[]"=balances \ -d "permissions[]"=ownership \ -d "permissions[]"=payment_method \ -d "permissions[]"=transactions{{CUSTOMER_ID}}
- Set
account_holder[customer]
to the Customerid
. - Set the data
permissions
parameter to include the data required to fulfill your use case. - 「オプション」: アカウント作成時にデータを取得するために
prefetch
パラメーターを設定します。
The permissions parameter controls which account data you can access. You must request at least one permission. When completing the authentication flow, your user can see the data you’ve requested access to, and provide their consent to share it.
Consider the data required to fulfill your use case and request permission to access only the data you need. Requesting permissions that go well beyond your application’s scope might erode your users’ trust in how you use their data. For example, if you’re building a personal financial management application or a lending product, you might request transactions
data. If you’re mitigating fraud such as account takeovers, you might want to request ownership
details.
After your user authenticates their account, you can expand data permissions only by creating a new Financial Connections Session and specifying a new value for the permissions
parameter. Your user must complete the authentication flow again, where they’ll see the additional data you’ve requested permission to access, and provide consent to share their data.
The optional prefetch parameter controls which data you retrieve immediately after the user connects their account. Use this option if you know you always want a certain type of data. It removes the need to make an extra API call to initiate a data refresh.
To preserve the option to accept ACH Direct Debit payments, request the payment_method
permission.
Financial Connections アカウントを収集するクライアント側
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 が有効なアカウントへの入金のみに対応できるため、連結アカウントの認証フローでは、当座預金口座や普通預金口座などの口座タイプのみを追加できます。
戻り先 URL を設定する (iOS のみ)クライアント側
顧客が Safari や銀行アプリで認証するなどしてアプリを終了した際に、後で自動的にアプリに戻るための方法を提供します。多くの決済手段タイプでは戻り先 URL が必須であるため、貴社で決済手段を有効にしていても、URL を指定していない場合、Stripe ではユーザーにその決済手段を提示することはできません。
戻り先 URL を指定するには、カスタム URL スキームまたはユニバーサルリンクを設定して、その URL を Stripe SDK に転送するようにルートコンポーネントを設定します。
注
Expo を使用している場合は、app.json
ファイルでスキームを設定します。
import React, { 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> ); }