PaymentRequestAPIの概要

投稿日: 2022-04-20 2022-10-24
タグ: javascript

Payment Request APIは新しいJavaScriptAPIであり、Stripeなどの支払いプロセッサに送信できる支払い情報を簡単に収集できます。目的は、ユーザーがブラウザでカード情報を簡単に保存できるようにすることで、支払いUXを改善することです。 API自体は、主にGoogleとMicrosoftの参加を得て、W3Cを通じてオープンに開発されています。

APIはまだ非常に新しく、現時点ではサポートはChromeとEdge15以降に限定されています。 ChromeデスクトップのサポートはChrome60 で追加されましたが、 WebPaymentsフラグを有効にする必要がある場合があります。良い点は、プログレッシブエンハンスメントとして簡単に使用できることです。また、APIはhttpsを介して提供されるサイトでのみ機能することに注意してください。

機能テスト

APIの可用性を機能検出する必要があります。

if (window.PaymentRequest) {
  // Yep, we can go ahead! Our code goes here.
} else {
  // No support. Proceed the old school way
}

支払い要求オブジェクト

最初に、paymentRequest オブジェクトを作成し、受け入れられた支払い方法の配列、支払いの詳細を含むオブジェクト、およびオプションの3番目のオプションのオブジェクトを渡します。

const paymentMethods = [
  {
    supportedMethods: ['basic-card']
  }
];

const paymentDetails = {
  total: {
    label: 'What you pay',
    amount: {
      currency: 'USD',
      value: 80
    }
  }
};

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails
);

// ...

paymentMethodsとpaymentDetailsの形状に注目してください。 supportedMethodsをbasic-card の値に設定すると、クレジットカードとデビットカードが受け入れられます。サポートされている支払いネットワークを制限することもできます。たとえば、次の場合、VisaとMasterCardのみが受け入れられます。

const paymentMethods = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard']
    }
  }
];

支払詳細

支払い詳細オブジェクトには、 total 、 label 、 amount 、 currency 、valueのフィールドが必要です。。

ブラウザ支払いUIの表示項目を追加することもできます。

const paymentDetails = {
  total: {
    label: 'What you pay',
    amount: {
      currency: 'USD',
      value: 80
    }
  },
  displayItems: [
    {
      label: 'Promo code',
      amount: {
        currency: 'USD',
        value: -10
      }
    },
    {
      label: 'Taxes',
      amount: {
        currency: 'USD',
        value: 12
      }
    }
  ]
};

多くの場合、ブラウザの支払いUIのスペースは限られているため、合計金額、税金、送料などのトップレベルのフィールドのみを一覧表示することをお勧めします。また、APIは計算を実行しないため、アプリは事前に計算された金額を提供する責任があることに注意してください。

オプションの3番目の引数を使用すると、名前、電子メール、電話番号などの追加情報をユーザーに要求できます。

// ...

const options = {
  requestPayerName: true,
  requestPayerEmail: true
};

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

UIの開始と完了

ほぼすべての設定が完了しました。支払いリクエストオブジェクトでshowメソッドを呼び出すまで何も起こらないと予想しています。 show（）はpromiseを返すので、次のようになります。

// ...

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

paymentRequest
  .show()
  .then(paymentResponse => {
    return paymentResponse.complete().then(() => {
      // call backend API to process payment with data from `paymentResponse`
    });
  })
  .catch(err => {
    // API error or user cancelled the payment
    console.log('Error:', err);
  });

簡単です！これにより、ユーザーにはブラウザからUIが表示されます。返されたpaymentResponseでcomplete（）を呼び出すと、ブラウザの支払いUIが閉じられ、別のPromiseが返されるため、バックエンドを呼び出して収集した情報を送信し、支払いを処理できます。。

オンラインでの支払いは難しい場合があります。ご覧のとおり、Payment Request APIは操作が非常に簡単で、支払いの一部を収集するユーザー情報を非常に簡単にします。

上記のコードを使用すると、ユーザーが支払いを確認するとすぐにブラウザUIが閉じ、バックエンドで支払いが処理されている間、アプリが引き継いで読み込みインジケーターを表示できます。または、ブラウザのUIと、その代わりに次のようなネイティブの読み込みインジケーターを保持することもできます。

// ...

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

paymentRequest
  .show()
  .then(paymentResponse => {
    return verifyPaymentWithBackend(paymentResponse).then(success => {
      if (success) {
        console.log('💵 Payment is complete!');
        return paymentResponse.complete('success');
      } else {
        return paymentResponse.complete('failure');
      }
    });
  })
  .catch(err => {
    // API error or user cancelled the payment
    console.log('Error:', err);
  });

これにより、ブラウザの支払いUIは、Promiseが解決または拒否されるまで、処理画面を表示します。ここで、 verifyPaymentWithBackend は、paymentResponseのコンテンツを使用して支払い処理のためにバックエンドAPIを呼び出す関数になります。

テストを支援するために、2.5秒後にtrueに解決されるpromiseを返すモックを次に示します。

function verifyPaymentWithBackend(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(true);
    }, 2500);
  });
}

ブラウザのサポート

支払い要求を使用できますか？ caniuse.comの主要なブラウザーでの支払い要求機能のサポートに関するデータ。

🔎これが優れたリソースで、PaymentRequestAPIの詳細を詳しく知ることができます。

getdocs

13036