コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する
対面決済
決済手段
決済シナリオ
決済以外の機能

メモ

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

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

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

注意

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

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

構築対象

Stripe を設定する
サーバー側

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

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

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

PaymentIntent を作成する
サーバー側

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

サーバーで金額とmxn通貨を使用して PaymentIntent を作成します (OXXO は他の通貨をサポートしていません)。すでにPayment Intents APIを使用した統合がある場合は、PaymentIntentの決済手段タイプのリストにoxxoを追加します。

Command Line
curl
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="mxn" \
  -d "payment_method_types[]"="oxxo"

client secret を取得する

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

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

main.rb
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

その後、クライアント側で 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/clover/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_actionOXXO の支払い票が正常に作成されました。顧客が OXXO で支払うのを待ちます。
payment_intent.processing顧客は OXXO の支払いができなくなりました。支払いの成功、または失敗を待ちます。
payment_intent.succeeded顧客は有効期限が切れる前に OXXO の支払い票に対する支払いを行いました。顧客が購入した商品またはサービスのフルフィルメントを行います。
payment_intent.payment_failed顧客が有効期限までに OXXO の支払い票に対する支払いを行いませんでした。顧客にメールまたはプッシュ通知で連絡し、別の決済手段をリクエストします。

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

手動

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

カスタムコード

Webhook ハンドラを構築してイベントをリッスンし、非同期型のカスタムの決済フローを作成します。Stripe CLI を使用して、ローカルで 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 詳細を表示する
クライアント側

confirmOxxoPayment で OXXO の取引詳細の表示を処理するには、Stripe.js を利用することをお勧めします。ただし、顧客に手動で取引詳細を表示することもできます。

ステップ 4 で stripe.confirmOxxoPayment をコールする際に handleActions: false を指定して、顧客に 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,
        },
      },
    }, {handleActions: false},
  );

  if (result.error) {
    // Display error to your customer
    const errorMsg = document.getElementById('error-message');
    errorMsg.innerText = result.error.message;
  } else {
    // An OXXO voucher was successfully created
    const amount = result.paymentIntent.amount;
    const currency = result.paymentIntent.currency;

    const details = result.paymentIntent.next_action.oxxo_display_details;
    const number = details.number;
    const expires_after = details.expires_after;

    // Handle the next action by displaying the OXXO details to your customer

    // You can also use the generated hosted voucher
    const hosted_voucher_url = result.paymentIntent.next_action.oxxo_display_details.hosted_voucher_url;
  }
});

少なくとも、以下を含めてください。

詳細説明

OXXO ロゴ

支払い票に OXXO ロゴを表示します。ロゴはこちらからダウンロードできます。

番号next_action.oxxo_display_details.number にある PaymentIntent オブジェクトの番号を見つけます。
有効期限next_action.oxxo_display_details.expires_after の PaymentIntent で OXXO の支払い票が期限切れになる UNIX タイムスタンプを見つけます。
金額回収する金額。
通貨OXXO では常にメキシコのペソが使用されます。
バーコードCode 128 を使用して、番号からバーコードを生成します。印刷時のバーコードの幅は約 7.5 cm である必要があります。モバイルディスプレイの場合は、バーコードを拡大できることを確認してください。これにより、OXXO コンビニエンスストアのレジでバーコードをスキャンできます。JSBarcode などの外部ライブラリを使用できます。
支払い手順顧客向けの支払い手順。以下の日本語とスペイン語の翻訳をご覧ください。

OXXO での支払い手順

OXXO での支払い手順は以下のとおりです。

  1. レジ係に支払い票を渡して、バーコードを読み取ってもらう。
  2. レジで現金で支払う。
  3. 支払いが完了したら、記録のために支払いの領収書を保管する。
  4. 不明な点などがある場合は、加盟店に問い合わせる。
HTML
CSS
JavaScript
No results
<!-- Include a library for generating OXXO bar codes, such as JsBarcode -->
<!-- <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/barcodes/JsBarcode.code128.min.js"></script> -->

<div class="result-oxxo">
  <img width="100px" src="/images/payments/oxxo.png">
  <div class="amount">MX <span class="order-amount"></span></div>
  <div>Expires <span class="oxxo-expiry-date"></span></div>
  <div class="oxxo-display"></div>

  <button onclick="window.print()">Print</button>

  <div class="instructions">
    Instructions to pay your OXXO:
    <ol>
      <li><p>Give the voucher to the cashier to scan the barcode.</p></li>
      <li><p>Provide cash payment to the cashier.</p></li>
      <li><p>After the payment is complete, keep the receipt of your payment for your records.</p></li>
      <li><p>For any questions or clarification, please contact the merchant.</p></li>
    </ol>
  </div>
</div>

顧客は通常、OXXO の支払い票を印刷して OXXO コンビニエンスストアに持参します。お客様は分かりやすい印刷ボタンを提供したり、OXXO 支払い票を顧客にメールで送信したりできます。OXXO 支払い票を自身で印刷して、バーコードのサイズ (幅は約 7.5 cm の必要があります) を確認してください。

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

ダッシュボードのメール設定ページで OXXO 決済の手順メールを有効にできます。有効にすると、Stripe は、PaymentIntent の確定時に決済手順メールを送信します。メールには、OXXO 番号と Stripe の店舗支払いページへのリンクが含まれます。

メモ

テスト環境では、手順メールは Stripe アカウントに関連付けられたメールアドレスにのみ送信されます。

有効期限とキャンセル

OXXO バウチャーは expires_after UNIX タイムスタンプを過ぎると期限切れになり、顧客は有効期限が切れた OXXO バウチャーの支払いはできません。有効期限前に OXXO バウチャーをキャンセルすることはできません。

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