Web tabanlı ödeme uygulamanızı Web Ödemelerine uyarlama ve müşterilere daha iyi bir kullanıcı deneyimi sağlama.
Ödeme uygulaması kaydedildikten sonra satıcıların ödeme isteklerini kabul etmeye hazır olursunuz. Bu yayında, çalışma zamanında (ör. bir pencere gösterildiğinde ve kullanıcı pencereyle etkileşimde bulunduğunda) bir hizmet çalışanından ödeme işleminin nasıl düzenleneceği açıklanmaktadır.
"Çalışma zamanında ödeme parametresi değişiklikleri", kullanıcı ödeme işleyiciyle etkileşimde bulunurken satıcının ve ödeme işleyicinin mesaj alışverişinde bulunmasına olanak tanıyan bir etkinlik grubunu ifade eder. İsteğe bağlı ödeme bilgilerini servis çalışanıyla işleme başlıklı makalede daha fazla bilgi edinin.
Satıcıdan ödeme isteği etkinliği alma
Bir müşteri web tabanlı ödeme uygulamanızla ödeme yapmayı seçtiğinde ve satıcı PaymentRequest.show()
çağrısı yaptığında hizmet çalışanınız bir paymentrequest
etkinliği alır. Etkinliği yakalamak ve sonraki işleme hazırlanmak için hizmet işleyiciye bir etkinlik dinleyici ekleyin.
[ödeme işleyici] service-worker.js:
…
let payment_request_event;
let resolver;
let client;
// `self` is the global object in service worker
self.addEventListener('paymentrequest', async e => {
if (payment_request_event) {
// If there's an ongoing payment transaction, reject it.
resolver.reject();
}
// Preserve the event for future use
payment_request_event = e;
…
Korunan PaymentRequestEvent
bu işlemle ilgili önemli bilgiler içerir:
Mülk adı | Açıklama |
---|---|
topOrigin |
Üst düzey web sayfasının kaynağını (genellikle alacaklı satıcı) gösteren bir dize. Satıcı kaynağını tanımlamak için bunu kullanın. |
paymentRequestOrigin |
Çağırıcı kaynağını belirten bir dize. Satıcı Payment Request API'yi doğrudan çağırdığında bu değer topOrigin ile aynı olabilir ancak API, ödeme geçidi gibi bir üçüncü taraf tarafından bir iFrame içinden çağrılırsa farklı olabilir.
|
paymentRequestId |
Payment Request API'ye sağlanan PaymentDetailsInit öğesinin id mülkü. Satıcı bunu atlarsa tarayıcı otomatik olarak oluşturulmuş bir kimlik sağlar.
|
methodData |
PaymentMethodData kapsamında satıcı tarafından sağlanan ödeme yöntemine özgü veriler.
Ödeme işlemi ayrıntılarını belirlemek için bunu kullanın.
|
total |
Satıcı tarafından PaymentDetailsInit kapsamında sağlanan toplam tutar.
Müşteriye ödenmesi gereken toplam tutarı bildirmek için bir kullanıcı arayüzü oluşturmak üzere bu özelliği kullanın.
|
instrumentKey |
Kullanıcı tarafından seçilen enstrüman anahtarı. Bu, önceden sağladığınız instrumentKey miktarını yansıtır. Boş bir dize, kullanıcının herhangi bir enstrüman belirtmediğini gösterir.
|
Web tabanlı ödeme uygulaması ön ucunu görüntülemek için ödeme işleyici penceresini açın
Bir paymentrequest
etkinliği alındığında, ödeme uygulaması PaymentRequestEvent.openWindow()
numaralı telefonu arayarak bir ödeme işleyici penceresi açabilir. Ödeme işleyici penceresinde, müşterilere kimlik doğrulaması yapabilecekleri, gönderim adresi ile seçeneklerini belirleyebilecekleri ve ödemeyi yetkilendirebilecekleri ödeme uygulamanızın arayüzü gösterilir. Ödeme ön ucunda ödemeleri yönetme (yakında) bölümünde ön uç kodunun nasıl yazılacağını ele alacağız.
Gelecekte bir ödeme sonucuyla çözebilmeniz için PaymentRequestEvent.respondWith()
değerine korunmuş bir söz iletin.
[payment handler] service-worker.js:
…
self.addEventListener('paymentrequest', async e => {
…
// Retain a promise for future resolution
// Polyfill for PromiseResolver is provided below.
resolver = new PromiseResolver();
// Pass a promise that resolves when payment is done.
e.respondWith(resolver.promise);
// Open the checkout page.
try {
// Open the window and preserve the client
client = await e.openWindow(checkoutURL);
if (!client) {
// Reject if the window fails to open
throw 'Failed to open window';
}
} catch (err) {
// Reject the promise on failure
resolver.reject(err);
};
});
…
Bir promise'i istediğiniz zaman çözmek için uygun bir PromiseResolver
polyfill kullanabilirsiniz.
class PromiseResolver {
constructor() {
this.promise_ = new Promise((resolve, reject) => {
this.resolve_ = resolve;
this.reject_ = reject;
})
}
get promise() { return this.promise_ }
get resolve() { return this.resolve_ }
get reject() { return this.reject_ }
}
Ön uçla bilgi alışverişi yapma
Ödeme uygulamasının hizmet çalışanı, ServiceWorkerController.postMessage()
aracılığıyla ödeme uygulamasının ön ucuyla mesaj alışverişi yapabilir. Ön uçtan mesaj almak için message
etkinliklerini dinleyin.
[payment handler] service-worker.js:
// Define a convenient `postMessage()` method
const postMessage = (type, contents = {}) => {
if (client) client.postMessage({ type, ...contents });
}
Kullanıma hazır sinyalini kullanıcı arayüzünden alma
Ödeme işleyici penceresi açıldıktan sonra hizmet çalışanı, ödeme uygulamasının ön ucundan hazır durum sinyali bekler. Hizmet çalışanı, hazır olduğunda önemli bilgileri ön uça iletebilir.
[ödeme işleyici] ön ucu:
navigator.serviceWorker.controller.postMessage({
type: 'WINDOW_IS_READY'
});
[payment handler] service-worker.js:
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
// `WINDOW_IS_READY` is a frontend's ready state signal
case 'WINDOW_IS_READY':
const { total } = payment_request_event;
…
İşlem ayrıntılarını ön uca iletme
Şimdi ödeme ayrıntılarını geri gönderin. Bu durumda yalnızca ödeme isteğinin toplamını gönderirsiniz ancak isterseniz daha fazla ayrıntı da gönderebilirsiniz.
[payment handler] service-worker.js:
…
// Pass the payment details to the frontend
postMessage('PAYMENT_IS_READY', { total });
break;
…
[ödeme işleyici] ön ucu:
let total;
navigator.serviceWorker.addEventListener('message', async e => {
switch (e.data.type) {
case 'PAYMENT_IS_READY':
({ total } = e.data);
// Update the UI
renderHTML(total);
break;
…
Müşterinin ödeme kimlik bilgilerini iade etme
Müşteri ödemeyi yetkilendirdiğinde ön uç, devam etmek için hizmet işleyicisine bir gönderi mesajı gönderebilir. Sonuçları satıcıya geri göndermek için PaymentRequestEvent.respondWith()
adresine iletilen vaadi çözebilirsiniz.
Bir PaymentHandlerResponse
nesnesi iletin.
Mülk adı | Açıklama |
---|---|
methodName |
Ödeme yapmak için kullanılan ödeme yöntemi tanımlayıcısı. |
details |
Satıcının ödemeyi işleme alması için gerekli bilgileri sağlayan, ödeme yöntemine özgü verilerdir. |
[payment handler] frontend:
const paymentMethod = …
postMessage('PAYMENT_AUTHORIZED', {
paymentMethod, // Payment method identifier
});
[payment handler] service-worker.js:
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_AUTHORIZED':
// Resolve the payment request event promise
// with a payment response object
const response = {
methodName: e.data.paymentMethod,
details: { id: 'put payment credential here' },
}
resolver.resolve(response);
// Don't forget to initialize.
payment_request_event = null;
break;
…
Ödeme işlemini iptal etme
Müşterinin işlemi iptal etmesine izin vermek için ön uç, hizmet işçisine bunu yapması için bir yayın mesajı gönderebilir. Hizmet işçisi daha sonra satıcıya işlemin iptal edildiğini belirtmek için PaymentRequestEvent.respondWith()
'e iletilen vaadi null
ile çözebilir.
[payment handler] frontend:
postMessage('CANCEL_PAYMENT');
[payment handler] service-worker.js:
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'CANCEL_PAYMENT':
// Resolve the payment request event promise
// with null
resolver.resolve(null);
// Don't forget to initialize.
payment_request_event = null;
break;
…
Örnek kod
Bu belgede gördüğünüz tüm örnek kodlar, aşağıdaki çalışan örnek uygulamadan alınmıştır:
https://paymenthandler-demo.glitch.me
[payment handler] service worker
[payment handler] frontend
Denemek için:
- https://paymentrequest-demo.glitch.me/ adresine gidin.
- Sayfanın alt kısmına gidin.
- Ödeme düğmesi ekle'ye basın.
- Ödeme Yöntemi Tanımlayıcısı alanına
https://paymenthandler-demo.glitch.me
yazın. - Alanın yanındaki Öde düğmesine basın.
Sonraki adımlar
Bu makalede, bir hizmet çalışanının ödeme işlemini nasıl düzenleyeceğini öğrendik. Bir sonraki adımda, hizmet işleyiciye daha gelişmiş özellikler eklemeyi öğreneceğiz.