Webペイメントの紹介：Payment RequestAPIを使用したより簡単なオンライン購入

オンラインで物を購入することは、特にモバイルではイライラするプロセスになる可能性があります。 ページが適切に設計されている場合でも、連絡先情報、配送先住所と請求先住所、配送オプション、カードの詳細など、多くの情報が必要です。 あなたがたまに諦めたことがあるなら、あなたは大多数です。

Baymard Instituteは、37の異なる調査の平均を取り、ショッピングカートの69％が放棄されていることを発見しました。

当然のことながら、モバイルでは数値が悪化します。モバイルでは、画面が小さく、物理的なキーボードがないため、入力が遅くなる可能性があります。 モバイルでの放棄率は84％以上にもなる可能性があります。 近年のモバイルブラウジングの増加に伴い、これは全体的な問題がますます悪化していることを意味します。 eコマースサイトの場合、これらの放棄されたカートは莫大な金額を要しています。 Business Insiderは、1年間で4兆ドル相当の商品が放棄されると見積もっています。

ありがたいことに、Webはこの問題に対抗しています。 「WebPayments」W3Cワーキンググループは、「Webでの支払いの革命」に取り組んでおり、オンライン支払いをはるかに簡単にするための新しい標準を開発しています。 「WebPayments」は、ワーキンググループの名前であるだけでなく、基本的に、これらの新しい新進気鋭の標準を網羅する総称です。

支払い要求API

これらの標準の最初のPaymentRequest APIは、大きな前進です。 これにより、ユーザーに支払いを要求し、それを受け入れるためのユーザーインターフェイスをブラウザに提供させることができます。 Chrome、Edge、Samsung Internetですでにサポートされており、FirefoxとSafariで開発中です。 New York Times、Washington Post、Monzoなど、多くの著名な企業がAPIを採用しています。

ブラウザからこの情報を要求すると、これらの詳細がすでに保存されている可能性があるため、すぐに大きなメリットが得られます。 APIを使用する他の1つのWebサイトに詳細を入力し、ブラウザーにそれを記憶させる限り、ブラウザーはフォームに事前入力できるため、チェックアウトがはるかに高速になります。

これは、標準のオートフィルよりも優れています。 ブラウザが入力フィールドを処理できるようにすることは、それが完全に正確である可能性があることを意味します—間違ったフィールドに間違った情報を事前入力する問題を回避します。 また、独自のHTMLやCSSを作成しなくても、モバイル向けに最適化された単一ページのチェックアウトフォームがあることも意味します。

メリットはモバイルでさらに感じられるかもしれませんが、Payment RequestAPIはモバイルブラウザに限定されていません。 デスクトップ版のChrome、Edge、Samsung Internet forDeXですでにサポートされています。 また、デスクトップFirefoxとSafariでも後でサポートが提供されることを期待できます（執筆時点では、最近Safari Technology Preview 44でデフォルトで有効になっています）。

私たちの最初の支払い要求

基本的な例を使ってAPIの調査を始めましょう。 ユーザーにカード支払いを要求し、次のようにチェックアウトできるようにします。

上のビデオでは、ユーザーが指紋で支払いを確認していることがわかります。 これは、支払い要求標準自体の一部ではありませんが、Samsungインターネットブラウザがサポートされているデバイスで（虹彩スキャンとともに）提供するセキュリティ機能です。

Webに生体認証を統合する可能性にさらに関心がある場合は、今後のWeb認証標準に注目してください。

まず、いつものように、プログレッシブエンハンスメントを採用し、このブラウザがAPIをサポートしていることを確認する必要があります。

 if (window.PaymentRequest) { // We can continue with the Payment Request API } else { // Here we could fall back to a legacy checkout form }

これで、PaymentRequestの構成を設定できます。これは、受け入れる支払いの種類と、購入について表示する詳細です。

 var methodData = [{ // 'basic-card' means standard card payments - credit and debit cards supportedMethods: 'basic-card' }]; var details = { // If we are buying multiple items, each one can be included displayItems: [ { label: 'Some product that we are buying', amount: {currency: 'USD', value: '699.99'} } ], total: { label: 'Total', amount: {currency: 'USD', value: '699.99'} } }; var paymentRequest = new PaymentRequest(methodData, details);

支払いUIを表示する場合（たとえば、ユーザーが[今すぐ購入]をクリックした場合）、 show()を呼び出すことができます。 次に、Promiseが解決されたときにユーザーが提供したデータを処理します。

 // show() makes it actually display the user interface paymentRequest.show() .then(function(paymentResponse) { // User has confirmed. paymentResponse contains the data entered. // Here we would process it server-side... processPaymentDetails(paymentResponse) .then(function(paymentResponse) { // ...Then when processed successfully, this will make the dialog indicate success & then close: paymentResponse.complete('success'); // We could also update the page here appropriately }); }) .catch(function(error) { // Handle error, eg if user clicks the 'cancel' button. });

これで、フロントエンドにUIフローが設定されました。 要件に合わせて、さらに構成することもできます。 たとえば、顧客に追加の詳細を要求する場合は、PaymentRequestコンストラクターに追加optionsを渡すことができます。 たとえば、ユーザーの名前、メールアドレス、電話番号、配送先住所をリクエストするには、次のようにします。

 var options = { requestPayerName: true, requestPayerEmail: true, requestPayerPhone: true, requestShipping: true }; var paymentRequest = new PaymentRequest(methodData, details, options);

また、複数の配送オプションを定義し、顧客の住所に基づいて動的に表示されるオプションを制御することもできます。 この例は、Glitchで見つけることができます。

ユーザー体験

ペイメントリクエストが企業にもたらすメリットについて、いくつかの印象的な統計が見られ始めています。 Googleは最近、ファッションブランドのJ.Crewが、ユーザーの50％が支払いリクエストフローを通過し、トランザクション時間を75％短縮したことを発見したことを共有しました。

支払い要求をショッピング体験に統合する方法はあなた次第ですが、一般的な方法は、顧客が最初にログインすることなく、「エクスプレスチェックアウト」や「今すぐ購入」オプションなどを提供することです。 必要に応じて、支払い要求UIを使用してユーザーの連絡先の詳細を収集し、ユーザーが購入したら、後で使用するためにアカウントを作成する機会を提供できます。

必要に応じて、支払い要求UIを表示する前に、顧客がすでに有効な支払い方法を設定しているかどうかを最初に確認できます。 これを行うには、 canMakePaymentを呼び出すことができます：

 if (paymentRequest.canMakePayment) { paymentRequest.canMakePayment().then(function(result) { if (result) { // User has an active payment method } else { // No active payment method yet (but they could add one) } }).catch(function(error) { // Unable to determine }); }

バックエンド統合

支払いを受け取るためのユーザーインターフェイスを設定する方法を見てきましたが、実際にバックエンドで支払いを処理するにはどうすればよいですか？

ほとんどのWebサイトは、支払い自体（多くの注意とPCI DSSコンプライアンスを必要とするもの）を処理しませんが、サードパーティの支払いゲートウェイ（PG）または支払いサービスプロバイダー（PSP）を使用します。 多くのPaymentGatewayは、Payment RequestAPIの特定のサポートをすでに導入しています。 彼らはあなたがあなたのページに含める彼ら自身のスクリプトを介して支払い要求を開始するかもしれません。そしてそれはデータが安全に送られそしてあなたがそれをあなた自身で扱う必要がないことを確実にするのを助けます。 また、iFrameまたはリダイレクトソリューションを提供する場合もあります。 続行するための最良の方法は、支払い要求を組み込むことを推奨する方法を支払いゲートウェイに確認することです。

ペイメントアプリの統合

これまで、カード決済について説明してきました。 ただし、Payment Request APIは、Samsung Pay、Pay with Google（Android Payを組み込んだ）、ApplePayなどのモバイル決済アプリもサポートしています。

お客様がこれらのアプリのいずれかで支払いを行えるようにするということは、ブラウザに（初めてでも）詳細を再入力しなくても、アプリに保存したカードを使用できることを意味します。 これらのアプリを使用すると、顧客がカードの裏側からCVC（カード検証コード、CVVとも呼ばれる）を再入力する必要がないため、より迅速に使用できます。 最後に、元のカードの詳細を送信せず、使い捨てトークンのみを送信するため、セキュリティ上の利点が追加され、潜在的な傍受やリプレイ攻撃から保護されます。

顧客が選択した支払い方法として支払いアプリを選択すると、ブラウザーはアプリが提供する支払いシートに切り替えて、支払いを確認します。 サードパーティのアプリは通常、デバイスがサポートしている場合、顧客の指紋または虹彩スキャンを受け入れて支払いを確認します。

各支払いアプリには独自の指示がありますが、一般的な考え方は同じです。 独自の特別なURLを使用して、潜在的な支払い方法としてそれらを識別し、 dataフィールドに必要な構成を渡すことができます。 たとえば、Samsung Payをサポートするには、 methodData配列に次のようなコードを含めます。

 var methodData = [ { supportedMethods: 'https://spay.samsung.com', data: { // Samsung Pay specific data here } }, … // Other payment methods ];

一般的に、これらのアプリを支払いゲートウェイと統合するには、「ゲートウェイトークン」方式と「ネットワークトークン」方式の2つの方法があります。 それをサポートするサードパーティのサービスを使用している場合は、ほとんどの場合、ゲートウェイトークンモードを使用します。このモードでは、ペイメントアプリサービスがユーザーに代わってペイメントゲートウェイに電話をかけます。 または、SDKを使用してPaymentGatewayへのトークンの送信を安全に処理するネットワークトークン方式を使用することもできます。 ペイメントゲートウェイおよび/またはペイメントアプリプロバイダーは、詳細を提供できる必要があります。

Googleは最近、AndroidPayと顧客のGoogleアカウントに保存されているカードを組み込んだGooglePaymentAPIを発表しました。

Apple Payは現在、独自のJavaScriptソリューションであるApple PayJSを使用しています。 ただし、Googleの開発者は、標準のPayment RequestAPIを介して使用できるラッパーを作成しました。

次は何ですか？

Web Payments Working Groupは、Payment RequestAPIにとどまりません。 Webアプリケーションがサードパーティの支払いアプリとして機能できるようにするPaymentHandler APIなど、他の標準についても作業が進行中です。 議論されている他のトピックには、トークン化に関する可能な標準化と、ギフトカードなどをサポートするための支払い要求の機能が含まれます。 あなたが開発についていくことを望むならば、ここに公開メーリングリストがあります。 私たちは一緒に、過去の苛立たしいチェックアウト体験を解決し、ウェブ決済革命のビジョンを達成できることを願っています！

その他のリソース

• 「W3CのWebPayments Wiki」、GitHub
• 「W3CのPaymentRequest API開発者情報」、GitHubもFAQを参照
• 「WebPayments101：Short Payment Request Coding Tutorial」、Glitch
• 「PaymentRequestAPIの詳細」、Google Developers
• 「PaymentRequestAPI Dev Guide」、Microsoft Edge
• 「WebPaymentsを使用してWebサイトでSamsungPayを受け入れる方法」、Winston Chen、Medium