コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments
決済手段
支払いインターフェイス
決済シナリオ
店頭支払い
決済にとどまらない機能

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

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 にアクセスします。

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

クライアント側

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 を作成し、それを、そのアカウントを表す独自の内部表記と関連付けます。このようにすると、保存されている支払い方法の詳細を後で取得して使用することができます。

Command Line
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

SetupIntent を作成する
サーバー側

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

Command Line
curl https://api.stripe.com/v1/setup_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "payment_method_types[]"=ideal \
  -d customer={{CUSTOMER_ID}}

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

アプリで顧客の氏名、メールアドレス、および銀行名 (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 を見つけます。

Command Line
curl -G https://api.stripe.com/v1/setup_intents/{{SETUP_INTENT_ID}} \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "expand[]"=latest_attempt

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

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "payment_method_types[]"=sepa_debit \
  -d amount=1099 \
  -d currency=eur \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d payment_method={{SEPA_DEBIT_PAYMENT_METHOD_ID}} \
  -d confirm=true

導入をテストする

テスト 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.comPaymentIntent のステータスは、processing から succeeded に移行します。
generatedSepaDebitIntentsSucceedDelayed@example.comPaymentIntent のステータスは、3 分後以降に processing から succeeded に移行します。
generatedSepaDebitIntentsFail@example.comPaymentIntent のステータスは、processing から requires_payment_method に移行します。
generatedSepaDebitIntentsFailDelayed@example.comPaymentIntent のステータスは、3 分後以降に processing から requires_payment_method に移行します。
generatedSepaDebitIntentsSucceedDisputed@example.comPaymentIntent のステータスは、processing から succeeded に移行しますが、すぐに不審請求の申請が作成されます。

参照情報

このページはお役に立ちましたか。
はいいいえ