Buat pengalaman checkout yang cepat di web dengan Google Pay

Google Pay API memberikan kesempatan kepada pengguna untuk melakukan pembayaran di mana pun, dengan menggunakan informasi pembayaran yang tersimpan di Akun Google mereka. Di lab ini, Anda memanfaatkan library klien Google Pay untuk web guna meningkatkan pengalaman checkout toko online sampel yang disederhanakan, dengan menciptakan pengalaman yang lebih cepat, nyaman, dan aman, sehingga menghasilkan lebih banyak konversi dan pelanggan lebih puas.

Toko Kaos Otomatis adalah toko inovatif yang memanfaatkan kemajuan terbaru dalam kecerdasan buatan dan menggunakan informasi seperti preferensi gaya, cuaca, waktu dalam setahun, dan tren mode untuk menyarankan item yang paling sesuai untuk Anda beli.

Metrik engagement untuk toko ini sangat mudah. Sayangnya, metrik juga mencerminkan banyak pengabaian selama proses checkout. Karena ingin menyelesaikannya, salah satu pemilik project ingat pernah melihat video yang menunjukkan hasil menjanjikan yang dihasilkan Google Pay untuk situs serupa, sehingga mereka memutuskan untuk mencobanya dan memercayai Anda untuk menangani integrasi tersebut.

Yang akan Anda buat

Codelab ini memandu Anda dalam mengintegrasikan Google Pay ke situs yang sudah ada, termasuk menentukan apakah pengguna dapat melakukan pembayaran menggunakan metode pembayaran yang didukung oleh Google Pay, penempatan dan desain tombol pembayaran, serta eksekusi transaksi.

Yang akan Anda pelajari

• Cara mengintegrasikan Google Pay ke halaman checkout yang ada
• Cara memilih metode pembayaran yang diinginkan
• Cara menentukan apakah pengguna siap membayar dengan Google Pay

Yang akan Anda butuhkan

• Komputer dengan akses internet
• Pengetahuan dasar tentang JavaScript

Menjalankan situs contoh di glitch.com

Untuk memulai dan menjalankannya secepat mungkin, codelab ini telah disediakan di glitch.com. Glitch adalah lingkungan berbasis web gratis yang menyediakan editor kode serta fitur hosting dan deployment yang dapat Anda gunakan untuk membuat dan menayangkan aplikasi web.

Untuk memulai, gunakan tombol di bawah untuk menyediakan lingkungan pengembangan baru di Glitch yang telah disiapkan dengan salinan codelab ini.

Mulai lingkungan pengembangan di Glitch.com

Setelah itu, Anda dapat menggunakan editor kode di Glitch untuk mengubah file. Mulai tayangkan aplikasi Anda dengan menggunakan menu Show di bagian atas, lalu pilih In a New Window.

Jangan gunakan Di samping Kode. Kode demo tidak akan berfungsi dari dalam iframe glitch.com.

Menelusuri situs contoh

Seperti yang dapat Anda lihat, repositori memiliki struktur file yang tidak rumit. Tujuan utama codelab ini adalah memberi Anda kemampuan untuk menyesuaikan integrasi ini dengan aplikasi yang ada dan yang akan datang, terlepas dari framework, library, atau alat yang Anda pilih untuk digunakan.

Jelajahi situs

Marketplace demo ini telah dibuat sedemikian rupa sehingga dengan rendah hati menyerupai bagaimana tampilan aplikasi yang ada atau yang potensial saat ini, sebelum Anda menambahkan sarana pembelian. Bahkan, kami merekomendasikan agar Anda menyempurnakan aplikasi demo ini. Anda dapat melanjutkan dan menggunakan codelab ini untuk mengintegrasikan Google Pay ke aplikasi Anda yang ada.

Setelah menyelesaikan codelab ini, Anda dapat menyalin dan menempelkan JavaScript ke hampir semua situs lain dan dapat menguji melakukan pembelian dengan Google Pay.

Perlu diingat bahwa untuk melakukan pembayaran yang sebenarnya, Anda harus beroperasi di lingkungan PRODUCTION, menggunakan ID penjual Google yang valid dan memanggil API ini dari domain yang sebelumnya diizinkan. Untuk mengetahui proses tersebut lebih lanjut, lihat checklist integrasi.

Sekarang, jika Anda belum melakukannya, buka situs demo seperti apa adanya saat ini. Untuk melakukannya, klik tombol Show jika Anda menggunakan Glitch atau buka URL tempat server web lokal Anda berjalan.

Situs demo bukanlah hal yang mengejutkan, bukan? Halaman detail produk, dengan gambar, harga, deskripsi, beberapa pemilih, dan tombol untuk mengarahkan Anda ke formulir pembayaran imajiner dan biasa.

Lab ini bertujuan untuk mengganti alur ini dengan pengalaman dua klik yang didukung oleh Google Pay.

Mari kita rencanakan ini!

Untuk lebih memahami integrasi ini, prosesnya dipecah menjadi langkah-langkah dasar berikut:

1. Memuat library
2. Tentukan kemampuan untuk membayar dengan Google Pay
3. Menampilkan tombol untuk membayar dengan Google Pay
4. Membuat dan mengirim permintaan pembayaran
5. Mengumpulkan hasil

Tambahkan tag script

Hal pertama yang perlu Anda lakukan untuk mulai menggunakan Google Pay API adalah memuat library JavaScript. Untuk melakukannya, sertakan tag script dalam file HTML dari tempat Anda ingin memanggil API, termasuk atribut src yang mengarah ke library JavaScript eksternal.

Untuk codelab ini, buka file index.html. Anda akan melihat bahwa tag skrip telah disertakan untuk Anda:

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

Selain src, Anda telah menambahkan dua atribut lainnya.

• async memungkinkan skrip Anda dimuat dan dieksekusi secara asinkron bersama bagian lain pada halaman, sehingga waktu pemuatan pertama dokumen Anda tidak terpengaruh.
• onload membantu Anda menunda eksekusi kode yang bergantung pada library ini hingga skrip dimuat. Setelah selesai, fungsi yang Anda tentukan dalam atribut ini akan dijalankan. Dalam hal ini, fungsinya adalah onGooglePayLoaded.

Membuat instance klien API

Setelah skrip dimuat, semuanya sudah siap bagi Anda untuk mulai menggunakan library ini. Mulai dengan membuat instance objek klien, yang akan digunakan untuk melakukan panggilan ke Google Pay API nanti.

Edit file index.js yang sudah menjadi bagian dari struktur file dalam project ini. Ganti fungsi onGooglePayLoaded dengan kode berikut.

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

Klien pembayaran diinisialisasi dengan objek PaymentOptions. Menyetel environment ke TEST memungkinkan Anda bereksperimen dengan informasi pembayaran dummy di seluruh integrasi. Jika sudah siap membuat operasi yang mendukung transaksi nyata, Anda dapat memperbarui properti environment menjadi PRODUCTION.

Penting: Untuk beroperasi di lingkungan PRODUCTION, Anda memerlukan ID penjual Google. Anda dapat memperolehnya dengan meminta akses produksi saat aplikasi siap.

Perlu diperhatikan bahwa jika Anda menggunakan Google Pay bersama dengan gateway pembayaran, ID penjual Google Anda berbeda dari akun dan ID penjual lain yang diminta oleh penyedia pembayaran.

Ringkasan

Kami telah memuat Library Klien JavaScript Google Pay API. Sekarang, mari kita konfigurasi agar dapat melakukan panggilan API untuk kita.

Semua perubahan kode berikut untuk bagian codelab lainnya akan dibuat ke file index.js.

Kerangka

Setiap kali Anda berkomunikasi dengan Google Pay API, ada sejumlah parameter konfigurasi yang perlu disertakan dalam permintaan Anda, seperti versi API yang Anda targetkan. Untuk keperluan codelab ini, objek ini juga berisi informasi tentang metode pembayaran yang diterima dalam aplikasi Anda. Struktur akhirnya terlihat seperti berikut:

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

Properti allowedPaymentMethods menggunakan daftar metode pembayaran. Untuk setiap metode pembayaran, Anda harus menyertakan properti berikut:

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

Hanya properti type dan parameters yang diperlukan untuk menentukan apakah pengguna yang bersangkutan dapat membayar dengan Google Pay.

Selanjutnya, kita akan menambahkan properti tokenizationSpecification, yang digunakan oleh panggilan PaymentDataRequest untuk menentukan cara penanganan data yang terkait dengan metode pembayaran yang dipilih. Tapi, mari kita ambil satu langkah dalam satu waktu.

Konfigurasi metode pembayaran

Dalam contoh ini, Anda hanya akan menerima satu konfigurasi, yang memungkinkan pembayaran kartu untuk Mastercard dan Visa, baik dalam formulir tokened maupun nomor rekening utama (PAN).

Berikut adalah cara menyiapkan konfigurasi Anda di index.js:

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

Anda dapat menemukan daftar lengkap parameter yang dapat digunakan untuk mengonfigurasi metode pembayaran CARD pada bagian CardParameters dalam dokumentasi.

Tentang mekanisme autentikasi kartu: Saat melakukan pembayaran, kartu dapat dipilih berdasarkan cara autentikasi informasi transaksi terhadap prosesor atau gateway:

• Saat menggunakan autentikasi nomor akun utama (PAN), nomor rekening kartu serta bulan dan tahun habis masa berlaku akan dikirim ke pemroses pembayaran. Tindakan ini memungkinkan pelanggan Anda menggunakan kartu yang sebelumnya diamankan yang terkait dengan Akun Google mereka.
• Autentikasi berbasis kriptografi berfungsi bersama dengan tokenisasi kartu, yaitu mekanisme yang menggantikan informasi kartu pelanggan Anda dengan nilai acak yang tidak dapat dipahami oleh siapa pun selain penerbit kartu pelanggan Anda. Hal ini, dikombinasikan dengan kriptografi dinamis, memastikan bahwa token yang dikirim ke prosesor selalu berbeda untuk setiap transaksi, sehingga meningkatkan keamanan secara signifikan dalam operasi ini.

Merangkum pemahaman

Rangkumannya.

Anda telah menentukan satu metode pembayaran yang akan diterima di situs web, dan Anda akan menggunakan API versi 2.0. Konfigurasi yang dihasilkan akan terlihat seperti berikut:

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

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

Setelah konfigurasi dasar Anda siap, mari kita bahas bagian yang menyenangkan.

Salah satu tujuan utama Google Pay adalah memberikan pengalaman checkout yang lebih cepat dan nyaman kepada pengguna Anda. Hal ini tidak hanya berlaku untuk situasi saat pengguna dapat menggunakan Google Pay, tetapi juga dalam situasi saat mereka tidak dapat melakukannya. Dengan menggunakan permintaan isReadyToPay, Anda dapat menentukan kesiapan untuk membayar dengan Google Pay dan kesempatan bagi Anda untuk mengubah pengalaman di situs Anda.

Apakah pengguna Anda dapat membayar dengan Google Pay?

Hal pertama yang perlu dilakukan adalah memeriksa apakah pengguna tertentu yang akan melakukan pembayaran di situs Anda dapat menggunakan Google Pay untuk melakukannya. Permintaan ini mengharuskan Anda menentukan versi Google Pay API dan metode pembayaran yang diizinkan untuk situs Anda. Inilah yang sebenarnya dimiliki objek konfigurasi dasar yang ditetapkan pada langkah sebelumnya.

Pada index.js di dalam fungsi onGooglePayLoaded(), tempel perintah berikut:

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);
  });

Jika panggilan gagal atau kembali dengan respons yang gagal, tidak ada tindakan lebih lanjut yang harus dilakukan dalam konteks Google Pay. Dalam situasi ini, langkah selanjutnya yang paling sesuai adalah menampilkan UI tambahan yang mendukung metode pembayaran lain.

Di sisi lain, jika respons tersebut berhasil, sekarang Anda siap untuk mengizinkan pengguna memanfaatkan Google Pay. Dengan demikian, Anda dapat melanjutkan dan menambahkan tombol untuk memulai proses pembayaran pada aktivasi pengguna (misalnya, klik tombol).

Perlu diperhatikan bahwa permintaan ini hanya memeriksa apakah perangkat atau browser yang digunakan untuk memanggil API memiliki dukungan untuk Google Pay.

Jika Anda memerlukan metode ini untuk menilai apakah pengguna yang dimaksud memiliki metode pembayaran aktif yang cocok dengan konfigurasi yang Anda tentukan di allowedPaymentMethods, sertakan properti boolean existingPaymentMethodRequired: true dalam objek IsReadyToPayRequest selain properti lainnya dalam konfigurasi dasar.

Menambahkan tombol untuk membayar dengan Google Pay

Meskipun Anda dapat menggunakan tombol apa pun yang mengikuti pedoman merek Google Pay untuk memulai proses pembayaran, sebaiknya Anda membuatnya menggunakan Google Pay API. Dengan demikian, Anda tidak hanya memastikan penggunaan pedoman brand secara akurat, tetapi juga mendapatkan manfaat dari peningkatan lain yang dibuat langsung di tombol, seperti pelokalan.

Untuk membuat tombol, gunakan metode createButton di objek PaymentsClient, termasuk ButtonOptions untuk mengonfigurasi tombol.

Pada index.js di dalam fungsi createAndAddButton(), tempel perintah berikut:

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
}

Satu-satunya properti yang diperlukan saat menggunakan createButton adalah onClick, yang diperlukan untuk menentukan objek atau fungsi callback yang akan dipicu setiap kali pengguna mengaktifkan tombol. buttonColor dan buttonType memungkinkan Anda menyesuaikan tampilan tombol. Sesuaikan kebijakan tersebut berdasarkan tema dan persyaratan UI aplikasi Anda.

Setelah tombol dibuat, Anda hanya perlu menambahkannya ke node yang sesuai dalam DOM. Dalam contoh ini, node div yang diidentifikasi dengan buy-now digunakan untuk tujuan ini.

Jika Anda menggunakan lab ini untuk mengintegrasikan Google Pay dalam aplikasi yang ada, pastikan Anda menggunakan perintah atau ID node yang tepat untuk menempatkan tombol.

Lihat bahwa Anda juga menentukan fungsi untuk menangani peristiwa klik tombol. Di bagian berikutnya, Anda menggunakan fungsi ini untuk meminta metode pembayaran.

Menyiapkan permintaan pembayaran

Pada tahap ini, Anda telah memuat Google Pay API dan menentukan bahwa pengguna situs Anda dapat menggunakan Google Pay untuk melakukan pembayaran. Akibatnya, Anda telah menampilkan tombol pembayaran Google Pay di UI dan sekarang pengguna Anda siap memulai transaksi. Sekarang saatnya memuat lembar pembayaran akhir yang berisi metode pembayaran yang tersedia untuk berbagai pengguna yang login.

Sama seperti yang Anda lakukan sebelumnya, selama definisi permintaan isReadyToPay, panggilan ini juga memerlukan properti dalam objek konfigurasi dasar yang ditentukan sebelumnya (apiVersion, apiVersionMinor, dan allowedPaymentMethods) selain beberapa yang baru. Kali ini, ada properti baru, tokenizationSpecification, dan parameters tambahan di metode pembayaran Anda yang relevan untuk tujuan permintaan ini. Selain itu, transactionInfo dan merchantInfo harus ditambahkan.

Menyertakan informasi tambahan yang diperlukan dalam metode pembayaran

Mulai dengan membuat salinan metode pembayaran kartu dasar yang digunakan sebelumnya. Metode pembayaran kartu ini sekarang memerlukan properti tokenizationSpecification untuk menentukan cara menangani data yang terkait dengan metode pembayaran yang dipilih, serta persyaratan data lebih lanjut yang diperlukan untuk transaksi sebenarnya: dalam contoh ini, alamat penagihan lengkap dan nomor telepon.

Properti tokenizationSpecification

Spesifikasi tokenisasi menentukan cara metode pembayaran yang dipilih oleh pelanggan Anda digunakan dan digunakan untuk menyelesaikan transaksi.

Ada dua jenis strategi penanganan yang didukung. Jika Anda memproses transaksi pembayaran dari server sesuai dengan PCI DSS, gunakan jenis spesifikasi DIRECT. Dalam contoh ini, Anda menggunakan gateway pembayaran untuk memproses pembayaran. Oleh karena itu, Anda menetapkan jenis spesifikasi PAYMENT_GATEWAY.

Pada index.js di dalam fungsi onGooglePaymentsButtonClicked(), tempel perintah berikut:

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'gatewayMerchantId'
  }
};

Di bagian parameters, Anda dapat menentukan gateway dari daftar penyedia yang didukung oleh Google Pay API, beserta konfigurasi tambahan yang diperlukan oleh setiap gateway. Untuk tujuan lab ini, sebaiknya gunakan gateway example, yang memberikan hasil pengujian untuk transaksi yang dijalankan.

Anda dapat mempelajari lebih lanjut persyaratan untuk setiap gateway tertentu atau melihat contoh dalam dokumentasi spesifikasi token.

Jika lebih tertarik untuk menangani transaksi pembayaran dari server Anda, Anda dapat mempelajari lebih lanjut detail dan persyaratan pendekatan ini pada Kriptografi data pembayaran untuk penjual.

Parameter tambahan

Demikian pula, kini Anda dapat memberikan detail selengkapnya tentang informasi yang perlu diminta agar berhasil melakukan transaksi. Lihat caranya dalam contoh ini, Anda perlu menambahkan properti billingAddressRequired dan billingAddressParameters, untuk menunjukkan bahwa untuk transaksi ini alamat penagihan pengguna diperlukan dalam format lengkap, termasuk nomor telepon.

Pada index.js di dalam fungsi onGooglePaymentsButtonClicked(), tempel perintah berikut:

const cardPaymentMethod = {
  type: 'CARD',
  tokenizationSpecification: tokenizationSpecification,
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
    billingAddressRequired: true,
    billingAddressParameters: {
      format: 'FULL',
      phoneNumberRequired: true
    }
  }
};

Pastikan untuk hanya meminta informasi yang benar-benar diperlukan untuk melakukan transaksi. Ingat bahwa meminta lebih banyak informasi dapat memengaruhi konversi secara negatif.

Menambahkan informasi tentang transaksi

Properti transactionInfo berisi objek dengan detail keuangan tentang transaksi, yaitu harga dan kode mata uang (format alfa ISO 4217) bersama dengan status harga, yang dapat berupa final atau perkiraan bergantung pada sifat transaksi (misalnya, harga dapat bervariasi bergantung pada alamat pengiriman yang ditentukan).

Pada index.js di dalam fungsi onGooglePaymentsButtonClicked(), tempel perintah berikut:

const transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

Menambahkan informasi tentang penjual

Permintaan pembayaran mengambil informasi tentang penjual yang melakukan permintaan berdasarkan properti merchantInfo. Dalam codelab ini, Anda akan berfokus pada dua di antaranya:

• merchantId mengharapkan ID yang terkait dengan akun Anda setelah situs disetujui untuk beroperasi dalam produksi oleh Google. Perhatikan bahwa ini tidak dievaluasi saat menggunakan lingkungan TEST.
• merchantName adalah nama situs atau organisasi Anda yang dapat dilihat oleh pengguna. ID ini dapat ditampilkan di dalam sheet pembayaran Google Pay untuk memberikan informasi selengkapnya kepada pengguna tentang pihak yang meminta operasi tersebut.

Pada index.js di dalam fungsi onGooglePaymentsButtonClicked(), tempel perintah berikut:

const merchantInfo = {
  // merchantId: '01234567890123456789', Only in PRODUCTION
  merchantName: 'Example Merchant Name'
};

Minta informasi pembayaran dan proses hasilnya

Sekarang, gabungkan konfigurasi yang ditentukan sebelumnya ke dalam objek paymentDataRequest akhir.

Pada index.js di dalam fungsi onGooglePaymentsButtonClicked(), tempel perintah berikut:

const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
  allowedPaymentMethods: [cardPaymentMethod],
  transactionInfo: transactionInfo,
  merchantInfo: merchantInfo   
});

Pada tahap ini, Anda memiliki semua yang diperlukan untuk meminta metode pembayaran yang valid kepada Google Pay API. Untuk melakukannya, gunakan metode loadPaymentData di objek PaymentsClient, dengan meneruskan konfigurasi yang baru saja Anda tentukan.

Pada index.js di dalam fungsi onGooglePaymentsButtonClicked(), tempel perintah berikut:

googlePayClient
  .loadPaymentData(paymentDataRequest)
  .then(function(paymentData) {
    processPayment(paymentData);
  }).catch(function(err) {
    // Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
  });

Fungsi processPayment() adalah placeholder, yang disediakan di bawah.

Memanggil metode loadPaymentData akan memicu presentasi sheet pembayaran Google Pay. Jika tidak ada error konfigurasi, Anda dapat melihat daftar metode pembayaran yang valid terkait dengan akun yang saat ini digunakan untuk login.

Anda dapat menambahkan kartu yang valid ke akun untuk memverifikasi bahwa integrasi Anda berfungsi. Perhatikan bahwa kartu Anda tidak akan ditagih atau diekspos dengan cara apa pun.

Setelah dipilih, sheet akan ditutup dan Promise dipenuhi dengan objek PaymentData, termasuk informasi yang relevan tentang metode pembayaran yang dipilih:

{
  "apiVersionMinor": 0,
  "apiVersion": 2,
  "paymentMethodData": {
    "description": "Visa •••• 1234",
    "tokenizationData": {
      "type": "PAYMENT_GATEWAY",
      "token": "examplePaymentMethodToken"
    },
    "type": "CARD",
    "info": {
      "cardNetwork": "VISA",
      "cardDetails": "1234",
      "billingAddress": {
        "phoneNumber": ...,
        ...
      }
    }
  }
}

Sekarang Anda dapat menggunakan informasi metode pembayaran ini untuk melakukan transaksi yang sebenarnya.

function processPayment(paymentData) {
  // TODO: Send a POST request to your processor with the payload
  // https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server 
  // Sorry, this is out-of-scope for this codelab.
  return new Promise(function(resolve, reject) {
    // @todo pass payment token to your gateway to process payment
    const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    console.log('mock send token ' + paymentToken + ' to payment processor');
    setTimeout(function() {
      console.log('mock response from processor');
      alert('done');
      resolve({});
    }, 800);
  });
}

Catatan: Setelah memperbarui tokenizationSpecification untuk menyimpan informasi yang valid tentang gateway pembayaran pilihan Anda, kredensial pembayaran akan dikembalikan sesuai dengan cara gateway pembayaran yang dipilih beroperasi dan lingkungan tempat Anda beroperasi. Lihat daftar prosesor yang didukung untuk mengetahui lebih lanjut detail implementasi tertentu di setiap prosesor.

Sejauh ini, kami telah melihat transaksi dengan jumlah pembayaran tetap. Namun anggaplah Anda ingin memperbarui harga berdasarkan pemilihan properti transaksi tertentu (misalnya, detail pengiriman). Anda dapat melakukannya dengan menyediakan parameter paymentDataCallback saat membuat klien. Callback ini digunakan untuk menangani perubahan pada transaksi dan menerapkan perubahan yang sesuai. Anda dapat memproses perubahan pada alamat pengiriman, opsi pengiriman, dan metode pembayaran yang dipilih. Dalam contoh ini, Anda akan memproses perubahan pada opsi pengiriman yang dipilih. Pertama, tentukan variabel yang berisi semua informasi pengiriman, dan ubah paymentDataRequest untuk menyertakannya:

const shippingOptionParameters = {
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$1.99: Standard shipping',
      description: 'Delivered on May 15.'
    },
    {
      id: 'shipping-002',
      label: '$3.99: Expedited shipping',
      description: 'Delivered on May 12.'
    },
    {
      id: 'shipping-003',
      label: '$10: Express shipping',
      description: 'Delivered tomorrow.'
    }
  ]
};

// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
  'shipping-001': 1.99,
  'shipping-002': 3.99,
  'shipping-003': 10
};

...

// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters =  shippingOptionParameters;

Selanjutnya, Anda memodifikasi pembuatan googlePayClient untuk menyertakan paymentDataCallback, yang dipanggil setiap kali modifikasi yang disertakan dalam callbackIntents dibuat pada operasi pembayaran. Callback ini menyertakan objek dengan properti yang diubah. Anda dapat menggunakan perubahan ini untuk membuat transaksi pembayaran yang diperbarui:

function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
    environment: 'TEST'
  });
  ...
}

function paymentDataCallback(callbackPayload) {

  const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
  const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
  const priceWithSurcharges = 123.45 + shippingSurcharge;

  return {
    newTransactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: priceWithSurcharges.toFixed(2),
      totalPriceLabel: 'Total',
      currencyCode: 'USD',
      displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: priceWithSurcharges.toFixed(2),
        },
        {
          label: 'Shipping',
          type: 'LINE_ITEM',
          price: shippingSurcharge.toFixed(2),
          status: 'FINAL'
        }]
    }
  }
};

Setelah menampilkan objek baru ini di callback, informasi yang ditampilkan di sheet pembayaran akan diperbarui untuk mencerminkan modifikasi yang dilakukan pada transaksi.

Setelah menguji bahwa integrasi berfungsi secara memadai, Anda dapat selangkah lebih jauh dan mengambil data konfigurasi pembayaran segera setelah menentukan bahwa Google Pay dapat digunakan. Hal ini terjadi sebelum pengguna mengaktifkan (klik) tombol pembayaran Google Pay.

Jika Anda mengambil data pembayaran, pada saat pengguna memutuskan untuk membayar, informasi yang diperlukan sheet untuk dimuat akan tersedia, sehingga mengurangi waktu pemuatan secara signifikan, sehingga meningkatkan pengalaman secara keseluruhan.

Metode ini mengharapkan input yang sama seperti loadPaymentData. Artinya, Anda dapat menggunakan objek paymentDataRequest yang sama yang ditentukan sebelumnya. Sekarang, Anda hanya perlu menyertakan panggilan ke metode pengambilan data segera setelah menentukan bahwa pengguna dapat menggunakan Google Pay, setelah isReadyToPay berhasil ditampilkan:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
      googlePayClient.prefetchPaymentData(paymentDataRequest);
    }
  });

Catatan: Jika Anda tidak memiliki konteks yang cukup untuk menentukan harga transaksi saat ini, Anda dapat menetapkan totalPriceStatus ke NOT_CURRENTLY_KNOWN.. Jika Anda melakukannya, menyertakan properti totalPrice dan currencyCode tidak wajib.

Dengan begitu, Anda telah mengurangi waktu muat dengan mengambil data pembayaran sebelum pengguna mengklik tombol tersebut. Peningkatan respons situs Anda akan meningkatkan rasio konversi.

Anda telah berhasil mengintegrasikan Google Pay API ke situs contoh dalam codelab ini atau aplikasi Anda sendiri.

Sekarang, untuk menerapkannya ke produksi, jangan lupa untuk melihat checklist integrasi. Setelah selesai dan ditinjau, Anda akan menerima ID penjual untuk ditambahkan ke konfigurasi klien Anda. Demikian pula, jika Anda berencana menggunakan (atau sudah menggunakan) pemroses atau gateway pembayaran pihak ketiga, lihat daftar penyedia yang didukung di Google Pay dan konfigurasikan gateway atau penyedia Anda. Jika Anda langsung berintegrasi dengan Google Pay, lihat bagian dokumentasi terkait topik ini.

Yang telah kita bahas

• Impor dan konfigurasikan Google API di situs Anda.
• Tentukan dukungan untuk API dan berikan reaksi yang sesuai.
• Tambahkan tombol untuk memungkinkan pengguna membayar menggunakan Google Pay.
• Memuat dan memproses informasi pembayaran pengguna yang disimpan sebelumnya.
• Mengoptimalkan waktu pemuatan dengan mengambil data pembayaran.

Langkah berikutnya

• Pelajari Google Pay lebih lanjut.
• Tinjau checklist integrasi dan dapatkan ID penjual.
• Lihat dua jenis integrasi yang berbeda dan tentukan yang paling sesuai: mengintegrasikan secara langsung atau menggunakan gateway pembayaran atau prosesor.
• Siapkan Izinkan Pembayaran untuk memulai proses pembayaran dan mengonfirmasi status otorisasi pembayaran. (Autentikasi atau Tolak)

Pelajari lebih lanjut

• Lihat referensi library.
• Memecahkan masalah penerapan jika Anda melihat error.
• Cari tahu selengkapnya tentang mengintegrasikan Google Pay di Android.

Apakah ini bermanfaat?

Sangat berguna! Cukup untuk memenuhi ekspektasi. Tidak juga.

Apakah Anda ingin melihat codelab lain untuk membantu Anda dengan jenis integrasi lainnya (Android, integrasi langsung, API loyalitas)?

Ya, itu bagus sekali! Saya puas dengan yang saya dapatkan.