İsteğe bağlı ödeme bilgilerini hizmet çalışanıyla işleme

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

Service Worker ile isteğe bağlı ödeme bilgilerini yönetme
Service Worker ile isteğe bağlı ödeme bilgilerini yönetme

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 yöntemi seçici kullanıcı arayüzü
Ödeme yöntemi seçici kullanıcı arayüzü

Ö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.

Satıcıyı ödeme yöntemi değişikliği konusunda bilgilendirme
Satıcıyı ödeme yöntemi değişikliği konusunda bilgilendirme

Ö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.

Gönderim adresi seçicinin kullanıcı arayüzü
Gönderim adresi seçicinin kullanıcı arayüzü

Ö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.

Bir gönderim adresi değişikliği konusunda satıcıyı bilgilendirme
Bir gönderim adresi değişikliği konusunda satıcıyı bilgilendirme

[ö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.

Kargo seçeneği seçici kullanıcı arayüzü
Kargo seçeneği seçici kullanıcı arayüzü

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.

Kargo seçeneği değişikliği konusunda satıcıyı bilgilendirme
Kargo seçeneği değişikliği konusunda satıcıyı bilgilendirme

[ö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: AddressErrors adres ö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:

  1. https://paymentrequest-demo.glitch.me/ adresine gidin.
  2. Sayfanın alt kısmına gidin.
  3. Ödeme ekle düğmesine basın.
  4. Ödeme Yöntemi Tanımlayıcısı alanına https://paymenthandler-demo.glitch.me girin.
  5. Alanın yanındaki Öde düğmesine basın.