口座を収集して、データを活用する商品を構築する
ユーザーの口座を収集して、商品を構築するために残高、所有権の詳細、取引などのデータを使用する方法をご紹介します。
Financial Connections では、ユーザーは、外部の金融口座を貴社に関連付けることで財務データを安全に共有できます。Financial Connections を使用すると、トークン化された口座番号と金融番号、口座残高、口座所有者情報、取引履歴など、ユーザーに許可された財務データにアクセスできます。
以下は、Financial Connections をユーザーの製品の操作性の改善に使用する一般的な例です。
- 銀行口座名義人の名前や住所などの口座の所有権情報を確認することで、顧客または企業のアカウント登録時の不正利用を減らします。
- 取引データを使用して、ユーザーが経費の追跡、請求書の処理、財務の管理、財務状況の制御を実行できるようにします。
- リスク評価を迅速化して、取引と残高のデータを使用するクレジットやその他の金融サービスへのアクセスを向上させることができます。
ユーザーがより少ないステップで自身のアカウントを Link に関連付け、Stripe のすべての加盟店に銀行口座の詳細を保存して、素早く再利用できるようにします。
Stripe を設定するサーバ側クライアント側
サーバ側
この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。
クライアント側
React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。
次に、その他の必要な依存関係をインストールします。
- iOS の場合は、ios ディレクトリに移動して
pod install
を実行し、必要なネイティブ依存関係もインストールします。 - 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> ); }
口座名義人を作成または取得するサーバー側
ユーザーが貴社でアカウントを作成するときに、Customer (顧客) オブジェクト を作成します。メールアドレスを提供することで、 Financial Connections は Link のリピーターユーザーに効率的なユーザーインターフェイスを動的に表示し、認証フローを最適化できます。
Financial Connections Session を作成するサーバー側
注
このエンドポイントの実行可能な実装が Glitch で提供されており、簡単なテストに利用できます。
Financial Connections を使用してユーザーの銀行口座からデータを取得するには、ユーザーが認証フローでその口座を認証する必要があります。
ユーザーは、口座をサイトまたはアプリケーションに関連付けるときに認証フローを開始します。ユーザーが口座を関連付けられるようにするボタン (銀行口座を関連付けるなど) またはリンクをサイトやアプリケーションに挿入します。
/v1/financial_
に送信することで、Financial Connections Session を作成します。
account_
を Customer のholder[customer] id
に設定します。- ユースケースの実施に必要なデータを含めてデータの
permissions
パラメーターを設定します。 - (オプション) アカウント作成時に、データ取得用の
prefetch
パラメーターを設定します。
permissions パラメーターは、アクセスできる口座データを管理します。少なくとも 1 つの権限をリクエストする必要があります。認証フローが完了すると、ユーザーはアクセスをリクエストしたデータを確認し、そのデータの共有に同意することができます。
ユースケースの実施に必要なデータを検討し、必要なデータのみにアクセスする権限をリクエストします。アプリケーションの範囲を大きく超える権限をリクエストすると、データの使用方法におけるユーザーの信頼を失う可能性があります。たとえば、個人向けの財務管理アプリケーションや融資商品を構築する場合は、transactions
データをリクエストします。アカウントの乗っ取りなどの不正利用を減らす場合は、ownership
の詳細をリクエストします。
ユーザーがアカウントを認証した後に権限を拡張するには、新しい Financial Connections Session を作成し、permissions
パラメーターに新しい値を指定する必要があります。ユーザーは認証フローを再度完了する必要があり、そこでアクセスの権限をリクエストした追加データを確認し、データの共有に同意します。
オプションの prefetch パラメーター は、ユーザーが口座を連結した直後に取得するデータを制御します。特定の種類のデータが常に必要である場合は、このオプションを使用します。これにより、データの更新を開始するために追加の API コールを実行する必要がなくなります。
ACH ダイレクトデビットによる決済を受け付けるためのオプションを保持するには、payment_
権限をリクエストします。
Financial Connections アカウントを収集するクライアント側
Stripe の React Native SDK から collectFinancialConnectionsAccounts
関数をインポートします。
import {collectFinancialConnectionsAccounts} from '@stripe/stripe-react-native';
collectFinancialConnectionsAccounts
を使用し、上記の client_
を渡して銀行口座を収集し、結果を適切に処理します。
// 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 が有効なアカウントへの入金のみに対応できるため、連結アカウントの認証フローでは、当座預金口座や普通預金口座などの口座タイプのみを追加できます。
オプション銀行口座の収集機能をカスタマイズするクライアント側
ダークモード
デフォルトでは、銀行口座の収集機能は、デバイスの設定に基づいて、ライトモードとダークモードの互換性のある色を自動的に切り替えます。アプリがダークモードまたはライトモードに対応していない場合は、style
をそれぞれ alwaysLight
または alwaysDark
に設定できます。
const {session, error} = await collectFinancialConnectionsAccounts( clientSecret, { style: 'alwaysLight', }, );
Android アプリで常にライトまたは常にダークのテーマを適用するには、Android の AppCompatDelegate
を利用します。Stripe の UI は、この設定を自動的に反映します。
戻り先 URL を設定する (iOS のみ)クライアント側
顧客がアプリを終了すると (Safari やバンキングアプリで認証するなど)、自動的にアプリに戻るための方法を提供します。多くの決済手段タイプで、戻り先 URL の指定が「必須」です。戻り先 URL を有効にしていても、指定がされていないと、戻り先 URL が必要な決済手段をユーザーに提示できません。
戻り先 URL を指定するには、以下のようにします。
- カスタム URL を登録します。ユニバーサルリンクはサポートされていません。
- カスタム URL を設定 します。
- 以下のように、URL を Stripe SDK に転送するようにルートコンポーネントを設定します。
注
Expo を使用している場合は、app.
ファイルでスキームを設定します。
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> ); }
オプションFinancial Connections アカウントからの ACH ダイレクトデビットによる決済を受け付ける
アカウントの supported_
属性に us_
が含まれている場合は、オプションで、以前に収集した Financial Connections アカウントで ACH ダイレクトデビットによる決済を受け付けることができます。
当座預金口座または普通預金口座などのアメリカの銀行口座のみで ACH ダイレクトデビットによる決済を受け付けることができます。
以前に収集した口座で ACH ダイレクトデビットによる決済を受け付けるには、Financial Connections Session でデータ権限パラメーターに payment_
を指定しておく必要があります。
Payment Intent または Setup Intent を作成する
今すぐ請求するアカウントの ACH ダイレクトデビットによる決済を受け付けるには、Payment Intents API を使用します。今後の ACH ダイレクトデビットによる決済のために詳細を保存するには、Setup Intents API を使用します。Payment Intent と Setup Intent の相違点の詳細をご覧ください。
このパスは、Payment Intents API を使用して ACH ダイレクトデビットによる決済を受け付ける方法を示しています。
Financial Connections アカウント ID と顧客 ID を使用して、Payment Intent を作成します。
これにより、以下のような Payment Intent が返されます。
{ "id": "pi_1GszXf2eZvKYlo2Ce7rjvnPP", "object": "payment_intent", "amount": 100, "amount_capturable": 0, "amount_details": { "tip": { "amount": null } }, "amount_received": 0, "application": null, "application_fee_amount": null, "automatic_payment_methods": null, "canceled_at": null, "cancellation_reason": null, "capture_method": "automatic", "charges": { "object": "list", "data": [
同意書承認を収集し、支払いを送信する
決済を開始する前に、同意書の規約を表示して顧客から承認を得る必要があります。
Nacha の運営規則に準拠するため、決済を開始する前に、同意書の規約を表示して顧客から承認を得る必要があります。同意書の詳細については、こちらの記事をご覧ください。
Payment Intent を確定する
この Payment Intent を確定するには、mandate
パラメーターに既存の同意書 ID を指定するか、mandate_data を指定して新しい同意書を作成する必要があります。
たとえば、「注文する」ボタンがある決済ページを使用している場合、そのボタンをクリックすると、サーバー側のエンドポイントに対する POST
をトリガーできます。このエンドポイントは、リクエストのユーザーエージェントとクライアントの IP アドレスを抽出して、Stripe の API に対して以下のリクエストを行うことができます。
Payment Intent を正常に確定すると、次のようになります。
{ "id": "pi_1GszXf2eZvKYlo2Ce7rjvnPP", "object": "payment_intent", "amount": 100, "amount_capturable": 0, "amount_received": 0, "application": null, "application_fee_amount": null, "automatic_payment_methods": null, "canceled_at": null, "cancellation_reason": null, "capture_method": "automatic", "charges": { "object": "list", "data": [ { "id": "py_17F8CPDyDglZKgWE3uzOAUe9", "object": "charge", "amount": 100, "amount_captured": 100,
ACH ダイレクトデビットは、通知遅延型の支払い方法です。このため、顧客の口座から引き落としを開始してから、決済の成功または失敗の通知を受けるまでに最大で 4 営業日かかります。
PaymentIntent を作成すると、その初期ステータスは processing
になります。支払いが成功すると、PaymentIntent のステータスが processing
から succeeded
に更新されます。PaymentIntent ステータスの更新時に送信されるイベントについてご紹介します。