Halaman ini diterjemahkan oleh Cloud Translation API.

Google Pay untuk Web 201: Lanjutan

1. Pengantar

Codelab ini adalah kelanjutan dari Google Pay API untuk Web 101: Dasar-Dasar 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 waktu satu menit untuk mendaftar di Konsol Google Pay & Wallet, jadi sebaiknya lakukan sekarang.

Ikuti langkah-langkah menggunakan Project IDX

2. Penyesuaian tombol

Berikut adalah ringkasan singkat tentang ButtonOptions. Lihat dokumentasi untuk mendapatkan 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	memesan, membeli, checkout, berdonasi, memesan, membayar, biasa, berlangganan

Cari metode renderGooglePayButton() di file main.js 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() menggunakan argumen konfigurasi ButtonOptions yang memungkinkan Anda menentukan tampilan dan perilaku tombol yang diinginkan.

3. Callback data pembayaran

Klien pembayaran menyediakan mekanisme bagi Anda untuk mendaftarkan fungsi yang akan ditangani 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 ke bagian akhir.

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 intent 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 mengimplementasikan 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 akan menggunakan peluang ini untuk memproses transaksi dengan gateway menggunakan token yang ditemukan di paymentData di 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 sheet pembayaran.
Fungsi onPaymentDataChanged() harus menampilkan promise yang me-resolve objek PaymentDataRequestUpdate yang menentukan info transaksi baru, opsi pengiriman, dan error untuk memperbarui sheet pembayaran.
redemptionCodes adalah sekumpulan kode promosi yang dimasukkan ke dalam sheet 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 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

Meninjau checklist integrasi

Referensi lainnya

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