EPS の支払いを受け付ける
オーストリアで一般的な支払い方法である EPS を受け付ける方法をご紹介します。
EPS は 1 回限りの使用の決済手段であり、顧客は支払いの認証を求められます。EPS を使用して支払う場合、顧客はお客様のウェブサイトからリダイレクトされ、支払いを承認すると、ウェブサイトに戻されます。ここで、お客様は支払いが成功したか失敗したかに関する即時通知を受け取ります。
注
EPS を使用する際は、EPS 利用規約に従う必要があります。
Stripe を設定するサーバ側クライアント側
サーバ側
この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。
クライアント側
React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。
次に、その他の必要な依存関係をインストールします。
- For iOS, go to the ios directory and run
pod installto ensure that you also install the required native dependencies. - 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> ); }
PaymentIntent を作成するサーバ側クライアント側
PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を示し、支払いプロセスのライフサイクルを追跡します。
サーバ側
サーバーで PaymentIntent を作成し、回収する amount と eur 通貨を指定します (EPS は他の通貨に対応していません)。既存の Payment Intents のシステムがある場合は、eps を決済手段タイプのリストに追加します。
クライアント側
クライアントで、サーバの 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({ currency: 'eur', payment_method_types: ['eps'], }), }); const { clientSecret, error } = await response.json(); return { clientSecret, error }; };
支払い方法の詳細を収集するクライアント側
アプリで顧客の氏名を収集します。
export default function EpsPaymentScreen() { 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 EPSPaymentScreen() { const [name, setName] = useState(); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { name, }; }; const { error, paymentIntent } = await confirmPayment(clientSecret, { paymentMethodType: 'Eps', paymentMethodData: { billingDetails, } }); 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> <TextInput placeholder="Name" onChange={(value) => setName(value.nativeEvent.text)} /> </Screen> ); }