# MB WAY 支払い

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

MB WAY は、ポルトガルで利用されているデジタルウォレットの決済手段です。MB WAY の支払いでは、顧客は電話番号を入力して支払いを開始し、MB WAY アプリで[認証と承認](https://docs.stripe.com/payments/payment-methods.md#customer-actions)を行います。

支払いの成功 / 失敗を知らせる[即時通知](https://docs.stripe.com/payments/payment-methods.md#payment-notification)が届くようになりました。

> MB WAY は国際電話番号をサポートしていますが、顧客の大半は +351 で始まるポルトガルの電話番号を使用しています。[テスト用電話番号](https://docs.stripe.com/payments/mb-way/accept-a-payment.md#web-test-integration)を使用して、*サンドボックス* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes)で実装内容をテストできます。

# Checkout

> This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/mb-way/accept-a-payment?payment-ui=checkout.

> Stripe は、通貨、支払い方法の制限、その他のパラメーターを評価することで、適切な支払い方法を顧客に自動的に提示できます。
> 
> - [決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted)ガイドに従って、[動的な決済手段](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md)を使用するチェックアウトの統合機能を構築します。
- 動的な決済手段を使用しない場合は、チェックアウトの導入で、決済方法を手動で設定するために以下のステップに従ってください。

## 互換性を判定する

**サポート対象のビジネスの所在地**: Europe, US, CA, NZ, SG, HK, JP, AU, MX

**対応可能な通貨**: `eur`

**取引通貨**: `eur`

**支払いモード**: Yes

**セットアップモード**: No

**サブスクリプションモード**: No

MB WAY に対応するには、Checkout セッションが次の条件をすべて満たしている必要があります。

- すべての項目の*価格* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions)をユーロ (通貨コード `eur`) で表示している。

## MB WAY 決済を受け付ける

> このガイドを使用する前に、まず Checkout で[決済を受け付ける](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout)ための実装を構築します。

システムを次のように更新して、MB WAY を有効にします。

[Checkout セッション](https://docs.stripe.com/api/checkout/sessions.md)を作成する際に、次のことを行ってください。

- `mb_way` を `payment_method_types` のリストに追加します。
- すべての `line_items` が `eur` 通貨を使用していることを確認します。

#### Stripe ホスト型ページ

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=eur" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=mb_way" \
  --data-urlencode "success_url=https://example.com/success"
```

#### 完全埋め込みページ

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=eur" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=mb_way" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### 注文のフルフィルメント

決済受け付け後に、[注文のフルフィルメントを実行](https://docs.stripe.com/checkout/fulfillment.md)する方法を説明します。

## 返金を処理する

[MB WAY の返金](https://docs.stripe.com/payments/mb-way.md#refunds)についてご紹介します。

## 実装内容をテストする

以下のテスト用電話番号を使用して、MB WAY の実装をテストします。この設定で、一般的な本番環境のシナリオを再現できます。

| 電話番号            | 説明                                                                                                                                              |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `+351911111112` | PaymentIntent のステータスは、約 30 秒後に `requires_action` から `succeeded` に移行します。                                                                         |
| `+351911111113` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は `payment_method_not_available` エラーコードを返します。           |
| `+351911111114` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードを返します。        |
| `+351911111115` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_intent_payment_attempt_expired` エラーコードを返します。 |
| `+351911111116` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は `payment_method_customer_decline` エラーコードを返します。        |
| その他の電話番号        | PaymentIntent のステータスは、すぐに `requires_action` から `succeeded` に移行します。                                                                              |

## See also

- [Checkout のフルフィルメント](https://docs.stripe.com/checkout/fulfillment.md)
- [決済フローのカスタマイズ](https://docs.stripe.com/payments/checkout/customization.md)


# Elements

> This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/mb-way/accept-a-payment?payment-ui=elements.

## Stripe を設定する [サーバ側]

まず、[Stripe アカウントを作成する](https://dashboard.stripe.com/register)か[サインイン](https://dashboard.stripe.com/login)します。

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

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## PaymentIntent を作成する [サーバー側]

[PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスを追跡します。MB WAY の決済手段を受け付ける `PaymentIntent` を作成するには、回収する金額と通貨 (`eur`) を入力し、[payment_method_types](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) リストで `mb_way` を指定します。`PaymentIntent` の作成時に渡す決済手段リストを保持している場合は、それに `mb_way` を追加します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1000 \
  -d currency=eur \
  -d "payment_method_types[]=mb_way"
```

### client secret を取得する

PaymentIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

#### 1 ページのアプリケーション

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

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

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

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

#### サーバ側のレンダリング

サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。

決済フォームに [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## 支払い情報を収集する [クライアント側]

[Payment Element](https://docs.stripe.com/payments/payment-element.md) を使用してクライアント側で支払い詳細を収集します。Payment Element は事前構築された UI コンポーネントであり、さまざまな決済手段の詳細の収集をシンプルにします。

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

iframe を使用して Apple Pay または Google Pay を受け付けたい場合は、iframe の [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) 属性を `"payment *"` と等しく設定する必要があります。

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

#### HTML + JS

### Stripe.js を設定する

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

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

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

```javascript
// 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('<<YOUR_PUBLISHABLE_KEY>>', {
  betas: 'mb_way_pm_beta_1',
});
```

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

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

```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](https://docs.stripe.com/js/elements_object/create) インスタンスを作成する際に、前のステップからの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を `options` に渡します。

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

```javascript
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 stepconst 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');

```

#### React

### Stripe.js を設定する

次の npm パブリックレジストリーから [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) と [Stripe.js ローダー](https://www.npmjs.com/package/@stripe/stripe-js)をインストールします。

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Elements プロバイダーを支払いページに追加して設定する

Payment Element コンポーネントを使用するには、決済ページコンポーネントを [Elements プロバイダー](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)でラップします。公開キーを使用して `loadStripe` を呼び出し、返された `Promise` を `Elements` プロバイダーに渡します。加えて、前のステップの [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を `options` にして `Elements` プロバイダーに渡します。

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>', {
  betas: 'mb_way_pm_beta_1',
});

function App() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Payment Element コンポーネントを追加する

`PaymentElement` コンポーネントを使用して、フォームを構築します。

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      // 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
      //
      // <LinkAuthenticationElement id="link-authentication-element"
        // Prefill the email field like so:
        // options={{defaultValues: {email: 'foo@bar.com'}}}
      // /><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

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

[stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を使用して、Payment Element の詳細を使って支払いを完了します。これにより、購入者にオーソリリクエストが送信されます。

> 顧客による支払いの承認を待っている間、`stripe.confirmPayment` の完了を待ちます (処理に数秒かかります)。この間、フォームは再送信されないように無効化され、待機中を示すインジケーターが表示されます。エラーが発生した場合は、そのことを顧客に表示した上でフォームを再度有効化し、待機中のインジケーターを非表示にします。

#### HTML + JS

```javascript
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;
    }
  }
});
```

#### React

支払いフォームコンポーネントから [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) を呼び出すには、[useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) フックと [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook) フックを使用します。

フックではなく従来のクラスコンポーネントを使用する場合は、代わりに [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) を使用します。

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [message, setMessage] = useState(null);

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }
const {error, paymentIntent} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      redirect: 'if_required',
    });


    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)
      setMessage(error.message);
    } else {
      // This will execute if the confirm request is successful, or if the
      // payment fails asynchronously.
      switch (paymentIntent.status) {
        case 'succeeded':
          setMessage('Success! Payment received.');
          break;

        case 'processing':
          setMessage("Payment processing. We'll update you when payment is received.");
          break;

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

        default:
          setMessage('Something went wrong.');
          break;
      }
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show message to your customers */}
      {message && <div>{message}</div>}
    </form>
  )
};

export default CheckoutForm;
```

## 実装内容をテストする

以下のテスト用電話番号を使用して、MB WAY の実装をテストします。この設定で、一般的な本番環境のシナリオを再現できます。

| 電話番号            | 説明                                                                                                                                              |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `+351911111112` | PaymentIntent のステータスは、約 30 秒後に `requires_action` から `succeeded` に移行します。                                                                         |
| `+351911111113` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は `payment_method_not_available` エラーコードを返します。           |
| `+351911111114` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードを返します。        |
| `+351911111115` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_intent_payment_attempt_expired` エラーコードを返します。 |
| `+351911111116` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は `payment_method_customer_decline` エラーコードを返します。        |
| その他の電話番号        | PaymentIntent のステータスは、すぐに `requires_action` から `succeeded` に移行します。                                                                              |

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [カスタム webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) ハンドラを構築して、イベントをリッスンし、カスタムの非同期決済フローを構築できます。Stripe CLI を使用すると、ローカルで webhook 連携をテストしてデバッグできます。

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。


# ダイレクト API

> This is a ダイレクト API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/mb-way/accept-a-payment?payment-ui=direct-api.

## Stripe を設定する [サーバ側]

まず、[Stripe アカウントを作成する](https://dashboard.stripe.com/register)か[サインイン](https://dashboard.stripe.com/login)します。

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

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## PaymentIntent を作成する [サーバー側]

[PaymentIntent (支払いインテント)](https://docs.stripe.com/api/payment_intents/object.md) は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスを追跡します。MB WAY の決済手段を受け付ける `PaymentIntent` を作成するには、回収する金額と通貨 (`eur`) を入力し、[payment_method_types](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) リストで `mb_way` を指定します。`PaymentIntent` の作成時に渡す決済手段リストを保持している場合は、それに `mb_way` を追加します。

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1000 \
  -d currency=eur \
  -d "payment_method_types[]=mb_way"
```

### client secret を取得する

PaymentIntent には、*client secret* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

#### 1 ページのアプリケーション

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

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

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

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

#### サーバ側のレンダリング

サーバーからクライアントに client secret を渡します。この方法は、アプリケーションがブラウザーへの送信前に静的なコンテンツをサーバーで生成する場合に最適です。

決済フォームに [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) を追加します。サーバー側のコードで、PaymentIntent から client secret を取得します。

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## 決済手段の詳細を収集して支払いを送信する [クライアント側]

支払いを確定するときに client secret を渡します。

> client secret は PaymentIntent へのアクセスを許可するため、慎重に取り扱う必要があります。ログに記録したり、URL に埋め込んだり、その顧客以外に公開されることがないようにしてください。

`stripe.confirmMbWayPayment` を使用して、顧客の支払いの承認を開始します。

顧客は支払いリクエストに関する通知を受け取り、MB WAY アプリでリクエストを承認または拒否します。

```javascript
// Inititates the payment request notification to the customer
stripe.confirmMbWayPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        // Phone number is required for all MB WAY payment
        phone: '+351911111111'
      }
    }
  }
).then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
    console.log(result.error.message);
  }
});
```

デフォルトでは、Stripe.js によって PaymentIntent への更新がポーリングされます。`confirmMbWayPayment` によって返されるプロミスは、PaymentIntent が `succeeded` ステータスになるか、支払いが失敗して PaymentIntent が `requires_payment_method` ステータスを返した場合に解決します。移行の仕組みについては、[PaymentIntent のライフサイクル](https://docs.stripe.com/payments/paymentintents/lifecycle.md)で詳細をご確認ください。

お客様自らポーリングするには、`handleActions: false` を設定して自動ポーリングを無効にします。

```javascript
stripe.confirmMbWayPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        phone: '+351911111111'
      }
    }
  }
  { handleActions: false } // <---- Like this
)
```

この例では、お客様自ら [PaymentIntents API](https://docs.stripe.com/api/payment_intents/retrieve.md) を呼び出して、PaymentIntent のステータスを取得します。

## 実装内容をテストする

以下のテスト用電話番号を使用して、MB WAY の実装をテストします。この設定で、一般的な本番環境のシナリオを再現できます。

| 電話番号            | 説明                                                                                                                                              |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `+351911111112` | PaymentIntent のステータスは、約 30 秒後に `requires_action` から `succeeded` に移行します。                                                                         |
| `+351911111113` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は `payment_method_not_available` エラーコードを返します。           |
| `+351911111114` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は `payment_method_provider_decline` エラーコードを返します。        |
| `+351911111115` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_intent_payment_attempt_expired` エラーコードを返します。 |
| `+351911111116` | PaymentIntent のステータスは、ただちに `requires_action` から `requires_payment_method` に移行します。Stripe は `payment_method_customer_decline` エラーコードを返します。        |
| その他の電話番号        | PaymentIntent のステータスは、すぐに `requires_action` から `succeeded` に移行します。                                                                              |

## Optional: 支払い後のイベントを処理する

支払いが完了すると、Stripe は [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) イベントを送信します。ダッシュボード、カスタム *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)、またはパートナーソリューションを使用してこれらのイベントを受信し、また、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。[サポートされているすべての決済手段の違い](https://stripe.com/payments/payment-methods-guide)をご確認ください。

- **ダッシュボードでイベントを手動で処理する**

  ダッシュボードを使用して、テスト決済を[ダッシュボードで表示](https://dashboard.stripe.com/test/payments)したり、メール領収書を送信したり、入金を処理したり、失敗した決済を再試行したりできます。

- **Custom Webhook を構築する**

  [カスタム webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) ハンドラを構築して、イベントをリッスンし、カスタムの非同期決済フローを構築できます。Stripe CLI を使用すると、ローカルで webhook 連携をテストしてデバッグできます。

- **構築済みアプリを導入する**

  パートナーアプリケーションを統合することで、[自動化](https://stripe.partners/?f_category=automation)や[マーケティング/セールス](https://stripe.partners/?f_category=marketing-and-sales)などの一般的なビジネスイベントを処理します。