Przelewy24 での支払いを受け付ける
ポーランドで最もよく利用されている支払い方法である Przelewy24 (P24) を受け付ける方法をご紹介します。
注意
サーバー側での手動確定を使用する必要がある場合、またはお使いの実装で決済手段を別途表示する必要がある場合を除き、決済を受け付けるガイドに従うことをお勧めします。すでに Elements との連携が完了している場合は、Payment Element 移行ガイドをご覧ください。
Przelewy24 は 1 回限りの使用の決済手段であり、顧客は支払いの認証を求められます。Przelewy24 を使用して支払う場合、顧客はお客様のウェブサイトからリダイレクトされ、支払いを承認するとウェブサイトに戻されます。ここで、お客様は支払いが成功したか失敗したかに関する即時通知を受け取ります。
Stripe を設定するサーバ側クライアント側
サーバ側
この組み込みには、Stripe API と通信するエンドポイントがサーバ上に必要です。Stripe の公式ライブラリを使用して、サーバから Stripe API にアクセスします。
クライアント側
React Native SDK はオープンソースであり、詳細なドキュメントが提供されています。内部では、ネイティブの iOS および Android の SDK を使用します。Stripe の React Native SDK をインストールするには、プロジェクトのディレクトリーで (使用するパッケージマネージャーによって異なる) 次のいずれかのコマンドを実行します。
次に、その他の必要な依存関係をインストールします。
- 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> ); }
PaymentIntent を作成するサーバ側クライアント側
PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を示し、支払いプロセスのライフサイクルを追跡します。
サーバ側
サーバーで PaymentIntent を作成し、回収する amount を指定し、通貨として eur または pln を指定します。既存の Payment Intents のシステムがある場合は、p24 を決済手段タイプのリストに追加します。
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: 'pln', payment_method_types: ['p24'], }), }); const { clientSecret, error } = await response.json(); return { clientSecret, error }; };
Przelewy24 での明細書表記
PaymentIntent を確定する前に、カスタムの明細書表記を設定できます。Przelewy24 では、明細書表記は 14 文字以内に制限されています。顧客の銀行記録で支払いの説明に /OPT/X/////P24-XXX-XXX-XXX {statement_ の形式で表示されます。/OPT/X/////P24-XXX-XXX-XXX は、Przelewy24 によって生成された支払いの一意の参照表記です。
支払い方法の詳細を収集するクライアント側
アプリで顧客のメールアドレスを収集します。
export default function P24PaymentScreen() { const [email, setEmail] = useState(); const handlePayPress = async () => { // ... }; return ( <Screen> <TextInput placeholder="E-mail" onChange={(value) => setEmail(value.nativeEvent.text)} /> </Screen> ); }
Stripe に支払いを送信するクライアント側
作成した PaymentIntent から client secret を取得し、confirmPayment をコールします。これにより、WebView が表示され、顧客はここから銀行の Web サイトまたはアプリで支払いを完了できます。完了後、支払い結果によって Promise が解決されます。
export default function P24PaymentScreen() { const [email, setEmail] = useState(); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { email, }; }; const { error, paymentIntent } = await confirmPayment(clientSecret, { paymentMethodType: 'P24', 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="E-mail" onChange={(value) => setEmail(value.nativeEvent.text)} /> </Screen> ); }