Web tabanlı ödeme uygulamanızı Web Ödemeleri'ne nasıl uyarlayacağınız ve müşterilere daha iyi bir kullanıcı deneyimi nasıl sunacağınız
Web tabanlı bir ödeme uygulaması ödeme isteği alıp ödeme başlattıktan sonra işlem gerçekleştirdiğinde Service Worker işlem yapar. ödeme uygulaması arasındaki iletişimin merkezi olarak kullanılır. Bu yayın bir ödeme uygulamasının ödeme yöntemiyle ilgili bilgileri nasıl iletebileceğini açıklar. hizmet çalışanı kullanarak satıcıya gönderilecek gönderim adresi veya iletişim bilgileri
Satıcıyı ödeme yöntemi değişikliği konusunda bilgilendirme
Ödeme uygulamaları, farklı ödeme yöntemlerine sahip birden fazla ödeme aracını destekleyebilir.
| Müşteri | Ödeme Yöntemi | Ödeme Aracı |
|---|---|---|
| A | Kredi Kartını Veren Kuruluş 1 | ****1234 |
| Kredi Kartını Veren Kuruluş 1 | ****4242 |
|
| Banka X | ******123 |
|
| B | Kredi Kartını Veren Kuruluş 2 | ****5678 |
| Banka X | ******456 |
Örneğin, yukarıdaki tabloda Müşteri A'nın web tabanlı cüzdanında iki kredi bulunur.
kart ve bir banka hesabı kayıtlı olmalıdır. Bu örnekte, uygulama
ödeme araçları (****1234, ****4242, ******123) ve iki ödeme
(Kredi Kartı Veren Kuruluş 1 ve Banka X). Ödeme işleminde,
Uygulama, müşterinin bir ödeme aracı seçmesine ve
ödeme yapmak için bunu kullanmasına izin verebilir.
belirtin.
Ödeme uygulaması, satıcıya müşterinin hangi ödeme yöntemini kullandığını bildirebilir. tam ödeme yanıtı gönderilmeden önce seçilir. Bu, Satıcı, belirli bir ödeme yöntemi markası için indirim kampanyası yayınlamak istiyor. örneğine bakalım.
Ödeme İşleyici API'si ile ödeme uygulaması bir "ödeme yöntemi değişikliği" gönderebilir.
yeni ödeme yöntemini bilgilendirmek için bir hizmet çalışanı aracılığıyla satıcıya gönderilen etkinlik
kullanır. Hizmet çalışanı,
Yeni ödeme yöntemiyle PaymentRequestEvent.changePaymentMethod()
ekleyebilirsiniz.
Ödeme uygulamaları, isteğe bağlı ikinci bağımsız değişken olarak bir methodDetails nesnesini iletebilir.
(PaymentRequestEvent.changePaymentMethod() için). Bu nesne şunları içerebilir:
satıcının değişikliği işlemesi için gereken isteğe bağlı ödeme yöntemi ayrıntıları
unutmayın.
[ödeme işleyici] service-worker.js 'nı inceleyin.
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_METHOD_CHANGED':
const newMethod = e.data.paymentMethod;
const newDetails = e.data.methodDetails;
// Redact or check that no sensitive information is passed in
// `newDetails`.
// Notify the merchant of the payment method change
details =
await payment_request_event.changePaymentMethod(newMethod, newDetails);
…
Satıcı, Ödeme'den bir paymentmethodchange etkinliği aldığında
"Request API" ile çalışıyorlarsa ödeme ayrıntılarını güncelleyip
PaymentDetailsUpdate
nesnesini tanımlayın.
[satıcı] 'nı inceleyin.
request.addEventListener('paymentmethodchange', e => {
if (e.methodName === 'another-pay') {
// Apply $10 discount for example.
const discount = {
label: 'special discount',
amount: {
currency: 'USD',
// The value being string complies the spec
value: '-10.00'
}
};
let total = 0;
details.displayItems.push(discount);
for (let item of details.displayItems) {
total += parseFloat(item.amount.value);
}
// Convert the number back to string
details.total.amount.value = total.toString();
}
// Pass a promise to `updateWith()` and send updated payment details
e.updateWith(details);
});
Satıcı yanıt verdiğinde,
PaymentRequestEvent.changePaymentMethod()
değeri şununla çözülür:
PaymentRequestDetailsUpdate
nesnesini tanımlayın.
[ödeme işleyici] service-worker.js 'nı inceleyin.
…
// Notify the merchant of the payment method change
details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
Ön uçta kullanıcı arayüzünü güncellemek için nesneyi kullanın. Güncel bilgileri yansıtma ödeme bilgileri bölümünde bulabilirsiniz.
Bir gönderim adresi değişikliği konusunda satıcıyı bilgilendirme
Ödeme uygulamaları, parçası olarak müşterinin gönderim adresini satıcıya sağlayabilir olabilir.
Bu özellik, satıcılar için adres toplama yetkisini yalnızca ödeme uygulamaları. Ayrıca, adres verileri standart veri biçimi kullanıyorsanız gönderim adreslerinin tutarlı bir yapıya sahip olmasını bekleyebilir.
Ayrıca, müşteriler tercih edilen ödeme uygulamasını kullanarak farklı satıcılar için yeniden kullanabilirsiniz.
Ödeme uygulamaları, kargo adresini düzenlemek veya seçmek için kullanıcı arayüzü sağlayabilir. Bir ödeme işleminde müşterinin önceden kayıtlı adres bilgileri. Geçici olarak bir kargo adresi belirlendiğinde ödeme uygulaması, satıcının çıkartılan adres bilgilerini bilmesini sağlar. Bu, satıcılara birçok avantajı vardır:
- Satıcı, müşterinin bölgesel kısıtlamayı karşılayıp karşılamadığını belirleyebilir göndermelidir (örneğin, yalnızca yurt içi).
- Satıcı, kargo seçeneklerinin listesini ürünün bulunduğu bölgeye göre değiştirebilir. gönderim adresi (ör. uluslararası normal veya ekspres).
- Satıcı, adrese göre yeni kargo maliyetini uygulayabilir ve toplam fiyat.
Ödeme İşleyici API'si ile ödeme uygulaması bir "kargo adresi
değiştir" yeni kargo seçeneğini bildirmek için hizmet çalışanından satıcıya etkinlik
girin. Hizmet çalışanı,
PaymentRequestEvent.changeShippingAddress()
yeni adresle
nesne.
[ödeme işleyici] service-worker.js 'nı inceleyin.
...
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_ADDRESS_CHANGED':
const newAddress = e.data.shippingAddress;
details =
await payment_request_event.changeShippingAddress(newAddress);
…
Satıcı, Ödeme bölümünden bir shippingaddresschange etkinliği alır.
Güncellenmiş PaymentDetailsUpdate ile yanıt verebilmeleri için API isteyin.
[satıcı] 'nı inceleyin.
request.addEventListener('shippingaddresschange', e => {
// Read the updated shipping address and update the request.
const addr = request.shippingAddress;
const details = getPaymentDetailsFromShippingAddress(addr);
// `updateWith()` sends back updated payment details
e.updateWith(details);
});
Satıcı yanıt verdiğinde vaat
PaymentRequestEvent.changeShippingAddress()
değeri şununla çözülür:
PaymentRequestDetailsUpdate
nesnesini tanımlayın.
[ödeme işleyici] service-worker.js 'nı inceleyin.
…
// Notify the merchant of the shipping address change
details = await payment_request_event.changeShippingAddress(newAddress);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
Ön uçta kullanıcı arayüzünü güncellemek için nesneyi kullanın. Güncel bilgileri yansıtma ödeme bilgileri bölümünde bulabilirsiniz.
Kargo seçeneği değişikliği konusunda satıcıyı bilgilendirme
Kargo seçenekleri, satıcıların satın alınan ürünleri müşteriye göndermek için kullandığı teslimat yöntemleridir. Tipik gönderim seçenekleri şunlardır:
- Ücretsiz gönderim
- Ekspres kargo
- Uluslararası nakliye
- Premium uluslararası kargo
Her birinin kendi maliyeti vardır. Daha hızlı yöntemler/seçenekler genellikle daha pahalıdır.
Ödeme İsteği API'sini kullanan satıcılar bu seçimi bir ödeme için yetkilendirebilir uygulamasını indirin. Ödeme uygulaması bu bilgileri kullanarak bir kullanıcı arayüzü oluşturabilir ve müşteri bir kargo seçeneği belirler.
Satıcının Ödeme İsteği API'sinde belirtilen gönderim seçeneklerinin listesi:
ödeme uygulamasının hizmet çalışanına
PaymentRequestEvent
[satıcı] 'nı inceleyin.
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay',
data: { transactionId: '****' }
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
shippingOptions: [{
id: 'standard',
label: 'Standard',
amount: { value: '0.00', currency: 'USD' },
selected: true
}, {
id: 'express',
label: 'Express',
amount: { value: '5.00', currency: 'USD' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, { requestShipping: true });
Ödeme uygulaması, satıcının müşterinin hangi kargo seçeneğini gösterdiğini bilmesini sağlayabilir. seçim olur. Bu hem satıcı hem de müşteri için önemlidir çünkü kargo seçeneği değiştirildiğinde toplam fiyat da değişir. Satıcının ihtiyacı yapılacak en son fiyat hakkında bilgilendirileceksiniz. müşteri de değişiklikten haberdar olmalıdır.
Ödeme İşleyici API'si ile ödeme uygulaması bir "kargo seçeneği" gönderebilir
değiştir" hizmet çalışanından satıcıya etkinliği gönderilir. Hizmet çalışanı
çağırmak
PaymentRequestEvent.changeShippingOption()
yeni gönderim seçeneği kimliğiyle değiştirin.
[ödeme işleyici] service-worker.js 'nı inceleyin.
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_OPTION_CHANGED':
const newOption = e.data.shippingOptionId;
details =
await payment_request_event.changeShippingOption(newOption);
…
Satıcı, Ödeme bölümünden bir shippingoptionchange etkinliği alır.
API isteğinde bulunun. Satıcı, bu bilgileri toplam fiyatı güncellemek için kullanmalıdır.
ve ardından güncel bilgilerle
PaymentDetailsUpdate.
[satıcı] 'nı inceleyin.
request.addEventListener('shippingoptionchange', e => {
// selected shipping option
const shippingOption = request.shippingOption;
const newTotal = {
currency: 'USD',
label: 'Total due',
value: calculateNewTotal(shippingOption),
};
// `updateWith()` sends back updated payment details
e.updateWith({ total: newTotal });
});
Satıcı yanıt verdiğinde,
PaymentRequestEvent.changeShippingOption()
değeri şununla çözülür:
PaymentRequestDetailsUpdate
nesnesini tanımlayın.
[ödeme işleyici] service-worker.js 'nı inceleyin.
…
// Notify the merchant of the shipping option change
details = await payment_request_event.changeShippingOption(newOption);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
Ön uçta kullanıcı arayüzünü güncellemek için nesneyi kullanın. Güncel bilgileri yansıtma ödeme bilgileri bölümünde bulabilirsiniz.
Güncellenen ödeme ayrıntılarını yansıtın
Satıcı ödeme ayrıntılarını güncellemeyi bitirdiğinde, verilen sözler iade edilir
.changePaymentMethod(), .changeShippingAddress() ve
.changeShippingOption(), ortak
PaymentRequestDetailsUpdate
nesnesini tanımlayın. Ödeme işleyici, sonucu kullanarak güncellenen toplam fiyatı gösterebilir.
gönderim seçeneklerini sunuyor.
Satıcıların hata döndürmesinin birkaç nedeni olabilir:
- Ödeme yöntemi kabul edilmiyor.
- Gönderim adresi, desteklenen bölgelerin dışında.
- Gönderim adresi geçersiz bilgiler içeriyor.
- Gönderim seçeneği, belirtilen gönderim adresi için belirlenemiyor veya başka bir neden olabilir.
Hata durumunu yansıtmak için aşağıdaki özellikleri kullanın:
error: İnsan tarafından okunabilir hata dizesi. Bu, görüntülenecek en iyi dizedir değer katmış olacaksınız.shippingAddressErrors:AddressErrorsadres özelliğine göre ayrıntılı hata dizesi içeren nesne. Bu adresini düzenlemesi için bir form açmak isterseniz ve bunları doğrudan geçersiz alanlara yönlendirmeniz gerekir.paymentMethodErrors: Ödeme yöntemine özel hata nesnesi. Şunu sorabilirsiniz: satıcıların yapılandırılmış bir hata vermesini sağlar ancak Web Ödemeleri spesifikasyonunun yazarları basit bir dize tutmanızı öneririz.
Örnek kod
Bu dokümanda gördüğünüz örnek kodların çoğu aşağıdaki kaynaklardan alıntılardır çalışan örnek uygulama:
https://paymenthandler-demo.glitch.me
[ödeme işleyici] hizmet çalışanı 'nı inceleyin.
[ödeme işleyici] ön ucu 'nı inceleyin.
Denemek için:
- https://paymentrequest-demo.glitch.me/ adresine gidin.
- Sayfanın alt kısmına gidin.
- Ödeme ekle düğmesine basın.
- Ödeme Yöntemi Tanımlayıcısı alanına
https://paymenthandler-demo.glitch.megirin. - Alanın yanındaki Öde düğmesine basın.