# Secure Remote Commerce プログラムガイド

既存の Stripe システムで Secure Remote Commerce を使用して決済を受け付けます。

[Secure Remote Commerce (SRC)](https://www.mastercard.us/en-us/merchants/grow-your-business/find-solutions-by-need/improve-checkout/secure-digital-checkout.html) を使用してオンラインで安全に支払い、ユーザーの支払い情報を保護するために世界の決済業界を利用します。ユーザーは Visa、Mastercard、アメリカン・エキスプレス、および Discover のカードを追加し、Click to Pay を有効にできます。SRC は加盟するすべてのネットワークブランドに対応しています。

> 実装する前に、[実装要件](https://developer.mastercard.com/page/masterpass-requirements-and-best-practices)をご確認ください。Stripe を介して Secure Remote Commerce を使用することにより、[Operating rules (運用規定) (英語)](https://masterpass.com/assets/pdf/masterpassoperatingrules.pdf) に同意することになります。なお、Mastercard では Masterpass プラットフォームを介して SRC が提供されます。

## Secure Remote Commerce ボタンを導入する

> Mastercard は Masterpass を廃止しました。このため、ダッシュボードで新しい Masterpass Checkout ID を生成できません。Secure Remote Commerce のアカウント登録を再度有効にするために現在取り組んでいます。

決済機能の導入に [Visa Checkout](https://docs.stripe.com/visa-checkout.md) または [Masterpass](https://docs.stripe.com/masterpass.md) をご使用の場合、これらのシステムを SRC に移行することをお勧めします。SRC は、多数のカードブランドをサポートする統合された決済機能を提供します。

はじめに、[ダッシュボード](https://dashboard.stripe.com/account/payments/settings)で Masterpass の **Checkout ID** を生成し、サンドボックスおよび本番環境のコールバック URL を設定します。Mastercard は Masterpass サービスの更新として SRC を提供しています。

Web サイトで SRC を使用するには、以下のスクリプトタグを HTML ドキュメントに追加します。

#### Sandbox

```html
<script type="text/javascript" src="https://sandbox.src.mastercard.com/srci/integration/merchant.js?locale=en_us&checkoutid={checkoutId}"></script>
```

#### 本番環境

```html
<script type="text/javascript" src="https://src.mastercard.com/srci/integration/merchant.js?locale=en_us&checkoutid={checkoutId}"></script>
```

| パラメーター       | 説明                                                                                                                    |
| ------------ | --------------------------------------------------------------------------------------------------------------------- |
| `locale`     | ビジネスの所在国 (および言語)。SRC はアメリカのビジネスでのみご利用いただけるため、有効な値は `en_US` のみです。                                                      |
| `checkoutid` | [ダッシュボード](https://dashboard.stripe.com/account/payments/settings)の Masterpass セクションからコピーされた、Mastercard の Checkout ID。 |

黒いテキストの Masterpass ボタンを表示するには、以下の画像を使用します。

```html
<img id="mpbutton" src="https://src.mastercard.com/assets/img/acc/global/src_mark_hor_blk.svg?locale=en_us&paymentmethod={acceptedCardBrands}&checkoutid={checkoutId}"/>
```

白いテキストの Masterpass ボタンを表示するには、以下の画像を使用します。

```html
<img id="mpbutton" src="https://src.mastercard.com/assets/img/acc/global/src_mark_hor_blk.svg?locale=en_us&paymentmethod={acceptedCardBrands}&checkoutid={checkoutId}"/>
```

| パラメーター          | 説明                                                                                                                    |
| --------------- | --------------------------------------------------------------------------------------------------------------------- |
| `locale`        | ビジネスの所在国 (および言語)。SRC はアメリカのビジネスでのみご利用いただけるため、有効な値は `en_US` のみです。                                                      |
| `paymentmethod` | 受け付け可能なクレジットカードブランドのカンマ区切りのリスト (例: master,amex,visa,diners,discover,jcb,maestro)。                                     |
| `checkoutid`    | [ダッシュボード](https://dashboard.stripe.com/account/payments/settings)の Masterpass セクションからコピーされた、Mastercard の Checkout ID。 |

画像にクリックハンドラーを関連付け、それを使用し、必要なパラメーターを指定して `masterpass.checkout` 関数を呼び出します。

```javascript
const button = document.getElementById('mpbutton');

button.addEventListener('click', (ev) =>
  masterpass.checkout({
    checkoutId: '{{MASTERPASS_CHECKOUT_ID}}',
    allowedCardTypes: ['master', 'amex', 'visa'],
    amount: '10.00',
    currency: 'USD',
    cartId: '{{UNIQUE_ID}}',
    callbackUrl: '{{CALLBACK_URL}}'
  }));
```

`masterpass.checkout` 関数には以下のパラメーターが必要です。

| パラメーター             | 説明                                                                                                       |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| `checkoutId`       | [ダッシュボード](https://dashboard.stripe.com/account/payments/settings)からコピーされた Masterpass プロジェクトの Checkout ID |
| `allowedCardTypes` | Masterpass と互換性のある、サポート対象の支払いプロバイダのリスト。                                                                  |
| `amount`           | 小数形式で表示された取引額。                                                                                           |
| `currency`         | 取引に使用する通貨。                                                                                               |
| `cartId`           | 購入を識別するために生成する一意の文字列。                                                                                    |
| `callbackUrl`      | このオプションのパラメーターを使用して、Masterpass を有効にしたときに設定したデフォルトの `callbackUrl` を上書きします。                                |

`masterpass.checkout` 関数とその関数が受け入れるパラメーターの詳細については、[Mastercard のドキュメント](https://developer.mastercard.com/documentation/masterpass-merchant-integration-v7/7#standard-checkout1)をご覧ください。

## 支払いを完了する

ユーザーが決済ページで Masterpass ボタンをクリックすると、Masterpass の Web サイトに移動され、アカウントから既存の支払い方法を選択したり、新しい支払い方法を入力したりできます。このプロセスを完了すると、ユーザーは、Masterpass を有効化する際に設定されたコールバック URL、または `masterpass.checkout` 関数を呼び出す際に指定されたコールバック URL に Masterpass によってリダイレクトされます。これにより、`oauth_verifier` URL クエリパラメーターが追加され、アプリケーションで取引を完了できるようになります。

リダイレクト先のルートハンドラで URL クエリパラメーターを抽出し、これを使用して、決済フローの冒頭で作成した [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) を[確定し](https://docs.stripe.com/api/payment_intents/confirm.md)ます。PaymentIntent を使用した決済フローの管理方法については、[決済の受け付け](https://docs.stripe.com/payments/accept-a-payment.md)をご覧ください。

次のコード例は、Express フレームワークを使用した Node.js で、SRC による PaymentIntent を*確定* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects)する方法を示しています。

```javascript
app.get('/callback', async (req, res) => {
  // retrieve the PaymentIntent ID created at the beginning of the checkout flow.
  const payment_intent_id = '{{PAYMENT_INTENT_ID}}';

  const payment_intent = await stripe.paymentIntents.confirm(payment_intent_id, {
    amount: 1000,
    currency: 'usd',
    payment_method_data: {
      type: 'card',
      card: {
        masterpass: {
          cart_id: '{{UNIQUE_ID}}',
          transaction_id: req.query.oauth_verifier,
        },
      },
    },
  });

  res.send('<h1>Charge succeeded</h1>');
});
```

## Secure Remote Commerce をテストする

Mastercard のサンドボックスで SRC の組み込みをテストするには、Web サイトでの決済プロセス中に SRC ユーザーアカウントを新たに作成します。そのアカウントを設定して、Masterpass ドキュメントに記載されている[テスト用カード](https://developer.mastercard.com/masterpass/documentation/migration/masterpass_to_src_migration/#mastercard-test-cards) のいずれか 1 つを使用します。通常どおり決済プロセスを完了し、そのテスト用カードを支払い方法として選択します。すべてが正常に動作した場合、Mastercard によってアプリケーションにリダイレクトされ、支払いが想定どおりに作成されます。

SRC の実装は、`http` または `https` のページに含まれているときにのみ正常に動作します。Stripe は、テスト時であってもファイルシステムからの提供をサポートしていません。