OXXO での支払いを受け付ける

メキシコで一般的な支払い方法である OXXO を受け付ける方法をご紹介します。

ウェブ

モバイル

注意

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

メキシコの Stripe ユーザーは、Payment Intents API および Payment Methods API を使用して、メキシコの顧客から OXXO での支払いを受け付けることができます。顧客は OXXO コンビニエンスストアで、生成された番号が記載された OXXO の取引の詳細を提供し、現金で支払います。支払いが完了すると、Stripe からお客様に通知が送られます。

構築対象

名前

メールアドレス

Stripe を設定する
サーバー側

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

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

PaymentIntent を作成する
サーバー側

Stripe は PaymentIntent (支払いインテント) オブジェクトを使用して、顧客から支払いを回収するお客様の意図を示し、OXXO の支払い票の作成から支払いの完了までの状態の変化を追跡します。

金額と mxn 通貨 (OXXO は他の通貨には対応していません) を指定して、サーバーで PaymentIntent を作成します。すでに Payment Intents API を使用したシステムがある場合は、oxxo を PaymentIntent の支払い方法タイプのリストに追加します。

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
})();

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

PaymentIntent の支払い方法オプションでオプションの expires_after_days パラメーターを指定して、OXXO の支払い票の有効期限が切れるまでの日数を設定できます。たとえば、月曜日に OXXO の支払い票を作成し、expires_after_days を 2 に設定した場合、OXXO の支払い票は、America/Mexico_City (UTC-6) 時間で水曜日の 23:59 に有効期限が切れます。expires_after_days パラメーターは 1 日から 7 日まで設定できます。デフォルトは 3 日です。

支払い方法の詳細を収集する
クライアント側

クライアントで決済フォームを作成し、必要な請求先情報を顧客から収集します。

フィールド	値
`name`	顧客の氏名。姓と名はそれぞれ 2 文字以上である必要があります。
`email`	顧客のメールアドレス。

checkout.html
<form id="payment-form">
  <div class="form-row">
    <label for="name">
      Name
    </label>
    <input id="name" name="name" required>
  </div>

  <div class="form-row">
    <label for="email">
      Email
    </label>
    <input id="email" name="email" required>
  </div>

  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>

  <button id="submit-button">Pay with OXXO</button>
</form>

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

顧客が OXXO での支払いをクリックしたら、Stripe.js を使用してその支払いを Stripe に送信します。Stripe.js は、決済フローを構築するための Stripe の基本的な JavaScript ライブラリです。

Stripe.js スクリプトを決済ページに含めるには、このスクリプトを HTML ファイルの head に追加します。

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

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

client.js
// Set your publishable key. Remember to switch to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

stripe.confirmOxxoPayment と、ステップ 2 で作成した PaymentIntent オブジェクトの client secret を使用して、顧客の請求先情報を送信します。

確定されると、Stripe はモーダルを自動的に開き、顧客に OXXO の支払い票を表示します。

client.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const result = await stripe.confirmOxxoPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        billing_details: {
          name: document.getElementById('name').value,
          email: document.getElementById('email').value,
        },
      },
    });
  // Stripe.js will open a modal to display the OXXO voucher to your customer
  // This async function finishes when the customer closes the modal

  if (result.error) {
    // Display error to your customer
    const errorMsg = document.getElementById('error-message');
    errorMsg.innerText = result.error.message;
  }
});

注

stripe.confirmOxxoPayment の完了には数秒かかる場合があります。この間、フォームが再送信されないように無効化し、スピナーのような待機中のインジケータを表示します。エラーが発生した場合は、それを顧客に表示し、フォームを再度有効化し、待機中のインジケータを非表示にします。

OXXO の支払い票が正常に作成されると、返された PaymentIntent の status プロパティの値が requires_action になります。ダッシュボードまたはオブジェクトのステータスプロパティを調べて、PaymentIntent のステータスを確認します。OXXO の支払い票が正常に作成されなかった場合は、返された error を調べて原因を特定します (メールアドレス形式が無効であるなど)。

オプション: 顧客に取引の詳細へのリンクをメールで送信する

Stripe は、OXXO の取引の詳細が正常に作成されると、payment_intent.requires_action イベントを送信します。顧客に取引の詳細のリンクをメールで送信する必要がある場合は、イベントの受信時に PaymentIntent (支払いインテント) を取得することで、リンクを取得できます。payment_intent.next_action.oxxo_display_details の hosted_voucher_url フィールドには、取引の詳細へのリンクが含まれています。

オプション: 取引の詳細をカスタマイズする

Stripe では、ブランディング設定ページで、顧客に表示される UI をカスタマイズできます。

取引の詳細には、以下のブランド設定を適用できます。

アイコン: ブランド画像と公開ビジネス名
アクセント—番号コピーボタンの色として使用されます
ブランドカラー: 背景色として使用されます

支払い後のイベントを処理する
サーバー側

OXXO は遅延通知型の支払い方法であるため、売上はすぐには利用可能になりません。顧客は決済直後に OXXO コンビニエンスストアで OXXO の支払いを行わない場合があります。

Stripe は、支払われた OXXO の支払いごとに、翌営業日 (メキシコの祝日を除く月曜日から金曜日) に payment_intent.succeeded イベントを送信します。ダッシュボードを使用するか、Webhook ハンドラーを構築して、これらのイベントを受信し、アクション (顧客への注文確認メールの送信、データベースへの売上の記録、配送ワークフローの開始など) を実行します。

有効期限日を過ぎると、PaymentIntent のステータスは processing に移行し、顧客は期限切れの OXXO の支払い票に対する支払いを行うことができなくなります。OXXO の支払い票が有効期限日の 23:59 America/Mexico_City (UTC-6) より前に支払われなかった場合、Stripe は有効期限日から 10 日以内に payment_intent.payment_failed イベントを送信します (ほとんどの場合、このイベントは 7 日以内に送信されます)。たとえば、OXXO の支払い票の有効期限日が 9 月 1 日の場合、このイベントは遅くとも 9 月 10 日までに送信されます。

イベント	説明	次のステップ
`payment_intent.requires_action`	OXXO の支払い票が正常に作成されました。	顧客が OXXO で支払うのを待ちます。
`payment_intent.processing`	顧客は OXXO の支払いができなくなりました。	支払いの成功、または失敗を待ちます。
`payment_intent.succeeded`	顧客は有効期限が切れる前に OXXO の支払い票に対する支払いを行いました。	顧客が購入した商品またはサービスのフルフィルメントを行います。
`payment_intent.payment_failed`	顧客が有効期限までに OXXO の支払い票に対する支払いを行いませんでした。	Contact the customer through email or push notification and request another payment method.

イベントを受信し、ビジネスアクションを実行する

手動

Stripe ダッシュボードを使用して、Stripe のすべての支払いの確認、メール領収書の送信、入金処理、失敗した支払いの再試行を実行します。

ダッシュボードでテスト支払いを確認する

カスタムコード

Webhook ハンドラを構築してイベントをリッスンし、非同期型のカスタムの決済フローを作成します。Stripe CLI を使用して、ローカルで Webhook の組み込みのテストとデバッグを行います。

カスタム Webhook を作成する

構築したシステムをテストする

サンドボックスでは、stripe.confirmOxxoPayment を呼び出すときに payment_method.billing_details.email を次の値に設定することで、さまざまなシナリオをテストできます。

メールアドレス	説明
`{any_prefix}@{any_domain}`	顧客が 3 分後に支払い、約 3 分後に `payment_intent.succeeded` Webhook を受信する OXXO 支払いをシミュレーションします。本番環境では、この Webhook は 1 営業日後に受信します。例: fulano@test.com
`{any_prefix}succeed_immediately@{any_domain}`	顧客が即座に支払う OXXO をシミュレーションし、`payment_intent.succeeded` Webhook を数秒以内に受信します。本番環境では、この Webhook は 1 営業日後に受信します。例: succeed_immediately@test.com
`{any_prefix}expire_immediately@{any_domain}`	顧客が支払う前に期限切れになり、`payment_intent.payment_failed` Webhook を数秒以内に受信する OXXO をシミュレーションします。支払い方法オプションで `expires_after_days` パラメーターに設定された値に関係なく、next_action.oxxo_display_details の `expires_after` フィールドには、現在時刻が設定されます。例: expire_immediately@test.com
`{any_prefix}expire_with_delay@{any_domain}`	顧客が支払う前に期限切れになり、`payment_intent.payment_failed` Webhook を約 3 分後に受信する OXXO をシミュレーションします。支払い方法オプションで `expires_after_days` パラメーターに設定された値に関係なく、next_action.oxxo_display_details の `expires_after` フィールドが 3 分後に設定されます。例: expire_with_delay@test.com
`{any_prefix}fill_never@{any_domain}`	顧客が支払う前に期限切れになり、`payment_intent.payment_failed` Webhook を 1 営業日と 2 日後に受信する OXXO をシミュレーションします。本番環境では、この Webhook をテスト環境と同じタイミングで受信します。例: fill_never@test.com

オプション顧客に OXXO 詳細を表示する
クライアント側

オプション決済手順メールを送信する

有効期限とキャンセル

OXXO vouchers expire after the expires_after UNIX timestamp and a customer can’t pay an OXXO voucher once it has expired. OXXO vouchers can’t be canceled before expiration.

OXXO 支払い票の有効期限が切れると、PaymentIntent のステータスは requires_payment_method に変わります。この時点では、別の支払い方法を指定して PaymentIntent を確定するか、キャンセルすることができます。

注