Halaman ini diterjemahkan oleh Cloud Translation API.

Dasar-Dasar Google Pay API untuk Web: Dasar-Dasar

1. Pengantar

Yang akan Anda build

Setelah menyelesaikan codelab ini, Anda akan memiliki situs minimum viable dengan integrasi Google Pay yang berfungsi. Project ini mengambil token pembayaran yang dapat dikirim ke penyedia layanan pembayaran untuk diproses.

Yang akan Anda pelajari

Cara memuat dan mengonfigurasi Google Pay API
Cara menampilkan tombol Google Pay dan menangani klik
Cara meminta token pembayaran dari Google Pay

Yang Anda butuhkan

Editor teks pilihan Anda untuk mengedit file HTML dan JavaScript.
Browser web Google Chrome, atau cara lain untuk menguji situs lokal.
Untuk produksi, Anda memerlukan merchantId Google Pay. Hanya perlu waktu satu menit untuk mendaftar di Konsol Google Pay & Wallet, jadi sebaiknya lakukan sekarang.

Ikuti langkah-langkah menggunakan Project IDX

2. Membuat halaman HTML

Membuat file project

Buat folder di komputer Anda bernama gpay-web-101 dan di dalam folder tersebut, buat dua file teks kosong bernama index.html dan main.js.Struktur direktori Anda akan terlihat seperti ini:
```
gpay-web-101/
  index.html
  main.js
```

Buka index.html di IDE pilihan Anda dan tambahkan kode berikut:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay API for Web 101</title>
</head>

<body>
  <div id="gpay-container"></div>
  <p>Transaction info and errors will be logged to the console.</p>
  <script type="text/javascript" src="main.js"></script>
  <script
    async src="https://pay.google.com/gp/p/js/pay.js"
    onload="onGooglePayLoaded()">
  </script>
</body>

</html>

Penjelasan kode

DIV kosong ditambahkan ke halaman dengan ID gpay-container. Elemen DOM ini akan menjadi elemen induk tempat tombol Google Pay ditambahkan. Anda dapat memosisikan elemen ini di tata letak situs jika sesuai.
Tag skrip main.js ditempatkan di DOM setelah elemen gpay-container. Hal ini diperlukan untuk memastikan DIV penampung ada di DOM sebelum main.js mengkueri DIV tersebut. Selain itu, skrip bersifat sinkron untuk memastikan skrip dimuat sebelum pay.js dimuat karena metode onGooglePayLoaded() harus ada sebelum pemuatan selesai. Ada cara lain untuk mendapatkan efek yang sama, tetapi tidak akan dibahas di sini.
Terakhir, pay.js dimuat secara asinkron dan mengonfigurasi onGooglePayLoaded() sebagai pengendali onload. Metode ini akan ditentukan di main.js.

3. Mengonfigurasi Google Pay

Permintaan pembayaran Google Pay memerlukan objek permintaan. Objek yang ditentukan di sini sebagai baseGooglePayRequest berisi setelan umum minimum untuk semua permintaan. Setelan tambahan akan ditambahkan bergantung pada permintaan yang dibuat yang akan kita tinjau dalam codelab ini.

Tambahkan konstanta konfigurasi Google Pay ke file main.js kosong:

//=============================================================================
// Configuration
//=============================================================================

// The DOM element that the Google Pay button will be rendered into
const GPAY_BUTTON_CONTAINER_ID = 'gpay-container';

// Update the `merchantId` and `merchantName` properties with your own values.
// Your real info is required when the environment is `PRODUCTION`.
const merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo
};

// Prevent accidental edits to the base configuration. Mutations will be
// handled by cloning the config using deepCopy() and modifying the copy.
Object.freeze(baseGooglePayRequest);

Penjelasan kode

Tetapkan variabel konstan GPAY_BUTTON_CONTAINER_ID ke ID elemen DOM yang digunakan di halaman HTML sebagai penampung induk untuk tombol Google Pay.
Buat objek konfigurasi baseGooglePayRequest dengan setelan yang relevan untuk aplikasi Anda. Setiap properti dan nilai dapat ditemukan di dokumentasi referensi. Nilai yang ditampilkan dalam contoh ini mungkin cocok atau tidak cocok dengan kebutuhan Anda, jadi tinjau dengan cermat.
Perbarui properti merchantId dan merchantName dengan nilai Anda sendiri. Kolom ini bersifat opsional jika lingkungannya adalah TEST.

Resource

Postingan blog: Ingin checkout yang lebih lancar dengan Google Pay? Konfigurasikan opsi pembayaran Anda.
Referensi API: Dokumentasi objek permintaan Google Pay API
Referensi API: Lihat PaymentMethod untuk mengetahui informasi selengkapnya tentang metode otorisasi yang diizinkan, jaringan kartu yang diizinkan, dan spesifikasi tokenisasi termasuk nilai gateway yang tepat.

4. Menambahkan klien pembayaran

Klien pembayaran digunakan untuk membuat permintaan pembayaran dan mendaftarkan callback. Dalam codelab ini, kita hanya akan membuat permintaan pembayaran. Selain itu, Anda dapat mengonfigurasi PaymentDataCallbacks untuk menangani saat data pembayaran telah berubah atau otorisasi telah berubah. Namun, topik lanjutan ini tidak dibahas dalam codelab ini.

Tambahkan kode klien ini ke bagian bawah main.js:

//=============================================================================
// Google Payments client singleton
//=============================================================================

let paymentsClient = null;

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo,
      // todo: paymentDataCallbacks (codelab pay-web-201)
    });
  }

  return paymentsClient;
}

Penjelasan kode

Variabel paymentsClient akan menyimpan instance ke klien setelah dibuat. Variabel tidak diakses langsung oleh kode kita, tetapi selalu oleh metode getGooglePaymentsClient().
Metode getGooglePaymentsClient() memeriksa apakah klien sudah dibuat instance-nya dan menampilkan instance tersebut. Jika sebelumnya tidak dibuat instance-nya, instance akan dibuat, disimpan, dan ditampilkan. Metode ini memastikan bahwa hanya satu instance yang dibuat dan digunakan selama masa aktif skrip ini.
Untuk membuat instance klien, metode PaymentsClient() dipanggil. Dalam contoh ini, kita memberi tahu klien bahwa kita berada di lingkungan TEST. Alternatifnya adalah PRODUCTION. Namun, TEST adalah default dan dapat dihilangkan.

5. Menambahkan helper

Fungsi bantuan berikut akan digunakan nanti dalam skrip dan telah ditambahkan hanya untuk meningkatkan keterbacaan dan pemeliharaan kode.

Tambahkan fungsi bantuan ke bagian bawah main.js:

//=============================================================================
// Helpers
//=============================================================================

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePaymentButtonClicked
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

Penjelasan kode

deepCopy() adalah utilitas yang menggunakan serialisasi dan deserialisasi JSON untuk membuat deep copy objek yang disediakan. Ini adalah cara yang mudah untuk meng-clone objek tanpa perlu khawatir tentang referensi bersama.
renderGooglePayButton() adalah utilitas yang memanggil metode library createButton() untuk menampilkan tombol Google Pay. Argumen yang diteruskan adalah serangkaian opsi yang menentukan perilaku tombol seperti mendaftarkan fungsi onGooglePaymentButtonClicked() untuk menangani klik tombol.

6. Menambahkan pengendali peristiwa

Dalam skrip ini, kita mengonfigurasi dua pengendali peristiwa. Yang pertama dipanggil saat library pay.js selesai dimuat dan yang lainnya dipanggil saat tombol Google Pay diklik.

Tambahkan pengendali peristiwa ke bagian bawah main.js:

//=============================================================================
// Event Handlers
//=============================================================================

function onGooglePayLoaded() {
  const req = deepCopy(baseGooglePayRequest);

  getGooglePaymentsClient()
    .isReadyToPay(req)
    .then(function(res) {
      if (res.result) {
        renderGooglePayButton();
      } else {
        console.log("Google Pay is not ready for this user.");
      }
    })
    .catch(console.error);
}

function onGooglePaymentButtonClicked() {
  // Create a new request data object for this request
  const req = {
    ...deepCopy(baseGooglePayRequest),
    transactionInfo: {
      countryCode: 'US',
      currencyCode: 'USD',
      totalPriceStatus: 'FINAL',
      totalPrice: (Math.random() * 999 + 1).toFixed(2),
    },
    // todo: callbackIntents (codelab gpay-web-201)
  };

  // Write request object to console for debugging
  console.log(req);

  getGooglePaymentsClient()
    .loadPaymentData(req)
    .then(function (res) {
      // Write response object to console for debugging
      console.log(res);
      // @todo pass payment token to your gateway to process payment
      // @note DO NOT save the payment credentials for future transactions
      paymentToken = res.paymentMethodData.tokenizationData.token;
    })
    .catch(console.error);
}

Penjelasan kode

onGooglePayLoaded() dipanggil saat skrip pay.js telah selesai dimuat seperti yang ditentukan dalam file HTML. Metode isReadyToPay() dipanggil untuk menentukan apakah akan menampilkan tombol Google Pay atau tidak. Jika konsumen siap membayar (artinya mereka telah menambahkan metode pembayaran ke Google Wallet), tombol Google Pay akan dirender.
onGooglePaymentButtonClicked() dipanggil saat tombol Google Pay diklik. Metode ini memanggil metode library loadPaymentData() yang digunakan untuk mengambil token pembayaran. Setelah memiliki token pembayaran, Anda akan mengirimkannya ke gateway pembayaran untuk memproses transaksi. transactionInfo menjelaskan transaksi yang harus diproses dengan klik tombol ini.

7. Kesimpulan

Selamat, Anda telah menyelesaikan Codelab ini. Anda telah mempelajari cara mengintegrasikan API Google Pay ke dalam situs.

Menjalankan project

Menguji dengan Google Chrome

Dengan menggunakan browser web Google Chrome, buka index.html menggunakan File > Open File... dari menu utama Chrome. Chrome akan mengeksekusi main.js saat project dibuka dengan cara ini. Browser web lain mungkin tidak mengizinkan eksekusi JavaScript.

– atau –

Menguji dengan server web lokal

Jika Anda telah menginstal Python, jalankan python3 -m http.server dari perintah terminal di folder pay-web-101 root.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Kemudian, buka situs Anda di http://localhost:8000.

Tujuan berikutnya

Referensi lainnya

Gabung dalam percakapan di channel#payments di Discord
Ikuti @GooglePayDevs di X
Tonton video terkait Google Pay di YouTube