Afterpay または Clearpay の支払いを受け付ける

アメリカ、カナダ、イギリス、オーストラリア、ニュージーランドで、Afterpay (イギリスでは Clearpay とも呼ばれている) による支払い方法を受け付ける方法をご紹介します。

ウェブ

モバイル

注意

このセクションにはレガシープロダクトについてのコンテンツが含まれています。最新の導入パスについては、代わりに決済を受け付けるのガイドを使用する必要があります。Stripe はこのプロダクトを引き続きサポートしていますが、プロダクトが非推奨になった場合にはサポートが終了する可能性があります。

Stripe users can use the Payment Intents API—a single integration path for creating payments using any supported method—to accept Afterpay payments from customers in the following countries:

オーストラリア
カナダ
ニュージーランド
イギリス
アメリカ

Afterpay is a single use, immediate notification payment method that requires customers to authenticate their payment. Customers are redirected to the Afterpay site, where they agree to the terms of an installment plan. When the customer accepts the terms, funds are guaranteed and transferred to your Stripe account. The customer repays Afterpay directly over time.

注

Before you start the integration, make sure your account is eligible for Afterpay by navigating to your Payment methods settings.

Stripe を設定する
サーバ側

まず、Stripe アカウントが必要です。今すぐ登録してください。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

PaymentIntent を作成する
サーバ側

A PaymentIntent is an object that represents your intent to collect payment from a customer and tracks the lifecycle of the payment process through each stage. First, create a PaymentIntent on your server and specify the amount to collect and the currency. If you already have an integration using the Payment Intents API, add afterpay_clearpay to the list of payment method types for your PaymentIntent.

決済手段はダッシュボードで管理できます。Stripeは取引額、通貨、決済フローなどの要素に基づいて、適切な決済手段が返されるように処理します。以下の例では、automatic_payment_methods 属性を使用していますが、決済手段タイプを使用して afterpay_clearpay を一覧表示することができます。最新バージョンのAPIでは automatic_payment_methods パラメーターの指定は必須ではありません。この機能はデフォルトで有効になっています。いずれのオプションを選択する場合でも、必ずダッシュボードで Afterpay Clearpay を有効にしてください。

Afterpay で支払いを成功させるには配送先と請求先の両方の詳細が提示されている必要があります。この組み込みガイドでは、配送先の詳細をサーバに渡し (ステップ 2)、顧客が支払い方法を選択した後に請求先の詳細をクライアントに渡す (ステップ 3) ことが推奨されています。

client secret を取得する

PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

ブラウザーの fetch 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

その後、クライアント側で JavaScript を使用して client secret を取得します。

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

その他の支払い方法オプション

You can specify an optional reference parameter in the payment method options for your PaymentIntent that sets an internal order identifier for the payment. Although this isn’t typically visible to either the business or the consumer, Afterpay’s internal support team can access it during manual support requests. The identifier is limited to 128 characters and may contain only letters, digits, underscores, backslashes, and dashes.

Stripe に支払いを送金する
クライアント側

In this step, you’ll complete Afterpay payments on the client with Stripe.js.

Stripe.js を設定する

顧客が Afterpay での支払いをクリックしたときは、Stripe.js を使用してその支払いを Stripe に送信することをお勧めします。Stripe.js は、支払いフローを構築するための Stripe の基本的な JavaScript ライブラリです。これにより、以下で説明するリダイレクトなどの複雑な処理が自動的に行われ、今後、組み込みを他の支払い方法に簡単に拡張できます。Stripe.js スクリプトを HTML ファイルの先頭に追加することで、決済ページにこのスクリプトを含めます。

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

決済ページで以下の JavaScript を使用して、Stripe.js のインスタンスを作成します。

script.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
var stripe = Stripe(
  'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Rather than sending the entire PaymentIntent object to the client, use its client secret from step 2. This is different from your API keys that authenticate Stripe API requests.

client secret は支払いを確定できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。

Use stripe.confirmAfterpayClearpayPayment to handle the redirect away from your page and to complete the payment. Add a return_url to this function to specify where Stripe redirects the user after they complete the payment on the Afterpay website or mobile application.

client.js
// Redirects away from the client
const {error} = await stripe.confirmAfterpayClearpayPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        email: 'jenny@rosen.com',
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
    },
    return_url: 'https://example.com/checkout/complete',
  }
);
if (error) {
  // Inform the customer that there was an error.
}

顧客が支払いを送信すると、Stripe は顧客を return_url にリダイレクトし、以下の URL クエリーパラメーターを含めます。返品ページでは、これらを使用して PaymentIntent のステータスを取得し、顧客に支払いステータスを表示できます。

return_url を指定する際に、返品ページで使用する独自のクエリパラメーターを追加することもできます。

パラメーター	説明
`payment_intent`	`PaymentIntent` の一意の識別子。
`payment_intent_client_secret`	`PaymentIntent` オブジェクトの client secret。

顧客が自社のサイトにリダイレクトされたら、payment_intent_client_secret を使用して PaymentIntent をクエリし、顧客に取引ステータスを表示できます。

オプションPaymentIntent にラインアイテムを追加する

オプションオーソリとキャプチャの分離

オプションAfterpay のリダイレクトを手動で処理する

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

オプションAfterpay の組み込みをテストする

オプションウェブサイトに支払い方法のメッセージを表示する

失敗した支払い

Afterpay は、取引を受け付けるか拒否するかを決定する際に複数の要因を考慮します (買い手が Afterpay を使用している期間、顧客が返済する必要のある未払い額、現在の注文の値など)。

You should always present additional payment options such as card in your checkout flow, as Afterpay payments have a higher rate of decline than many payment methods. In these cases, the PaymentMethod is detached and the PaymentIntent object’s status automatically transitions to requires_payment_method.

For an Afterpay PaymentIntent with a status of requires_action, customers need to complete the payment within 3 hours after you redirect them to the Afterpay site (this doesn’t apply to declined payments). If they take no action within 3 hours, the PaymentMethod detaches and the object status for the PaymentIntent automatically transitions to requires_payment_method.

このような場合、決済フローに表示される別の支払いオプションで再試行するように顧客に通知します。

エラーコード

一般的なエラーコードと対応する推奨アクションは以下のとおりです。

エラーコード	推奨される対応
`payment_intent_payment_attempt_failed`	Afterpay の決済が失敗したことを示す一般的なエラー。これは、拒否エラーコードとして表示されない拒否である可能性もあります。
`payment_method_provider_decline`	Afterpay が顧客の支払いを拒否しました。次のステップとして、顧客から Afterpay に詳細を問い合わせる必要があります。
`payment_intent_payment_attempt_expired`	顧客が Afterpay の決済ページで支払いを完了しておらず、支払いセッションの期限が切れています。Stripe は、最初の決済フローの作成から 3 時間が経過しても正常にオーソリされなかった Payment Intents を自動的に期限切れにします。
`payment_method_not_available`	Afterpay でサービス関連のエラーが発生したため、リクエストを完了できません。後で再試行してください。
`amount_too_small`	Enter an amount within Afterpay’s default transactions limits for the country.
`amount_too_large`	Enter an amount within Afterpay’s default transactions limits for the country.

注