iDEAL を使用して将来の SEPA ダイレクトデビット支払いを設定する
iDEAL での支払いから銀行詳細を保存し、後から SEPA ダイレクトデビットで顧客に請求する方法をご紹介します。
注意
支払いの事前設定ガイドに従うことをお勧めします。すでに Elements との連携が完了している場合は、Payment Element 移行ガイドをご覧ください。
iDEAL は 1 回限りの使用の支払い方法で、顧客が支払いごとに認証する必要があります。このシステムを使用する場合、Stripe は iDEAL を通じて顧客に 0.01 EUR を請求して顧客の銀行詳細を収集します。顧客が支払いを認証すると、Stripe は支払いを返金して、顧客の IBAN を SEPA ダイレクトデビット支払い方法に保存します。その後、この SEPA ダイレクトデビット PaymentMethod (支払い方法) を使用して決済を受け付けるまたはサブスクリプションを設定することができます。
注意
iDEAL を使用して SEPA ダイレクトデビットの支払いを設定するには、ダッシュボードで SEPA ダイレクトデビットを有効にする必要があります。さらに、iDEAL 利用規約および SEPA ダイレクトデビット利用規約に従う必要もあります。
アプリでの iDEAL を使用した将来の SEPA ダイレクトデビット支払いの設定は、プロセスを追跡する SetupIntent (支払い方法設定インテント) の作成、同意書承認の収集、および iDEAL への顧客のリダイレクトで構成されます。Stripe はこの SetupIntent を使用して、設定が完了するまでの設定の状態のすべてを追跡および処理します。
Stripe を設定するサーバ側クライアント側
サーバ側
この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。
クライアント側
React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。
次に、その他の必要な依存関係をインストールします。
- iOS の場合は、ios ディレクトリーに移動して
pod install
を実行し、必要なネイティブ依存関係もインストールします。 - Android の場合は、依存関係をインストールする必要はありません。
Stripe の初期化
React Native アプリで Stripe を初期化するには、決済画面を StripeProvider
コンポーネントでラップするか、initStripe
初期化メソッドを使用します。publishableKey
の API 公開可能キーのみが必要です。次の例は、StripeProvider
コンポーネントを使用して Stripe を初期化する方法を示しています。
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 を作成するサーバー側
お客様のビジネスで顧客がアカウントを作成する際に、Customer を作成し、それを、そのアカウントを表す独自の内部表記と関連付けます。このようにすると、保存されている支払い方法の詳細を後で取得して使用することができます。
SetupIntent を作成するサーバー側
顧客 の ID を使用して SetupIntent
を作成し、payment_method_types を ideal
に設定します。SetupIntent
は、設定プロセスのステップを追跡します。iDEAL の場合、このステップには顧客からの SEPA ダイレクトデビット同意書 の収集と、同意書の有効性の追跡が含まれます。
支払い方法の詳細と同意書承認を収集するクライアント側
アプリで顧客の氏名、メールアドレス、および銀行名 (abn_
など) を収集します。
export default function IdealPaymentScreen() { const [name, setName] = useState(); const [bankName, setBankName] = useState(); const [email, setEmai] = useState(); const handlePayPress = async () => { // ... }; return ( <Screen> <TextInput placeholder="Email" onChange={(value) => setEmail(value.nativeEvent.text)} /> <TextInput placeholder="Name" onChange={(value) => setName(value.nativeEvent.text)} /> <TextInput placeholder="Bank name" onChange={(value) => setBankName(value.nativeEvent.text)} /> </Screen> ); }
SEPA ダイレクトデビットの支払いを処理するには、顧客から同意書を収集する必要があります。以下に示す定型の承認用文書を表示し、顧客が黙示的にこの同意書に署名するようにしてください。
「Rocket Rides」はお客様の社名に置き換えます。
支払い方法を設定すると、承認済みの同意書が作成されます。これらの規約を受け入れる際、顧客は黙示的に同意書に署名したため、フォームまたはメールを通じて、顧客にこれらの規約を伝える必要があります。
Stripe に支払い方法の詳細を送信するクライアント側
作成した SetupIntent から client secret を取得し、confirmSetupIntent
をコールします。これにより、Webview が表示され、顧客は銀行の Web サイトまたはアプリで設定を完了できます。完了後、SetupIntent の結果によって Promise が解決されます。
export default function IdealPaymentScreen() { const [name, setName] = useState(); const [bankName, setBankName] = useState(); const [email, setEmai] = useState(); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { name: 'Jenny Rosen', email: 'jenny.rosen@example.com', }; }; const { error, setupIntent } = await confirmSetupIntent(clientSecret, { paymentMethodType: 'Ideal', paymentMethodData: { billingDetails, bankName, } }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (setupIntent) { Alert.alert( 'Success', `Setup intent created. Intent status: ${setupIntent.status}` ); } return <Screen>{/* ... */}</Screen>; }
導入をテストする
Using your test API keys to confirm the SetupIntent. After confirming, you’re redirected to a test page with options to authorize or fail the payment method setup.
- Authorize test payment (テスト支払いをオーソリする) をクリックして、設定成功のケースをテストします。SetupIntent が
requires_
からaction succeeded
に変わります。 - Fail test payment (テスト支払いを失敗させる) をクリックして、顧客が認証に失敗するケースをテストします。SetupIntent が
requires_
からaction requires_
に変わります。payment_ method