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

注

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

iDEAL による支払いを受け付ける

オランダで良く使われている支払い方法である、iDEAL を受け付ける方法を紹介します。

ページをコピー

注意

サーバー側での手動確定を使用する必要がある場合、またはお使いの実装で決済手段を別途表示する必要がある場合を除き、決済を受け付けるガイドに従うことをお勧めします。すでに Elements との連携が完了している場合は、Payment Element 移行ガイドをご覧ください。

アプリで iDEAL を受け付ける際は、 Webview を表示して顧客を銀行のオンラインポータルに転送し、そこで顧客が支払いを承認します。承認後に顧客がアプリに戻ると、支払いが成功したか失敗したかがお客様に直ちに通知されます。

注

iDEAL を受け付けるには、Stripe の iDEAL 利用規約に従う必要があります。

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 の場合は、依存関係をインストールする必要はありません。

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

注

Use your API test keys while you test and develop, and your live mode keys when you publish your app.

PaymentIntent を作成する
サーバー側
クライアント側

PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を表すオブジェクトで、決済プロセスのライフサイクルの各段階を追跡します。

サーバー側

最初に、サーバーで PaymentIntent を作成し、回収する金額と eur 通貨を指定します (iDEAL は他の通貨には対応していません)。iDEAL に最少請求金額はないため、支払いの amount は 1 まで下げられます。すでに Payment Intents API を使用したシステムがある場合は、ideal を PaymentIntent の支払い方法タイプのリストに追加します。

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=ideal

PaymentIntent オブジェクト全体をアプリに渡す代わりに、その client secret を返します。PaymentIntent の client secret は、支払い額などの機密情報の操作を許可することなく、クライアントで支払いを確定し、支払い情報の詳細を更新できる一意のキーです。

クライアント側

クライアント側で、サーバーの PaymentIntent をリクエストし、その client secret を保存します。

const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email,
      currency: 'eur',
      payment_method_types: ['ideal'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};

支払い方法の詳細を収集する
クライアント側

アプリで顧客の氏名を収集します。

export default function IdealPaymentScreen() {
  const [name, setName] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
    </Screen>
  );
}

Stripe に支払いを送信する
クライアント側

作成した PaymentIntent から client secret を取得し、confirmPayment をコールします。これにより、WebView が表示され、顧客はここから銀行の Web サイトまたはアプリで支払いを完了できます。完了後、支払い結果によって Promise が解決されます。

export default function IdealPaymentScreen() {
  const [name, setName] = useState();

  const handlePayPress = async () => {
    const {clientSecret} = await fetchPaymentIntentClientSecret();

    const {error, paymentIntent} = await confirmPayment(clientSecret, {
      paymentMethodType: 'Ideal',
      paymentMethodData: {
        billingDetails: {
          name,
        },
      },
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
      Alert.alert(
        'Success',
        `The payment was confirmed successfully! currency: ${paymentIntent.currency}`,
      );
    }
  };

  return <Screen>{/* ... */}</Screen>;
}

導入をテストする

Use your test API keys to confirm the PaymentIntent. After confirming, you’re redirected to a test page with options to authorize or fail the payment.

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

取引銀行

銀行名値
ABN AMROabn_amro
ASN Bankasn_bank
Bunqbunq
INGing
Knabknab
N26n26
Nationale-Nederlandennn
Rabobankrabobank
Revolutrevolut
RegioBankregiobank
SNS Bank (De Volksbank)sns_bank
Triodos Banktriodos_bank
Van Lanschotvan_lanschot
Yoursafeyoursafe
このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc