Afterpay または Clearpay の支払いを受け付ける
アメリカ、カナダ、イギリス、オーストラリア、ニュージーランドで、Afterpay (イギリスでは Clearpay とも呼ばれている) による支払い方法を受け付ける方法をご紹介します。
注意
このセクションにはレガシープロダクトについてのコンテンツが含まれています。最新の導入パスについては、代わりに決済を受け付けるのガイドを使用する必要があります。Stripe はこのプロダクトを引き続きサポートしていますが、プロダクトが非推奨になった場合にはサポートが終了する可能性があります。
Stripe ユーザは、Payment Intents API (サポートされている方法を使用して支払いを作成するための単一の導入パス) を使用して、以下の国の顧客から Afterpay による支払いを受け付けることができます。
- オーストラリア
- カナダ
- ニュージーランド
- イギリス
- アメリカ
Afterpay は、使用が 1 回限りの即時通知型の決済手段であり、顧客は支払いの認証を求められます。顧客は Afterpay のサイトにリダイレクトされ、そこで分割払いプランの規約に同意します。顧客が規約に同意すると、売上が保証され、お客様の Stripe アカウントに送金されます。顧客は一定の期間で直接 Afterpay に返済します。
注
連携を始める前に、決済手段の設定に移動して、アカウントが Afterpay の対象であることを確認してください。
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 を作成し、回収する金額と通貨を指定します。Payment Intents API を使用した組み込みをすでにお持ちの場合には、afterpay_ を PaymentIntent の決済手段タイプのリストに追加します。
クライアント側
返される PaymentIntent には client secret が含まれ、これを使用することでクライアント側は、PaymentIntent オブジェクト全体を渡すことなく安全に決済プロセスを完了できます。クライアントで、サーバの 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: 'usd', payment_method_types: ['afterpay_clearpay'], }), }); const {clientSecret, error} = await response.json(); return {clientSecret, error}; };
支払い方法の詳細を収集するクライアント側
Afterpay で支払いを成功させるには請求先情報が提示されている必要があります。アプリで、必要な請求先情報を顧客から収集します。
- 氏名 (姓と名)
- メールアドレス
- 請求先住所
また、配送先情報は必須ではありませんが、認証率の向上に役立ちます。配送先情報を収集するには、以下を顧客から収集します。
- 氏名
- 詳細な配送先住所
export default function AfterpayClearpayPaymentScreen() { const [email, setEmail] = useState(''); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { email, phone: '+48888000888', addressCity: 'Houston', addressCountry: 'US', addressLine1: '1459 Circle Drive', addressLine2: 'Texas', addressPostalCode: '77063', name: 'Jenny Rosen', }; // Shipping details are optional but recommended to pass in. const shippingDetails: PaymentMethodCreateParams.ShippingDetails = { addressLine1: '1459 Circle Drive', addressCountry: 'US', addressPostalCode: '77063', name: 'Jenny Rosen', }; // ... }; return ( <Screen> <TextInput placeholder="E-mail" onChange={(value) => setEmail(value.nativeEvent.text)} /> </Screen> ); }
Stripe に支払いを送金するクライアント側
作成した PaymentIntent から client secret を取得し、confirmPayment を呼び出します。client secret を使用して支払いを完了できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。
export default function AfterpayClearpayPaymentScreen() { const [email, setEmail] = useState(''); const handlePayPress = async () => { // ... const {error, paymentIntent} = await confirmPayment(clientSecret, { paymentMethodType: 'AfterpayClearpay', paymentMethodData: { billingDetails, // Shipping details are optional but recommended to pass in. shippingDetails, }, }); 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>; }
オプションディープリンクを処理する
顧客がアプリを終了すると (Safari やバンキングアプリで認証するなど)、自動的にアプリに戻るための方法を提供します。多くの決済手段タイプで、戻り先 URL の指定が「必須」です。戻り先 URL を有効にしていても、指定がされていないと、戻り先 URL が必要な決済手段をユーザーに提示できません。
戻り先 URL を指定するには、以下のようにします。
- カスタム URL を登録します。ユニバーサルリンクはサポートされていません。
- カスタム URL を設定 します。
- 以下のように、URL を Stripe SDK に転送するようにルートコンポーネントを設定します。
注
Expo を使用している場合は、app. ファイルでスキームを設定します。
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> ); }
オプションPaymentIntent にラインアイテムを追加する
必要に応じてラインアイテムデータを受け取り Afterpay に提供するリスクシグナルを増やすことができます。この機能は現在プライベートベータです。使用をご希望の場合は、Stripe にお問い合わせください。
オプションオーソリとキャプチャの分離
カード支払いでのオーソリとキャプチャーの分離とは異なり、Afterpay ではオーソリ時点で分割払いの初回の金額を顧客に請求します。その後、オーソリから最長 13 日間以内であれば、残りの支払いをキャプチャーすることができます。この期間に支払いがキャプチャーされない場合、初回分の分割払いが顧客に返金され、それ以降の分割払いは請求されません。この場合、Stripe は PaymentIntent もキャンセルし、payment_intent.canceled イベントを送信します。
支払いをキャプチャーできないと分かっている場合は、13 日間が経過するのを待つのではなく PaymentIntent をキャンセルすることをお勧めします。先を見越して PaymentIntent をキャンセルすると、すぐに最初の分割払いが顧客に返金され、顧客の明細書上の支払いに関して混乱が生じるのを避けられます。
オーソリのみ行うように Stripe に指示する 
オーソリとキャプチャーを分離することを指定するには、PaymentIntent の作成時に、capture_method を manual に設定します。このパラメーターは、顧客の Afterpay アカウントの金額のみをオーソリするよう Stripe に指示します。
オーソリが成功すると、Stripe は payment_intent.amount_capturable_updated イベントを送信します。この機能については、イベントガイドでご確認ください。
売上をキャプチャする 
オーソリが成功すると、PaymentIntent の status が requires_ に移行します。オーソリされた売上をキャプチャーするために、PaymentIntent capture リクエストを実行します。デフォルトでは、オーソリされた合計金額がキャプチャーされます。これを超える金額のキャプチャーはできませが、これ未満でしたらキャプチャーできます。
任意オーソリをキャンセルする
オーソリを取り消す必要がある場合は、PaymentIntent をキャンセルできます。
オプション支払い後のイベントを処理する
支払いが完了すると、Stripe は payment_intent.succeeded イベントを送信します。ダッシュボード、カスタム Webhook、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。
クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。サポートされているすべての決済手段の違いをご確認ください。
- ダッシュボードでイベントを手動で処理する - ダッシュボードを使用して、テスト決済をダッシュボードで表示したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。 
- Custom Webhook を構築する - Custom Webhook ハンドラを構築してイベントをリッスンし、カスタム非同期型の決済フローを作成します。Stripe CLI を使用して、ローカルで Webhook の導入のテストとデバッグを行います。 
- 構築済みアプリを導入する - パートナーアプリケーションを統合することで、自動化やマーケティング/セールスなどの一般的なビジネスイベントを処理します。 
オプションAfterpay の組み込みをテストする
テスト API キーを使用して Afterpay の組み込みをテストするには、リダイレクトページを表示します。リダイレクトページで支払いを認証することにより、支払い成功のケースをテストできます。PaymentIntent は requires_ から succeeded に変化します。
ユーザが認証に失敗するケースをテストするには、テスト API キーを使用してリダイレクトページを表示します。リダイレクトページでテスト支払い失敗をクリックします。PaymentIntent は、requires_ から requires_に変化します。
テスト環境で PaymentIntents を手動でキャプチャする場合、キャプチャされていない PaymentIntent は、認証が成功してから 10 分後に自動的に期限切れになります。
失敗した支払い
Afterpay は、取引を受け付けるか拒否するかを決定する際に複数の要因を考慮します (買い手が Afterpay を使用している期間、顧客が返済する必要のある未払い額、現在の注文の値など)。
Afterpay による支払いは多くの決済手段よりも支払い拒否の確立が高いため、チェックアウトフローには常に card などの他の支払いオプションを提示する必要があります。このような場合、PaymentMethod は解除され、PaymentIntenオブジェクトのステータスは自動的に requires_ に変わります。
Afterpay の PaymentIntent のステータスが requires_ の場合、顧客は Afterpay のサイトにリダイレクトされてから 3 時間以内に支払いを完了する必要があります (拒否された支払いには適用されません)。3 時間以内にアクションが実行されなければ、PaymentMethod の関連付けが解除され、PaymentIntent のステータスは自動的に requires_ に移行します。
このような場合、決済フローに表示される別の支払いオプションで再試行するように顧客に通知します。
エラーコード
一般的なエラーコードと対応する推奨アクションは以下のとおりです。
| エラーコード | 推奨される対応 | 
|---|---|
| payment_ | Afterpay の決済が失敗したことを示す一般的なエラー。これは、拒否エラーコードとして表示されない拒否である可能性もあります。 | 
| payment_ | Afterpay が顧客の支払いを拒否しました。次のステップとして、顧客から Afterpay に詳細を問い合わせる必要があります。 | 
| payment_ | 顧客が Afterpay の決済ページで支払いを完了しなかったため、支払いセッションの有効期限が切れました。Stripe では、決済が正常に行われなかった PaymentIntent は、最初のチェックアウト作成から 3 時間後に自動的に有効期限切れとなります。 | 
| payment_ | Afterpay でサービス関連のエラーが発生したため、リクエストを完了できません。後で再試行してください。 | 
| amount_ | Afterpay の国別のデフォルトの取引限度額以内の金額を入力してください。 | 
| amount_ | Afterpay の国別のデフォルトの取引限度額以内の金額を入力してください。 |