Google Pay API for Web 201: Advanced

1. Pengantar

Codelab ini adalah kelanjutan dari Google Pay API for Web 101: Basics dan mengandalkan kode yang ditulis dalam codelab tersebut. Untuk menyelesaikan codelab ini, pastikan Anda menyelesaikan codelab tersebut terlebih dahulu.

Yang akan Anda pelajari

Cara menyesuaikan tombol Google Pay
Cara memulai proses pembayaran
Cara mengonfirmasi status otorisasi pembayaran
Cara menangani perubahan alamat pengiriman
Cara menangani kode penukaran

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 satu menit untuk mendaftar di Konsol Google Pay & Wallet, jadi sebaiknya selesaikan sekarang.

Ikuti langkah-langkahnya menggunakan Firebase Studio

2. Penyesuaian tombol

Berikut ringkasan singkat tentang ButtonOptions. Lihat dokumentasi untuk penjelasan yang lebih mendetail

Opsi	Kebutuhan	Nilai
onClick	Wajib	Nama pengendali peristiwa JavaScript
allowedPaymentMethods	Opsional	`PaymentMethod[]`
buttonColor	Opsional	default, hitam, putih
buttonLocale	Opsional	Kode ISO 639-1 dua huruf. Lokalitas yang didukung mencakup en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk, dan zh.
buttonRadius	Opsional	0 hingga 100
buttonRootNode	Opsional	HTMLDocument atau ShadowRoot
buttonSizeMode	Opsional	statis, isi
buttonType	Opsional	buku, beli, checkout, berdonasi, pesan, bayar, polos, berlangganan

Cari metode renderGooglePayButton() di file main.js Anda dan ganti dengan kode yang tercantum di sini.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

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

Penjelasan kode

Metode library createButton() mengambil argumen konfigurasi ButtonOptions yang memungkinkan Anda menentukan tampilan dan perilaku tombol.

3. Callback data pembayaran

Klien pembayaran menyediakan mekanisme bagi Anda untuk mendaftarkan fungsi yang akan menangani saat peristiwa tertentu terjadi. Yang pertama adalah otorisasi pembayaran dan yang kedua adalah perubahan data pembayaran.

Temukan komentar // todo: paymentDataCallbacks di main.js dan ganti dengan kode ini.

paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},

Kemudian, temukan bagian Event Handlers dari main.js dan tambahkan kode berikut di akhir bagian.

function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}

Terakhir, temukan komentar // todo: callbackIntents dalam main.js dan ganti komentar dengan kode ini. Dalam codelab ini, kita akan menerapkan keempat maksud tersebut.

callbackIntents: [
  'PAYMENT_AUTHORIZATION',
  'SHIPPING_ADDRESS',
  'SHIPPING_OPTION',
  'OFFER',
],
shippingAddressRequired: true,
shippingOptionRequired: true,
shippingOptionParameters: {
  defaultSelectedOptionId: 'shipping-001',
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$0.00: Free shipping',
      description: 'Free Shipping delivered in 5 business days.'
    },
    {
      id: 'shipping-002',
      label: '$1.99: Standard shipping',
      description: 'Standard shipping delivered in 3 business days.'
    },
    {
      id: 'shipping-003',
      label: '$1000: Express shipping',
      description: 'Express shipping delivered in 1 business day.'
    },
  ],
},

Penjelasan kode

Properti PaymentDataCallbacks memiliki dua sub-properti, satu untuk callback otorisasi pembayaran dan yang kedua untuk callback perubahan data pembayaran.
Jika menerapkan callback, onPaymentAuthorized diperlukan. Callback ini dipanggil saat daftar callbackIntents berisi PAYMENT_AUTHORIZATION di PaymentDataRequest.
onPaymentDataChanged bersifat opsional. Callback ini dipanggil saat daftar callbackIntents berisi OFFER, SHIPPING_ADDRESS, atau SHIPPING_OPTION di PaymentDataRequest.
Tetapkan callbackIntents di PaymentDataRequest untuk memicu kedua callback untuk codelab ini.

4. Otorisasi pembayaran

Authorize Payments digunakan untuk memulai proses pembayaran dan mengonfirmasi status otorisasi pembayaran.

Temukan fungsi onPaymentAuthorized() di main.js yang telah Anda tambahkan di langkah terakhir dan ganti dengan kode berikut.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

Penjelasan kode

Fungsi callback onPaymentAuthorized() dipanggil dengan argumen PaymentData dan harus menampilkan promise. Dalam contoh ini, fungsi memilih secara acak apakah akan menampilkan keberhasilan atau error. Dalam project Anda, Anda akan menggunakan kesempatan ini untuk memproses transaksi dengan gateway menggunakan token yang ditemukan di paymentData pada paymentData.paymentMethodData.tokenizationData.token.

5. Perubahan data pembayaran

Pembaruan Harga Dinamis memungkinkan penjual memperbarui opsi pengiriman dan informasi transaksi secara dinamis berdasarkan alamat pengiriman yang dipilih. Selain itu, Anda dapat memperbarui informasi transaksi secara dinamis berdasarkan opsi pengiriman yang dipilih.

Temukan fungsi onPaymentDataChanged() di main.js yang telah Anda tambahkan di langkah terakhir dan ganti dengan kode berikut.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

Penjelasan kode

Fungsi onPaymentDataChanged() menggunakan IntermediatePaymentData sebagai argumen. Fungsi ini dipanggil saat alamat pengiriman atau opsi pengiriman diubah di halaman pembayaran.
Fungsi onPaymentDataChanged() harus menampilkan promise yang menyelesaikan objek PaymentDataRequestUpdate yang menentukan info transaksi baru, opsi pengiriman, dan error untuk memperbarui halaman pembayaran.
redemptionCodes adalah serangkaian kode promosi yang dimasukkan ke dalam halaman pembayaran. Mencakup kode yang telah disetujui.

6. Kesimpulan

Selamat, Anda telah menyelesaikan Codelab ini. Anda telah mempelajari cara ...

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 menjalankan 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

Meninjau checklist integrasi

Referensi lainnya

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