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>; }
失敗した支払い
Afterpay は、取引を受け付けるか拒否するかを決定する際に複数の要因を考慮します (買い手が Afterpay を使用している期間、顧客が返済する必要のある未払い額、現在の注文の値など)。
Afterpay による支払いは多くの決済手段よりも支払い拒否の確立が高いため、チェックアウトフローには常に card
などの他の支払いオプションを提示する必要があります。このような場合、PaymentMethod は解除され、PaymentIntenオブジェクトのステータスは自動的に requires_
に変わります。
Afterpay の PaymentIntent のステータスが requires_
の場合、顧客は Afterpay のサイトにリダイレクトされてから 3 時間以内に支払いを完了する必要があります (拒否された支払いには適用されません)。3 時間以内にアクションが実行されなければ、PaymentMethod の関連付けが解除され、PaymentIntent のステータスは自動的に requires_
に移行します。
このような場合、決済フローに表示される別の支払いオプションで再試行するように顧客に通知します。
エラーコード
一般的なエラーコードと対応する推奨アクションは以下のとおりです。
エラーコード | 推奨される対応 |
---|---|
payment_ | Afterpay の決済が失敗したことを示す一般的なエラー。これは、拒否エラーコードとして表示されない拒否である可能性もあります。 |
payment_ | Afterpay が顧客の支払いを拒否しました。次のステップとして、顧客から Afterpay に詳細を問い合わせる必要があります。 |
payment_ | 顧客が Afterpay の決済ページで支払いを完了しておらず、支払いセッションの期限が切れています。Stripe は、最初の決済フローの作成から 3 時間が経過しても正常にオーソリされなかった Payment Intents を自動的に期限切れにします。 |
payment_ | Afterpay でサービス関連のエラーが発生したため、リクエストを完了できません。後で再試行してください。 |
amount_ | Afterpay の国別のデフォルトの取引限度額以内の金額を入力してください。 |
amount_ | Afterpay の国別のデフォルトの取引限度額以内の金額を入力してください。 |