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

注

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

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

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

注意

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

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

注

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

Stripe を設定する
サーバ側
クライアント側

サーバ側

この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# 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 のテストキーを使用し、アプリの公開時には本番環境キーを使用します。

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

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

サーバー側

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
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>;
}

導入をテストする

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

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

オプション支払い後のイベントを処理する

支払いが完了すると、Stripe は payment_intent.succeeded イベントを送信します。ダッシュボード、カスタム Webhook、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

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

  • ダッシュボードでイベントを手動で処理する

    ダッシュボードを使用して、テスト決済をダッシュボードで表示したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

  • Custom Webhook を構築する

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

  • 構築済みアプリを導入する

    パートナーアプリケーションを統合することで、自動化やマーケティング/セールスなどの一般的なビジネスイベントを処理します。

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

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

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

  1. カスタム URL を登録します。ユニバーサルリンクはサポートされていません。
  2. カスタム URL を設定 します。
  3. 以下のように、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 のドキュメントをご覧ください。

取引銀行

銀行名値
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
このページはお役に立ちましたか。
はいいいえ