Geekly Articles each Day

サイトでApple Pay経由で支払いを接続します

現在、当社のWebサイトやiviアプリケーションを含め、モバイルデバイスでの視聴者を増やす傾向が明らかになっています。 インターネット上でのモバイルデバイスからの購入の割合も増加しています。 デスクトップとは対照的に、従来の支払いオプションに加えて、 Apple Pay 、 Android Pay 、 Samsung Payなどのモバイル支払いシステムが利用可能です。 これらのシステムは、銀行カードを受け入れる端末での支払いだけでなく、アプリケーションやウェブサイトでの支払いにも使用できます。


ivi Webバージョンでモバイル決済の実装を開始し、モバイルサイトとApple Payシステムを選択しました。

Apple Payは、モバイルデバイスが店舗やインターネットで支払いを行えるようにするAppleのモバイル支払いシステムです。 ユーザーはカードを電話にバインドし、支払い時に指紋またはデジタルコードによる支払い確認のみが必要です。

この記事では、Apple Pay JSライブラリーの使用について説明します。

ライブラリは、サイトでApple Payを使用するように設計されています。 Apple Pay JS APIのサポート対象：


サイトでApple Payを介して支払いを受け取るには、次のものが必要です。


次に、マーチャントIDを登録し、マーチャントID証明書と支払い処理証明書を作成し、Apple Payが使用されるドメインを確認する必要があります。 プロセスの説明は、Paytureからの指示にあります。


検証中に完全修飾ドメイン名を指定する必要があることに注意する価値があります。 ドメインマスクは指定できません。

すべての準備作業の後、サイトでApple Payの統合を進めることができます。 統合プロセスは、3つの主要な部分で構成されています。


請求セッションの作成


Apple Payで支払いボタンを表示する前に、デバイスでApple Payが利用可能かどうかを確認する必要があります。 次のように実装されます。

if (window.ApplePaySession) {   //Apple Pay JS API  }

次に、Apple Pay JS APIを使用して、ユーザーがApple Payに関連付けられたアクティブなカードを持っているかどうかを確認できます。 2つのメソッドcanMakePaymentsおよびcanMakePaymentsWithActiveCardます。 1つ目はApple Payサポートの事実のみをチェックし、2つ目はさらにApple Payに関連付けられたカードが少なくとも1つあるかどうかを確認できるようにします。

たとえば、私たちの場所では、これらのチェックを使用して、Apple Pay経由で他の支払い方法の上または下に支払いボタンを表示することを決定します。 追加されたカードがない場合は、[Apple Payの設定]ボタンが表示されます。ボタンをクリックすると、ウォレットセクションの電話設定が開きます。 その結果、ユーザーはサイトを離れるので、支払いプロセスを中断しないでください。そのため、ボタンはメインの支払いタイプの下にあり、画面をスクロールしないと見えません。

カスタマイズされたApple PayとカスタマイズされていないApple Payの支払いページ：



ページにボタンが表示されたら、支払いダイアログを表示するために支払いセッションを作成できます。 セッションは、明示的なユーザーアクションによってのみ作成できます。 ボタンをクリックすると、次のコードを実行する必要があります。

 const paymentRequest = {  total: {      label: 'ivi.ru',      amount: 50  },  countryCode: 'RU',  currencyCode: 'RUB',  merchantCapabilities: ['supports3DS'],  supportedNetworks: ['masterCard', 'visa'] }; const applePaySession = new window.ApplePaySession(1, paymentRequest);

この例は、 ApplePayPaymentRequestオブジェクトのプロパティの最小セットを示しています。 購入に関する詳細情報を表示するには、このオブジェクトの他のプロパティを使用する必要があります。

支払いセッションイベントを処理するには、少なくとも次の方法を実装する必要があります。


ApplePaySessionオブジェクトを作成しApplePaySession 、beginメソッドを呼び出して支払いダイアログを表示する必要がありApplePaySession 。

 applePaySession.begin();

その結果、ユーザーには以下が表示されます。


フォームがonvalidatemerchantイベントがonvalidatemerchantます。 支払いを継続するために、次のステップを実施しています。

支払いセッションの検証


validationURLフィールドは、 onvalidatemerchantイベントパラメーターに含まれています。 このバックエンドから、マーチャントID証明書で署名されたデータを送信する必要があります。

 applePaySession.onvalidatemerchant = (event) => {  //       performValidation(event.validationURL)      .done(          (merchantSession) => {              //              this.applePaySession.completeMerchantValidation(merchantSession);          }      ).fail(      () => {          this.applePaySession.abort();          //      ..      }  ); };

performValidationメソッドは、検証リクエストからプロミスを返します。 このリクエストのハンドラーは私たちの側にあり、実装は次のとおりです。onvalidatemerchantイベントパラメーターからポストリクエストがURLに送信されます。

リクエストの本文にはjsonが含まれています。

 {   "merchantIdentifier": "MERCHANT_IDENTIFIER",   "domainName": "HOST",   "displayName": "DISPLAY_NAME" }

パラメータMERCHANT_IDENTIFIERおよびDISPLAY_NAMEは開発アカウントから取得され（最初に設定された）、HOSTは支払い元のドメインです。

要求は、マーチャントID証明書で署名する必要があります。 Jsonが答えになりますが、返送する必要もあります。 この応答を受け取った後、支払いセッションでcompleteMerchantValidationメソッドを呼び出します。

セッション検証プロセスが完了しました。ユーザーは、指またはコードで支払いを確認する必要があります。 その後、 onpaymentauthorizedイベントがonpaymentauthorizedます。 支払いの段階に進みます。

お支払い


onpaymentauthorizedイベントonpaymentauthorizedは、支払いゲートウェイに転送する必要がある支払いトークンを持つオブジェクトが含まれています。 トークンに含まれるすべての情報は、 ドキュメントに記載されています 。

支払いが完了すると、クライアント側で支払いを完了します。

 applePaySession.completePayment(success);

成功には、2つのステータスwindow.ApplePaySession.STATUS_SUCCESSまたはwindow.ApplePaySession.STATUS_FAILURE window.ApplePaySession.STATUS_SUCCESSかをwindow.ApplePaySession.STATUS_FAILURE必要があります。

これにより、Apple Payによる支払いプロセスが完了します。 Apple Pay JSの詳細については、 公式ドキュメントをご覧ください。

Source: https://habr.com/ru/post/J344744/

More articles:


All Articles