Hi, berjumpa kembali, sesi kali ini akan membahas mengenai mengoptimalkan interface adsense Payment Request API: Panduan Integrasi | Web | Google Developers simak selengkapnya
Developer Advocate in Tokyo
Dave is a Tech Writer
Google Chrome Product Manager
Membeli barang secara online memang praktis akan tetapi acap kali jadi pengalaman yang mengecewakan, khususnya ala perangkat seluler. Walaupun lalu lintas seluler terus meningkat, akun konversi seluler cuma sekitar sepertiga dari semua pembelian yang diselesaikan. Dengan bicara lain, pengguna meninggalkan pembelian berselang seluler dua kali lebih acap daripada pembelian berselang desktop. Mengapa?
Mengapa pengguna meninggalkan formulir pembelian berselang seluler
Formulir pembelian online adalah intensif-pengguna, sulit digunakan, lambat dimuat dengan disegarkan, serta harus berjibun langkah buat menyelesaikannya. Ini akibat kedua anasir utama pelunasan online—keamanan dengan kenyamanan—sering kali berbenturan; mengutamakan yang satu berarti mengalahkan yang lain.
Kebanyakan masalah yang menyebabkan pengabaian bisa langsung dilacak ke formulir pembelian. Setiap aplikasi atau situs memiliki entri data dengan cara validasinya sendiri, dengan pengguna acap kali merasa mengatur kudu memasukkan informasi yang sama ala setiap titik pembelian di aplikasi. Juga, developer aplikasi berusaha melahirkan anak sungai pembelian yang kondusif beberapa cara pelunasan berlainan sekaligus; bahkan antagonisme kecil pada perjanjian cara pelunasan bisa memperumit penyelesaian formulir dengan cara penyerahannya.
Sistem apa sahaja yang memperbaiki atau memecahkan satu atau beberapa masalah itu akan jadi perubahan yang disambut baik. Kita telah mulai memecahkan masalah dengan Isiotomatis, akan tetapi kita ingin membicarakan tentang solusi yang lebih komprehensif.
Memperkenalkan Payment Request API
Payment Request API adalah sistem yang dimaksudkan buat meniadakan formulir pemeriksaan. Ini amat memperbaiki anak sungai kerja pengguna selama cara pembelian, sehingga melepaskan pengalaman pengguna yang konsisten dengan membolehkan para penjual di web dengan mudah memanfaatkan cara pelunasan yang berbeda-beda. Payment Request API bukanlah cara pelunasan baru, tak jua berintegrasi langsung dengan pemroses pembayaran; melainkan, layer cara yang bertujuan:
- Memungkinkan browser bertindak sebagai belantik antara penjual, pengguna, dengan cara pembayaran
- Untuk menstandarkan anak sungai komunikasi pelunasan sebanyak mungkin
- Untuk kondusif dengan bagus beragam cara pelunasan yang aman
- Agar beraksi di browser, perangkat, atau platform apa pun—seluler atau yang lain
Payment Request API adalah cagak terbuka dengan lintas-browser yang mengambil alih anak sungai checkout konservatif yang membolehkan penjual meminta dengan melegalkan pelunasan pada satu panggilan API. Payment Request API membolehkan halaman web bertukar informasi dengan agen-pengguna ketika pengguna melepaskan masukan, sebelum menyetujui atau berkeberatan permintaan pembayaran.
Yang terpenting, dengan browser aktif sebagai perantara, semua informasi yang diperlukan buat checkout cepat bisa disimpan di browser, sehingga pengguna bisa tinggal mengonfirmasikan dengan membayar, layak dengan satu klik.
Proses bisnis pembayaran
Menggunakan Payment Request API, cara bisnis berjalan semulus agak-agak buat pengguna dengan penjual.
Proses bisnis pembayaran
Prosesnya dimulai detik situs penjual melahirkan PaymentRequest baru dengan melangsungkan semua informasi yang diperlukan ke browser buat melaksanakan pembayaran: besaran yang akan dibebankan, mata uang yang diharapkan pembayaran, dengan cara pelunasan yang makbul akibat situs tersebut. Browser akan menentukan kompatibilitas antara cara pelunasan yang makbul buat situs dengan cara yang dipasang pengguna di perangkat target.
Kemudian browser menampilkan UI pelunasan kepada pengguna, yang memilih cara pelunasan dengan meluluskan transaksi. Metode pelunasan bisa sepraktis bilyet angsuran yang telah disimpan akibat browser, atau serahasia aplikasi pihak ketiga yang ditulis khusus buat memberikan pelunasan ke situs (fungsionalitas ini sebentar lagi tersedia). Setelah pengguna meluluskan transaksi, semua perincian pelunasan yang diperlukan akan langsung dikirim kembali ke situs. Misalnya, buat pelunasan dengan bilyet kredit, situs akan memetik kembali nomor kartu, nama pemegang kartu, tanggal kedaluwarsa, dengan CVC.
PaymentRequest jua bisa diperluas buat membalas informasi tambahan, seperti bakat dengan opsi pengiriman, email pembayar, dengan telepon pembayar. Ini membolehkan Anda mendapatkan semua informasi yang diperlukan buat menuntaskan pelunasan minus menampilkan formulir checkout kepada pengguna.
Manfaat cara baru ini tiga kali lipat: dari bucu memandang -- bulu pilih bulu pengguna, semua interaksi—permintaan, otorisasi, pembayaran, dengan buatan membosankan sebelumnya—sekarang dilakukan cuma pada satu langkah; dari bucu memandang -- bulu pilih bulu situs web, ini cuma memerlukan satu panggilan JavaScript API; dari bucu memandang -- bulu pilih bulu cara pembayaran, tak ada perubahan cara apa pun.
Menggunakan Payment Request API
Muat infiks Payment Request API
Untuk meluak penderitaan mengejar API cagak hidup ini, kami sangat
menyarankan Anda buat me-lanjutkan infiks ini di bagian <head> ala kode. Sisipan ini
akan diperbarui begitu API berubah dengan akan berusaha alot biar aba-aba Anda ajek bekerja
setidaknya ala 2 rilis utama Chrome.
<script src="https://storage.googleapis.com/prshim/v1/payment-shim.js">
Buat PaymentRequest
Langkah pertama adalah melahirkan alamat PaymentRequest dengan mendatangkan konstruktor PaymentRequest. Langkah ini biasanya (namun tak selalu) dikaitkan dengan tindakan yang diprakarsai pengguna, yang menunjukkan angan-angan mengatur buat melaksanakan pembelian. Objek tersebut dibuat memakai kriteria berisi data yang diperlukan.
var request = new PaymentRequest(
methodData, // required payment method data
details, // required information about transaction
options // optional kriteria for things like shipping, etc.
);
Konstruktor PaymentRequest
Parameter methodData
Parameter methodData berisi daftar cara pelunasan yang didukung dan, jika relevan, informasi adendum tentang cara pembayaran. Urutan ini berisi kamus-kamus PaymentMethodData, termasuk identifier cagak yang dikaitkan dengan cara pelunasan yang ingin makbul akibat aplikasi, dengan data spesifik cara pembayaran. Lihat Arsitektur Payment Request API buat perincian selengkapnya.
Saat ini, PaymentRequest di Chrome cuma kondusif bilyet angsuran cagak berikut: 'amex', 'diners', 'discover', 'jcb', 'maestro', 'mastercard', 'unionpay', dengan 'visa'.
var methodData = [
supportedMethods: ["visa", "mastercard"]
]
Data dengan cara pembayaran
Parameter details
Parameter details berisi informasi tentang transaksi. Ada dua anasir utama: sebuah total, yang merefleksikan besaran total dengan mata uang yang akan digunakan, dengan babak opsional displayItems yang menunjukkan cara membagi besaran akhir. Parameter ini tak dimaksudkan jadi daftar item lini, akan tetapi melainkan rangkuman anasir utama pesanan: subtotal, diskon, pajak, biaya kirim, dll.
Perlu diperhatikan bahwa Payment Request API tak melaksanakan aritmetika. Yaitu, beliau tak dengan tak bisa memastikan bahwa anasir bentuk menghitung dengan benar total besaran yang kudu dibayar. Penghitungan ini adalah tanggung jawab developer. Jadi Anda kudu acap memastikan bahwa besaran item daftar sama dengan besaran total. Juga, PaymentRequest tak kondusif pengembalian uang, sehingga jumlahnya kudu acap positif (namun item daftar individual bisa berupa negatif, misalnya diskon).
Browser akan merender cap seperti yang Anda definisikan dengan secara otomatis merender format mata uang yang benar berdasarkan lokal pengguna. Perhatikan, cap kudu di-render pada adab yang sama dengan materi Anda.
var details =
displayItems: [
label: "Original donation amount",
amount: currency: "USD", value : "65.00", // US$65.00
,
label: "Friends and family discount",
amount: currency: "USD", value : "-10.00", // -US$10.00
pending: true // The price is not determined yet
],
total:
label: "Total",
amount: currency: "USD", value : "55.00", // US$55.00
Detail transaksi
pending umumnya digunakan buat menampilkan item seperti besaran bea atau pengiriman yang bergantung ala pemilahan bakat pengiriman atau opsi pengiriman. Chrome menunjukkan bidang tertunda ala UI buat permintaan pembayaran.
Nilai berulang atau terhitung yang digunakan pada details bisa ditetapkan apik sebagai literal string maupun variabel string individual.
var currency = "USD";
var amount = "65.00";
var discount = "-10.00";
var total = "55.00";
Variabel-variabel PaymentRequest
Tampilkan PaymentRequest
Aktifkan antarmuka PaymentRequest dengan mendatangkan metodenya show(). Metode ini mendatangkan UI bawaan yang membolehkan pengguna memeriksa perincian pembelian, me-lanjutkan atau mengubah informasi, dengan terakhir, membayarnya. Sebuah Promise (ditunjukkan akibat fungsi callback dengan cara then()-nya) yang ditetapkan akan dikembalikan bila pengguna melegalkan atau berkeberatan permintaan pembayaran.
request.show().then(function(paymentResponse)
// Process paymentResponse here
paymentResponse.complete("success");
).catch(function(err)
console.error("Uh oh, something bad happened", err.message);
);
Metode show PaymentRequest
Batalkan PaymentRequest
Anda bisa dengan sengaja membatalkan PaymentRequest dengan mendatangkan cara abort(). Ini terutama berguna bila waktu sesi belanja telah habis atau item di bakul telah terjual habis selama transaksi.
Gunakan cara ini jika aplikasi harus membatalkan permintaan pelunasan setelah cara show() dipanggil akan tetapi sebelum promise diproses — Misalnya, jika sebuah item tak lagi tersedia, atau pengguna batal memverifikasi pembelian pada waktu yang dialokasikan.
Jika Anda membatalkan permintaan, Anda harus melahirkan instance baru PaymentRequest sebelum bisa mendatangkan lagi show().
var paymentTimeout = window.setTimeout(function()
window.clearTimeout(paymentTimeout);
request.abort().then(function()
console.log('Payment timed out after 20 minutes.');
).catch(function()
console.log('Unable to abort.');
);
, 20 * 60 * 1000); /* 20 minutes */
Metode batalkan PaymentRequest
Proses PaymentResponse
Dengan persetujuan pengguna buat permintaan pembayaran, promise cara show() akan diproses, yang menghasilkan alamat PaymentResponse.
PaymentResponse memiliki bidang-bidang berikut: |
|
|---|---|
methodName |
String yang menunjukkan cara pelunasan yang dipilih (mis., visa) |
details |
Kamus berisi informasi buat methodName |
shippingAddress |
Alamat pengiriman pengguna, jika diminta |
shippingOption |
ID opsi pengiriman yang dipilih, jika diminta |
payerEmail |
Alamat email pembayar, jika diminta |
payerPhone |
Nomor telepon pembayar, jika diminta |
payerName |
Nama pembayar, jika diminta |
Untuk pelunasan dengan bilyet kredit, responsnya standar. Untuk pelunasan dengan kecuali bilyet angsuran (mis., Android Pay), respons akan didokumentasikan akibat penyedia. Respons bilyet angsuran berisi kamus berikut:
cardholderName
cardNumber
expiryMonth
expiryYear
cardSecurityCode
billingAddress
Setelah informasi pelunasan diterima, aplikasi kudu memberikan informasi pelunasan kepada pemroses pelunasan buat diproses. UI akan menampilkan spinner detik permintaan terjadi. Bila respons telah kembali, aplikasi kudu mendatangkan complete() buat menangkup UI.
request.show().then(paymentResponse =>
var paymentData =
// payment method string, e.g. “visa”
method: paymentResponse.methodName,
// payment details as you requested
details: paymentResponse.details
;
return fetch('/pay',
method: 'POST',
credentials: 'include',
headers:
'Content-Type': 'application/json'
,
body: JSON.stringify(paymentData)
).then(res =>
if (res.status === 200)
return res.json();
else
throw 'Payment Error';
).then(res =>
paymentResponse.complete("success");
, err =>
paymentResponse.complete("fail");
);
).catch(err =>
console.error("Uh oh, something bad happened", err.message);
);
Metode complete() akan bersedekah tahu agen-pengguna bahwa hubungan pengguna telah selesai dengan meluluskan aplikasi bersedekah tahu pengguna melanda hasilnya dengan menangani disposisi elemen UI selebihnya.
paymentResponse.complete('success').then(() =>
// Success UI
paymentResponse.complete('fail').then(() =>
// Error UI
;
Metode complete PaymentRequest
Mengumpulkan bakat pengiriman
Jika Anda penjual yang melego barang fisik, Anda agak-agak ingin akumulasi bakat pengiriman pengguna dengan memakai Payment Request API. Caranya adalah dengan me-lanjutkan requestShipping: true ke kriteria options. Bila telah memasang kriteria ini, "Shipping" akan ditambahkan ke UI, dengan pengguna bisa memilih bakat yang telah disimpan dari daftar atau me-lanjutkan bakat pengiriman baru.
Atau Anda bisa memakai "Delivery" atau "Pickup" sebagai ganti "Delivery" di UI dengan menetapkan shippingType. Hal ini cuma buat keperluan tampilan.
var options =
requestShipping: true,
shippingType: "shipping" // "shipping"(default), "delivery" or "pickup"
;
var request = new PaymentRequest(methodData, details, options);
Opsi transaksi
Opsi pengiriman bisa dihitung secara dinamis bila pengguna memilih atau me-lanjutkan bakat pengiriman baru. Anda bisa me-lanjutkan event listener buat insiden shippingaddresschange, yang akan menembakkan pemilahan bakat pengiriman akibat pengguna. Anda beka bisa memvalidasi bakat mengalihtugaskan ke bakat itu, membagi opsi pengiriman, dengan memodernkan details.shippingOptions Anda dengan opsi pengiriman baru dengan informasi harga. Anda bisa menawarkan opsi pengiriman default dengan memasang selected ke true ala sebuah opsi.
Untuk berkeberatan bakat akibat alasan seperti daerah yang tak didukung, teruskan larik kosong ke details.shippingOptions. UI akan bersedekah tahu pengguna bahwa bakat yang dipilih tak bisa digunakan buat pengiriman.
request.addEventListener('shippingaddresschange', e =>
e.updateWith(((details, addr) =>
if (addr.country === 'US')
var shippingOption =
id: '',
label: '',
amount: currency: 'USD', value: '0.00',
selected: true
;
if (addr.region === 'US')
shippingOption.id = 'us';
shippingOption.label = 'Standard shipping in US';
shippingOption.amount.value = '0.00';
details.total.amount.value = '55.00';
else
shippingOption.id = 'others';
shippingOption.label = 'International shipping';
shippingOption.amount.value = '10.00';
details.total.amount.value = '65.00';
if (details.displayItems.length === 2)
details.displayItems.splice(1, 0, shippingOption);
else
details.displayItems.splice(1, 1, shippingOption);
details.shippingOptions = [shippingOption];
else
details.shippingOptions = [];
return Promise.resolve(details);
)(details, request.shippingAddress));
);
Dengan persetujuan pengguna buat permintaan pembayaran, promise cara show() bersedekah solusi. Aplikasi boleh memakai properti .shippingAddress alamat PaymentResponse buat memberitahukan bakat pengiriman kepada pemroses pembayaran, bersama properti lainnya.
request.show().then(paymentResponse =>
var paymentData =
// payment method string
method: paymentResponse.methodName,
// payment details as you requested
details: paymentResponse.details.toJSON(),
// shipping address information
address: paymentResponse.shippingAddress.toJSON()
;
// Send information to the server
);
Menambahkan opsi pengiriman
Jika fasilitas Anda membolehkan pengguna buat memilih opsi pengiriman seperti "gratis", "standar", atau "kilat", Anda jua bisa melakukannya dengan UI Payment Request. Untuk menawarkan alternatif tersebut, tambahkan properti shippingOptions dengan opsinya ke alamat details. Dengan memasang satu alternatif ke selected: true, UI akan merendernya sebagai telah terpilih (berarti besaran total Anda kudu merefleksikan harga buat opsi pengiriman itu).
var details =
total: label: 'Donation', amount: currency: 'USD', value: '55.00',
displayItems: [
label: 'Original donation amount',
amount: currency: 'USD', value: '65.00'
,
label: 'Friends and family discount',
amount: currency: 'USD', value: '-10.00'
],
shippingOptions: [
id: 'standard',
label: 'Standard shipping',
amount: currency: 'USD', value: '0.00',
selected: true
,
id: 'express',
label: 'Express shipping',
amount: currency: 'USD', value: '12.00'
]
;
var request = new PaymentRequest(methodData, details, options);
Mengubah opsi pengiriman agak-agak akan menghasilkan harga yang berbeda. Untuk me-lanjutkan bayaran kirim dengan mengubah total harga, Anda bisa me-lanjutkan event listener buat insiden shippingoptionchange, yang akan terpicu detik pengguna memilih opsi pengiriman, sehingga Anda bisa melaksanakan eksplorasi terprogram terhadap data opsi. Anda jua bisa mengubah bayaran kirim sesuai bakat pengiriman.
request.addEventListener('shippingoptionchange', e =>
e.updateWith(((details, shippingOption) =>
var selectedShippingOption;
var otherShippingOption;
if (shippingOption === 'standard')
selectedShippingOption = details.shippingOptions[0];
otherShippingOption = details.shippingOptions[1];
details.total.amount.value = '55.00';
else
selectedShippingOption = details.shippingOptions[1];
otherShippingOption = details.shippingOptions[0];
details.total.amount.value = '67.00';
if (details.displayItems.length === 2)
details.displayItems.splice(1, 0, selectedShippingOption);
else
details.displayItems.splice(1, 1, selectedShippingOption);
selectedShippingOption.selected = true;
otherShippingOption.selected = false;
return Promise.resolve(details);
)(details, request.shippingOption));
);
Dengan persetujuan pengguna buat permintaan pembayaran, promise cara show() bersedekah solusi. Aplikasi bisa memakai properti .shippingOption alamat PaymentResponse buat bersedekah tahu opsi pengiriman kepada pemroses pembayaran, bersama properti lainnya.
request.show().then(paymentResponse =>
var paymentData =
// payment method string
method: paymentResponse.methodName,
// payment details as you requested
details: paymentResponse.details.toJSON(),
// shipping address information
address: paymentResponse.shippingAddress.toJSON(),
// shipping option
shippingOption: paymentResponse.shippingOption
;
// Send information to the server
);
Anda jua bisa akumulasi bakat email pengguna, nomor telepon, atau nama dengan mengonfigurasi alamat options.
var options =
requestPayerPhone: true, // Request user's phone number
requestPayerEmail: true, // Request user's email address
requestPayerName: true // Request user's name
;
var request = new PaymentRequest(methodData, details, options);
Dengan persetujuan pengguna buat permintaan pembayaran, promise cara show() bersedekah solusi. Aplikasi bisa memakai .payerPhone, .payerEmail dan/atau properti .payerName alamat PaymentResponse buat bersedekah tahu pemroses pelunasan melanda alternatif pengguna, bersama properti lainnya.
request.show().then(paymentResponse =>
var paymentData =
// payment method string
method: paymentResponse.methodName,
// payment details as you requested
details: paymentResponse.details.toJSON(),
// shipping address information
address: paymentResponse.shippingAddress.toJSON(),
// shipping option string
shippingOption: paymentResponse.shippingOption,
// payer's phone number string
phone: paymentResponse.payerPhone,
// payer's email address string
email: paymentResponse.payerEmail,
// payer's name string
name: paymentResponse.payerName
;
// Send information to the server
);
Membuat PaymentRequest sebagai penyempurnaan progresif
Karena Payment Request API adalah fitur yang berkembang, berjibun browser yang belum mendukungnya. Untuk menentukan apakah fitur ini tersedia, buat kueri window.PaymentRequest.
if (window.PaymentRequest)
// PaymentRequest supported
// Continue with PaymentRequest API
else
// PaymentRequest NOT supported
// Continue with existing form based solution
Menyatukan semuanya
function onBuyClicked(event)
if (!window.PaymentRequest)
return;
// Payment Request API is available.
// Stop the default anchor redirect.
event.preventDefault();
var supportedInstruments = [
supportedMethods: [
'visa', 'mastercard', 'amex', 'discover', 'maestro',
'diners', 'jcb', 'unionpay', 'bitcoin'
]
];
var details =
displayItems: [
label: 'Original donation amount',
amount: currency: 'USD', value: '65.00'
,
label: 'Friends and family discount',
amount: currency: 'USD', value: '-10.00'
],
total:
label: 'Total due',
amount: currency: 'USD', value : '55.00'
;
var options =
requestShipping: true,
requestPayerEmail: true,
requestPayerPhone: true,
requestPayerName: true
;
// Initialization
var request = new PaymentRequest(supportedInstruments, details, options);
// When user selects a shipping address
request.addEventListener('shippingaddresschange', e =>
e.updateWith(((details, addr) =>
var shippingOption =
id: '',
label: '',
amount: currency: 'USD', value: '0.00',
selected: true
;
// Shipping to US is supported
if (addr.country === 'US')
shippingOption.id = 'us';
shippingOption.label = 'Standard shipping in US';
shippingOption.amount.value = '0.00';
details.total.amount.value = '55.00';
// Shipping to JP is supported
else if (addr.country === 'JP')
shippingOption.id = 'jp';
shippingOption.label = 'International shipping';
shippingOption.amount.value = '10.00';
details.total.amount.value = '65.00';
// Shipping to elsewhere is unsupported
else
// Empty array indicates rejection of the address
details.shippingOptions = [];
return Promise.resolve(details);
// Hardcode for simplicity
if (details.displayItems.length === 2)
details.displayItems[2] = shippingOption;
else
details.displayItems.push(shippingOption);
details.shippingOptions = [shippingOption];
return Promise.resolve(details);
)(details, request.shippingAddress));
);
// When user selects a shipping option
request.addEventListener('shippingoptionchange', e =>
e.updateWith(((details) =>
// There should be only one option. Do nothing.
return Promise.resolve(details);
)(details));
);
// Show UI then continue with user payment info
request.show().then(result =>
// POST the result to the server
return fetch('/pay',
method: 'POST',
credentials: 'include',
headers:
'Content-Type': 'application/json'
,
body: JSON.stringify(result.toJSON())
).then(res =>
// Only if successful
if (res.status === 200)
return res.json();
else
throw 'Failure';
).then(response =>
// You should have received a JSON object
if (response.success == true)
return result.complete('success');
else
return result.complete('fail');
).then(() =>
console.log('Thank you!',
result.shippingAddress.toJSON(),
result.methodName,
result.details.toJSON());
).catch(() =>
return result.complete('fail');
);
).catch(function(err)
console.error('Uh oh, something bad happened: ' + err.message);
);
// Assuming an anchor is the target for the event listener.
document.querySelector('#start').addEventListener('click', onBuyClicked);
begitulah detil perihal Payment Request API: Panduan Integrasi | Web | Google Developers semoga artikel ini menambah wawasan salam
Artikel ini diposting pada label , tanggal 04-08-2019, di kutip dari https://developers.google.com/web/fundamentals/payments/?hl=id