Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

このページは Cloud Translation API によって翻訳されました。

Google Pay でウェブでの購入手続きをスムーズにする

Google Pay API を使用すると、Google アカウントに保存されている支払い情報を使ってどこでも支払いを行えるようになります。このラボでは、ウェブ用の Google Pay クライアントライブラリを利用して、迅速で便利、安全なエクスペリエンスを実現することで、シンプルなサンプルオンラインストアの購入手続きを改善し、コンバージョンと顧客満足度の向上を図ります。

Auto T-Shirt Shop は、人工知能の最新の進歩を活かし、スタイル設定、天候、時期、ファッショントレンドなどの情報を使用して、お客様に最も適した商品を提案する革新的な店舗です。

この店舗のエンゲージメントに関する指標は、ルーフで示されています。残念ながら、この指標には購入手続きにおける多くの放棄が反映されています。プロジェクトのオーナーの 1 人が、Google Pay が同様のサイトで有望な結果を示した動画を見たことを思い出し、統合を任せることに決めました。

作業内容

この Codelab では、Google Pay を既存のサイトに統合する方法について説明します。ここでは、Google Pay でサポートされているお支払い方法を使用して支払いができるかどうか、支払いボタンの配置とデザイン、取引の実行などについて説明します。

学習内容

Google Pay を既存の購入手続きページに統合する方法
ご希望のお支払い方法を選択する方法
ユーザーが Google Pay でのお支払いに対応しているかどうかを確認する方法

必要なもの

インターネットに接続されているパソコン
JavaScript の基礎知識

glitch.com でサンプルサイトを実行する

できるだけ早く起動して実行できるように、この Codelab は glitch.com で公開されています。Glitch は、ウェブアプリケーションの構築と配信に使用できるコードエディタ、ホスティング機能、デプロイ機能を備えた、無料のウェブベースの環境です。

はじめに、この Codelab のコピーを設定済みの Glitch で新しい開発環境をプロビジョニングするために、以下のボタンを使用してください。

Glitch.com で開発環境を開始する

ここから、Glitch のコードエディタを使用してファイルを変更できます。上部にある [Show] メニューを使用してアプリケーションの配信を開始し、[In a New Window] を選択します。

サンプルサイト間をスクロールする

ご覧のように、リポジトリにはシンプルなファイル構造があります。この Codelab の主な目的は、フレームワーク、ライブラリ、ツールを選択しても、この統合を既存のアプリケーションと将来のアプリケーションに適応できるようにすることです。

サイトにアクセスする

このデモマーケットプレイスは、購入手段を追加する前に、既存のアプリケーションや潜在的なアプリケーションの外観に似ているように作成されています。実際には、このデモアプリケーションに取り組むことをおすすめしますが、この Codelab を使用して、Google Pay を既存のアプリケーションに統合することもできます。

まだ開始していない場合は、デモサイトを開きます。それには、Glitch を使用している場合は [Show] ボタンをクリックするか、ローカルウェブサーバーが動作している URL を開きます。

デモサイトに驚くようなことは何もありません。商品の詳細ページ。画像、価格、説明、いくつかのセレクタ、架空の架空の通常の決済フォームを表示するためのボタンがある。

このラボでは、このフローを Google Pay による 2 クリックエクスペリエンスに置き換えることを目的としています。

計画しましょう！

この統合について理解を深めるため、このプロセスは次の基本的な手順から構成されています。

ライブラリを読み込む
Google Pay でのお支払いが可能かどうかを確認する
Google Pay で支払うボタンを表示する
支払いリクエストを作成して送信する
結果を収集する

`script` タグを追加する

Google Pay API の使用を開始するには、まず JavaScript ライブラリを読み込みます。これを行うには、API を呼び出す予定の HTML ファイルに script タグを含め、外部 JavaScript ライブラリを指す src 属性を含めます。

この Codelab では、index.html ファイルを開きます。スクリプトタグがすでに追加されています。

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

src に加えて、他の 2 つの属性が追加されました。

async を使用すると、スクリプトはページの他の部分と並行して読み込まれて実行されるため、ドキュメントの最初の読み込み時間には影響しません。
onload は、スクリプトが読み込まれるまで、このライブラリに依存するコードの実行を遅延させるのに役立ちます。この処理が完了すると、この属性で指定した関数が実行されます。この場合、関数は onGooglePayLoaded です。

API クライアントをインスタンス化する

スクリプトが読み込まれると、このライブラリを使用するためのすべての準備が整います。まず、クライアントオブジェクトをインスタンス化します。このオブジェクトは、後で Google Pay API を呼び出すために使用します。

index.js ファイルを編集します。このファイルは、このプロジェクトのファイル構造の一部になっています。onGooglePayLoaded 関数を次のコードに置き換えます。

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

支払いクライアントは PaymentOptions オブジェクトで初期化されます。environment を TEST に設定すると、統合全体でダミーのお支払い情報をテストできます。実際のトランザクションをサポートするオペレーションを作成する準備ができたら、environment プロパティを PRODUCTION に更新できます。

概要

Google Pay API JavaScript クライアントライブラリが読み込まれました。ここで、API 呼び出しを行うように構成しましょう。

Codelab の残りの部分では、次のコードの変更をすべて index.js ファイルに対して行います。

骨格

Google Pay API と通信のたびに、対象の API バージョンなど、さまざまな設定パラメータをリクエストに含める必要があります。この Codelab の目的上、このオブジェクトには、アプリケーションで受け入れられる支払い方法に関する情報も含まれています。最終的な構造は次のようになります。

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

プロパティ allowedPaymentMethods はお支払い方法のリストを取得します。お支払い方法ごとに、次のプロパティを含める必要があります。

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

対象のユーザーが Google Pay で支払いを行えるかどうかを判断するには、type プロパティと parameters プロパティのみが必要です。

お支払い方法の設定

この例では、1 つの構成のみを受け入れ、Mastercard と Visa のカード支払いを「トークン化」と「メインのアカウント番号」（PAN）の両方の形式で指定します。

index.js での構成は次のようになります。

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

カード認証メカニズムについて: お支払い時に、決済代行業者またはゲートウェイに対して取引情報がどのように認証されるかに基づいてカードを選択できます。

カード会員番号（PAN）認証を使用すると、カード番号と有効期限の月と年が決済代行業者に送信されます。これにより、購入者は Google アカウントに関連付けられている以前に保護されたカードを使用できます。
ダイナミック クリプトグラムベースの認証は、カードのトークン化と組み合わせて使用します。これは、顧客のカード情報を、顧客以外は把握できないランダムな値に置き換える仕組みです。動的クリプトグラムと組み合わせることで、プロセッサに送信されるトークンが常にトランザクションごとに異なるため、これらのオペレーションのセキュリティが大幅に向上します。

まとめ

まとめ。

ウェブサイトで受け入れるお支払い方法を 1 つ定義し、バージョン 2.0 の API を使用します。結果として、次のような構成になります。

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

基本的な構成ができたところで、次は面白い部分を見てみましょう。

Google Pay の主な目的の一つは、より迅速で便利な購入手続きを提供することです。これは、ユーザーが Google Pay を使用できる状況だけでなく、それを利用できない状況にも適用されます。isReadyToPay リクエストを使用すると、Google Pay での支払いの可否と、それに応じてサイトでエクスペリエンスを変更する機会を判断することができます。

貴社のユーザーは Google Pay でお支払いいただけますか？

まず、サイトで支払いを行う特定のユーザーが Google Pay を使用できるかどうかを確認します。そのためには、Google Pay API のバージョンと、サイトで利用できるお支払い方法を指定する必要があります。これは、前のステップで定義した基本構成オブジェクトの内容と同じです。

index.js の onGooglePayLoaded() 関数内に次の内容を貼り付けます。

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

呼び出しが失敗した場合、またはレスポンスが失敗して返された場合、Google Pay 内ではこれ以上の対応は必要ありません。この場合は、他の支払い方法をサポートする追加の UI を表示することをおすすめします。

一方、レスポンスが成功した場合は、Google Pay の使用をユーザーに許可するための準備が整ったため、ユーザーのアクティベーション（ボタンクリックなど）によって支払いプロセスを開始するためのボタンを追加できます。

Google Pay で支払うボタンを追加する

支払い処理には、Google Pay のブランドガイドラインに沿ったボタンを使用することもできますが、Google Pay API を使用して生成することをおすすめします。これにより、ブランドガイドラインが正確に使用されているだけでなく、ローカライズなど、ボタンに組み込まれた他の改善点も活用できます。

ボタンを生成するには、PaymentsClient オブジェクトの createButton メソッド（ButtonOptions など）を使用してボタンを構成します。

index.js の createAndAddButton() 関数内に次の内容を貼り付けます。

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

createButton を使用する場合に必要なプロパティは onClick だけです。ユーザーがボタンを有効にするたびにトリガーするコールバックオブジェクトまたは関数を決定するために必要です。buttonColor と buttonType では、ボタンの外観をカスタマイズできます。アプリのテーマと UI 要件に基づいてそれらを調整します。

このボタンを作成したら、DOM 内の適切なノードに追加するだけです。この例では、buy-now で識別される div ノードが使用されます。

ボタンのクリックイベントを処理する関数も定義したとします。次のセクションでは、この関数を使用してお支払い方法をリクエストします。

支払いリクエストを準備する

この時点で、Google Pay API の読み込みが完了しており、サイトのユーザーが Google Pay を使用して支払いを行えることを確認しました。その結果、UI に Google Pay 支払いボタンが表示され、ユーザーは取引を開始する準備が整いました。いよいよ、ログインしている個々のユーザーが利用できるお支払い方法を記載した最終的なお支払いシートを読み込みます。

先ほどと同様に、この呼び出しでは isReadyToPay リクエストの定義中に、新しい基本オブジェクトに加えて、先ほど定義した基本設定オブジェクト（apiVersion、apiVersionMinor、allowedPaymentMethods）のプロパティも必要となります。今回、お客様のお支払い方法に新しいプロパティ tokenizationSpecification と parameters が追加されました。さらに、transactionInfo と merchantInfo を追加する必要があります。

お支払い方法に必要なその他の情報を含める

まずは、以前使用したカードのお支払い方法のコピーを作成します。このカードのお支払い方法には、選択したお支払い方法に関連するデータの処理方法と、実際の取引に必要な追加データ要件（この例では完全な請求先住所と電話番号）を定義する tokenizationSpecification プロパティが必要です。

`tokenizationSpecification` プロパティ

トークン化仕様により、ユーザーが選択したお支払い方法の処理方法とトランザクションの完了方法が決まります。

サポートされている処理方法は 2 種類あります。PCI DSS 準拠サーバー内で支払い取引を処理している場合は、DIRECT 仕様タイプを使用します。この例では、支払いゲートウェイを使用して支払いを処理するため、PAYMENT_GATEWAY 仕様タイプを設定します。