MB WAY 支払い招待のみ

MB WAY の支払い方法を受け付ける手順をご紹介します。

MB WAY is a digital wallet payment method in Portugal. When paying with MB WAY, customers initiate payments using their phone number, and authenticate and approve them using their MB WAY app.

You get immediate notification of whether the payment succeeded or failed.

注

MB WAY supports international phone numbers, but the majority of customers use a Portuguese phone number starting with +351. You can test your integration in a sandbox using test phone numbers.

注意

Stripe は、顧客の通貨、決済手段の制限、その他のパラメーターを評価して、決済手段オプションを自動的に提示します。決済を受け付けるの手順を使用して、Stripe ダッシュボードから決済手段を設定することをお勧めします。

引き続き、Checkout で顧客に提示する決済手段を手動で設定する場合は、このガイドを使用します。それ以外の場合は、ダッシュボードで決済手段を設定できるように、構築済みのシステムを更新してください。

Stripe を設定する
サーバ側

まず、Stripe アカウントを作成するかサインインします。

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

Create a PaymentIntent
Server-side

A PaymentIntent is an object that represents your intent to collect a payment from a customer and tracks the payment process. To create a PaymentIntent that accepts a MB WAY payment method, specify the amount to collect, eur as the currency, and mb_way in the payment_method_types list. If you maintain a list of payment method types that you pass when creating a PaymentIntent, add mb_way to it.

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

Collect payment details
Client-side

Payment Element を使用してクライアント側で支払い詳細を収集します。Payment Element は事前構築された UI コンポーネントであり、さまざまな決済手段の詳細の収集をシンプルにします。

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を有効にしてください。

Stripe.js を設定する

Payment Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

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

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

checkout.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
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  betas: 'mb_way_pm_beta_1',
});

Payment Element を支払いページに追加する

Payment Element を決済ページに配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

前のフォームが読み込まれたら、Payment Element のインスタンスを作成して、それをコンテナーの DOM ノードにマウントします。Elements インスタンスを作成する際に、前のステップからの client secret を options に渡します。

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

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Submit the payment to Stripe
Client-side

stripe.confirmPayment を使用して、Payment Element の詳細を使って支払いを完了します。これにより、購入者にオーソリリクエストが送信されます。

注

stripe.confirmPayment might take several seconds to complete while waiting for customers to authorize the payment. During that time, disable your form from being resubmitted and show a waiting indicator like a spinner. If you receive an error, show it to the customer, re-enable the form, and hide the waiting indicator.

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

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

  const {error, paymentIntent} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    redirect: 'if_required',
  });

  const message = document.querySelector('#message')
  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    message.innerText = error.message;
  } else {
    // This will execute if the confirm request is successful, or if the
    // payment fails asynchronously.
    switch (paymentIntent.status) {
      case 'succeeded':
        message.innerText = 'Success! Payment received.';
        break;

      case 'requires_payment_method':
        message.innerText = 'Payment failed. Please try another payment method.';
        // Redirect your user back to your payment page to attempt collecting
        // payment again
        break;

      default:
        message.innerText = 'Something went wrong.';
        break;
    }
  }
});

Test your integration

Test your MB WAY integration by using the following test phone numbers. Each set of details reproduces a common live mode scenario.

Phone number	説明

`+351911111112`	The PaymentIntent status transitions from `requires_action` to `succeeded` after 15 seconds.
`+351911111113`	The PaymentIntent status transitions from `requires_action` to `requires_payment_method` immediately. Stripe returns the `payment_method_not_available` error code.
`+351911111114`	The PaymentIntent status transitions from `requires_action` to `requires_payment_method` immediately. Stripe returns the `payment_method_provider_decline` error code.
`+351911111115`	The PaymentIntent status transitions from `requires_action` to `requires_payment_method` immediately. Stripe returns the `payment_intent_payment_attempt_expired` error code.
`+351911111116`	The PaymentIntent status transitions from `requires_action` to `requires_payment_method` immediately. Stripe returns the `payment_method_customer_decline` error code.
`<any other number>`	The PaymentIntent status immediately transitions from `requires_action` to `succeeded`.

注

MB WAY 支払い招待のみ

MB WAY の支払い方法を受け付ける手順をご紹介します。

注

注意

Stripe を設定するサーバ側

Create a PaymentIntentServer-side