Secure Remote Commerce プログラムガイド

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

Secure Remote Commerce (SRC) を使用してオンラインで安全に支払い、ユーザーの支払い情報を保護するために世界の決済業界を利用します。ユーザーは Visa、Mastercard、アメリカン・エキスプレス、およびディスカバーのカードを追加し、Click to Pay を有効にできます。SRC は加盟するすべてのネットワークブランドに対応しています。

注

実装する前に、実装要件をご確認ください。Stripe を介して Secure Remote Commerce を使用することにより、Operating rules (運用規定) (英語) に同意することになります。なお、Mastercard では Masterpass プラットフォームを介して SRC が提供されます。

Secure Remote Commerce ボタンを導入する

はじめに、ダッシュボードで Masterpass の Checkout ID を生成し、サンドボックスおよび本番環境のコールバック URL を設定します。Mastercard は Masterpass サービスの更新として SRC を提供しています。

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

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

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

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

<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 ボタンを表示するには、以下の画像を使用します。

<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`	ダッシュボードの Masterpass セクションからコピーされた、Mastercard の Checkout ID

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

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`	ダッシュボードからコピーされた Masterpass プロジェクトの Checkout ID
`allowedCardTypes`	Masterpass と互換性のある、サポート対象の支払いプロバイダーのリスト
`amount`	10 進法形式で表示される取引額
`currency`	取引に使用する通貨
`cartId`	購入を識別するために生成する一意の文字列
`callbackUrl`	このオプションのパラメーターを使用して、Masterpass を有効化する際に設定したデフォルトの callbackUrl を上書きできます

masterpass.checkout 関数とその関数が受け入れるパラメーターの詳細については、Mastercard のドキュメントをご覧ください。

支払いを完了する

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

リダイレクト先のルートハンドラで URL クエリパラメーターを抽出し、これを使用して、決済フローのはじめにお客様が作成した PaymentIntent (支払いインテント) を確定します。Payment Intent を使用した決済フローの管理方法については、決済の受け付けをご覧ください。

次のコード例は、Express フレームワークを使用した Node.js で、SRC による PaymentIntent を確定する方法を示しています。

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 ドキュメントに記載されているテスト用カードのいずれか 1 つを使用します。通常どおり決済プロセスを完了し、そのテスト用カードを支払い方法として選択します。すべてが正常に動作した場合、Mastercard によってアプリケーションにリダイレクトされ、支払いが想定どおりに作成されます。

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