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 をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。

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

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

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

注

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

Customer を作成する
サーバー側

お客様のビジネスで顧客がアカウントを作成する際に、Customer を作成し、それを、そのアカウントを表す独自の内部表記と関連付けます。このようにすると、保存されている支払い方法の詳細を後で取得して使用することができます。

SetupIntent を作成する
サーバー側

顧客の ID を使用して SetupIntent を作成し、payment_method_types を ideal に設定します。SetupIntent は、設定プロセスのステップを追跡します。iDEAL の場合、このステップには顧客からの SEPA ダイレクトデビット同意書の収集と、同意書の有効性の追跡が含まれます。

支払い方法の詳細と同意書承認を収集する
クライアント側

アプリで顧客の氏名、メールアドレス、および銀行名 (abn_amro など) を収集します。

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」はお客様の社名に置き換えます。

Authorization text template

By providing your payment information and confirming this payment, you authorise (A) and Stripe, our payment service provider, to send instructions to your bank to debit your account and (B) your bank to debit your account in accordance with those instructions. As part of your rights, you are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. Your rights are explained in a statement that you can obtain from your bank. You agree to receive notifications for future debits up to 2 days before they occur.

コピー

支払い方法を設定すると、承認済みの同意書が作成されます。これらの規約を受け入れる際、顧客は黙示的に同意書に署名したため、フォームまたはメールを通じて、顧客にこれらの規約を伝える必要があります。

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

後日 SEPA ダイレクトデビット PaymentMethod に請求する

顧客に再び請求する必要が生じたときは、新しい PaymentIntent を作成します。SetupIntent を取得し、latest_attempt フィールドを展開して payment_method_details 内の generated_sepa_debit ID を探すことで、SEPA ダイレクトデビットの支払い方法の ID を見つけます。

SEPA ダイレクトデビットと顧客 ID を使用して PaymentIntent を作成します。

導入をテストする

テスト API キーを使用して SetupIntent を確定します。確定すると、決済手段の設定を承認または失敗させるオプションのあるテストページにリダイレクトされます。

Authorize test payment (テスト支払いをオーソリする) をクリックして、設定成功のケースをテストします。SetupIntent が requires_action から succeeded に変わります。
Fail test payment (テスト支払いを失敗させる) をクリックして、顧客が認証に失敗するケースをテストします。SetupIntent が requires_action から requires_payment_method に変わります。

SEPA ダイレクトデビット組み込みのテスト

payment_method.billing_details.emailを以下の値のいずれかに設定して PaymentMethod のステータスの移行をテストします。メールアドレスの先頭に独自のカスタムのテキストを含め、その後ろにアンダースコアを付けることができます。たとえば、test_1_generatedSepaDebitIntentsFail@example.com は、PaymentIntent とともに使用された場合に常に失敗する、SEPA ダイレクトデビットの PaymentMethod です。

メールアドレス	説明
`generatedSepaDebitIntentsSucceed@example.com`	PaymentIntent のステータスは、`processing` から `succeeded` に移行します。
`generatedSepaDebitIntentsSucceedDelayed@example.com`	PaymentIntent のステータスは、3 分後以降に `processing` から `succeeded` に移行します。
`generatedSepaDebitIntentsFail@example.com`	PaymentIntent のステータスは、`processing` から `requires_payment_method` に移行します。
`generatedSepaDebitIntentsFailDelayed@example.com`	PaymentIntent のステータスは、3 分後以降に `processing` から `requires_payment_method` に移行します。
`generatedSepaDebitIntentsSucceedDisputed@example.com`	PaymentIntent のステータスは、`processing` から `succeeded` に移行しますが、すぐに不審請求の申請が作成されます。

オプション設定後のイベントを処理する

SetupIntent が完成すると、Stripe は setup_intent.succeeded イベントを送信します。ダッシュボード、カスタム Webhook、またはパートナーソリューションを使用してこれらのイベントを受信して、生成された SEPA ダイレクトデビット PaymentMethod をデータベースに保存したり、トライアル期間の終了後に顧客に請求するなどのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。サポートされているすべての決済手段の違いをご確認ください。

イベントを受信し、ビジネスアクションを実行する

手動

Stripe ダッシュボードを使用して、Stripe のすべての支払いの確認、メール領収書の送信、入金処理、失敗した支払いの再試行を実行します。

ダッシュボードでテスト支払いを確認する

カスタムコード

Webhook ハンドラを構築してイベントをリッスンし、非同期型のカスタムの決済フローを作成します。Stripe CLI を使用して、ローカルで Webhook の組み込みのテストとデバッグを行います。

カスタム Webhook を作成する

事前構築のアプリ

オートメーションやマーケティングとセールスなどの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。

オプションディープリンクを処理する

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

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

カスタム URL を登録します。ユニバーサルリンクはサポートされていません。
カスタム URL を設定します。
以下のように、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>
  );
}

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