Ödeme işleminin ömrü

Satıcıların ödeme uygulamalarını nasıl entegre ettiğini ve ödeme işlemlerinin nasıl yapıldığını öğrenin ödeme isteği gönderin.

Eiji Kitamura

Milica Mihajlija

Web Payments API'leri, tarayıcıda yerleşik olarak bulunan özel ödeme özellikleridir ilk kez yapıyor. Web Ödemeleri ile, ödeme uygulamalarıyla satıcı entegrasyonu sadeleşip daha güvenli hale geliyor.

Web Ödemeleri'ni kullanmanın avantajları hakkında daha fazla bilgi edinmek için bkz. web Payments ile ödeme uygulamaları.

Bu makale, satıcı web sitesinde ödeme işlemi konusunda size yol gösterir ve ödeme uygulaması entegrasyonunun işleyiş şeklini anlamanıza yardımcı olur.

Bu süreç 6 adımdan oluşur:

1. Satıcı bir ödeme işlemi başlatır.
2. Satıcı bir ödeme düğmesi gösteriyor.

3. Müşteri ödeme düğmesine basıyor.

   

4. Tarayıcı, ödeme uygulamasını başlatır.

   

5. Müşteri herhangi bir ayrıntıyı (ör. gönderim seçenekleri veya adresi) gönderilirse satıcı, işlem ayrıntılarını değişikliği yansıtacak şekilde günceller.

   

6. Müşteri satın alma işlemini onayladıktan sonra satıcı, ödemeyi doğrular ve işlemi tamamlar.

   

1. Adım: Satıcı bir ödeme işlemi başlatır

Müşteri satın alma işlemi gerçekleştirmeye karar verdiğinde ödemeyi satıcı başlatır oluşturarak PaymentRequest nesnesini tanımlayın. Bu nesne, işlemle ilgili önemli bilgiler içerir:

• Kabul edilebilir ödeme yöntemleri ve işlemi işlemek için bu yöntemlere ait veriler.
• Toplam fiyat (zorunlu) ve öğelerle ilgili bilgiler gibi ayrıntılar.
• Satıcıların kargo gibi bilgileri isteyebileceği seçenekler bir gönderim seçeneği ekleyin.
• Satıcılar fatura adresini, ödemeyi yapanın adını, e-posta adresini ve telefon numarası.
• Satıcılar isteğe bağlı kargo da ekleyebilir. tür PaymentRequest içinde (shipping, delivery veya pickup). Ödeme uygulaması bunu, kullanıcı arayüzünde doğru etiketleri görüntülemek için bir ipucu olarak kullanabilir.

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

İşlem bilgilerini sağladığınızda tarayıcı bir keşif gerçekleştirir. ödemeye göre PaymentRequest içinde belirtilen ödeme uygulamalarının işlenmesi yöntem tanımlayıcılarını kullanır. Bu şekilde tarayıcı, hangi ödeme başlatılması, işleme devam etmeye hazır hale gelmesidir.

Keşif sürecinin nasıl işlediğini ayrıntılı olarak öğrenmek için Kampanya Oluşturma ödeme yöntemini kullanın.

2. Adım: Satıcı bir ödeme düğmesi gösteriyor

Satıcılar birçok ödeme yöntemini destekleyebilir ancak yalnızca ödeme bilgilerini göstermelidir. düğme ve e-tablo kullanın. Ödeme düğmesi gösterme kötü bir kullanıcı deneyimi anlamına gelir. Bir satıcı, Google'ın PaymentRequest nesnesinde belirtilen ödeme yöntemi, bir yedek çözüm sağlayabilir veya bu düğmeyi hiç göstermeyebilir.

Satıcı, PaymentRequest örneğini kullanarak bir müşterinin şu işlemleri gerçekleştirip gerçekleştirmediğini sorgulayabilir: ödeme uygulaması kullanılabilir.

Müşterinin ödeme uygulaması var mı?

İlgili içeriği oluşturmak için kullanılan canMakePayment() PaymentRequest yöntemi,true cihazıyla başlayalım. "Kullanılabilir" bir ödeme uygulamasının ödeme yönteminin bulunması ve platforma özgü ödeme uygulamasının yüklü olması veya web tabanlı ödeme uygulaması uygulamanın kayıtlıdır.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

3. Adım: Müşteri, ödeme düğmesine basar

Müşteri ödeme düğmesine bastığında satıcı, show() numarasını arar başlatılmasını hemen tetikleyen PaymentRequest örneğinin yöntemini kullanan ödeme kullanıcı arayüzü.

Nihai toplam fiyatın dinamik olarak ayarlanması (örneğin, sunucusu üzerinden), satıcı, ödeme kullanıcı arayüzünün başlamasını toplam tutar yardımcı olur.

Ödeme kullanıcı arayüzünün kullanıma sunulmasını erteleme

Ödemeyi ertelemeye ilişkin bir demoya göz atın kullanıcı arayüzü üzerinden belirler.

Satıcı, ödeme kullanıcı arayüzünü ertelemek için show() yöntemine bir taahhütte bulunur. Tarayıcı, söz verilene ve İşlem başlatılmaya hazır.

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

show() için bağımsız değişken olarak bir taahhüt belirtilmemişse tarayıcı şunu yapar: ödeme kullanıcı arayüzünü hemen başlatın.

4. Adım: Tarayıcı, ödeme uygulamasını başlatır

Tarayıcı, platforma özel veya web tabanlı bir ödeme uygulamasını başlatabilir. ( Chrome'un hangi ödeme uygulamasını kullanacağını nasıl belirlediği lansman için de gerekebilir.)

Ödeme uygulamasının nasıl oluşturulduğu çoğunlukla geliştiriciye bağlıdır, ancak satıcıdan ve satıcıya gönderilen etkinliklerin yanı sıra standart hale getirilir.

Ödeme uygulaması başlatıldığında işlemi alır bilgi 1. Adım'da PaymentRequest nesnesine aktarılmıştır. Bu nesne şunları içerir:

• Ödeme yöntemi verileri
• Toplam fiyat
• Ödeme seçenekleri

Ödeme uygulaması, kullanıcı arayüzünü etiketlemek için işlem bilgilerini kullanır.

5. Adım: Satıcı, müşteri işlemlerine bağlı olarak işlem ayrıntılarını nasıl güncelleyebilir?

Müşteriler, ödeme gibi işlem ayrıntılarını değiştirme seçeneğine sahiptir. yöntemi ve kargo seçeneğini görebilirsiniz. Müşteri değişiklik yaparken Satıcı, değişiklik etkinliklerini alır ve işlem ayrıntılarını günceller.

Bir satıcının alabileceği dört tür etkinlik vardır:

• Ödeme yöntemi değişikliği etkinliği
• Gönderim adresi değişikliği etkinliği
• Kargo seçeneği değişikliği etkinliği
• Satıcı doğrulama etkinliği

Ödeme yöntemi değişikliği etkinliği

Bir ödeme uygulaması birden fazla ödeme yöntemini destekleyebilir ve bir satıcı, müşterinin seçimine bağlı olarak özel bir indirim. Bu kullanım alanına değinmek için Ödeme yöntemi değişikliği etkinliği, satıcıyı yeni ödeme konusunda bilgilendirebilir yöntemi kullanarak toplam fiyatı indirimle güncelleyip iade edebilirler. ödeme uygulamasına geri dönelim.

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

Gönderim adresi değişikliği etkinliği

Ödeme uygulaması, isteğe bağlı olarak müşterinin kargo adresini sağlayabilir. Bu Manuel olarak girmek zorunda olmadığından müşteriler gönderim adresini tercih ettikleri ödeme yönteminde kaydedebilirler. yerine birden çok farklı satıcı web sitesi yerine kullanıyor.

Bir müşteri, ödeme profilindeki gönderim adresini İşlem başlatıldı, 'shippingaddresschange' etkinliği gönderilecek satıcıya gönderilir. Bu etkinlik, satıcının gönderim bedelini temel alarak toplam fiyatı güncelleyin ve ödeme uygulamasına iade edin.

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

Satıcı güncel adrese gönderim yapamıyorsa hata gönderebilir. komutuna döndürülen işlem ayrıntılarına bir hata parametresi ekleyerek ödeme uygulaması.

Kargo seçeneği değişikliği etkinliği

Satıcı, müşteriye birden fazla kargo seçeneği sunabilir ve bu seçeneği ödeme uygulamasına gönderebilirsiniz. Gönderim seçenekleri, tüm teslimatları fiyatları ve hizmet adlarını seçebileceği anlamına gelir. Örneğin:

• Standart gönderim - Ücretsiz
• Ekspres kargo - 5 ABD doları

Müşteri, bir ödeme uygulamasında kargo seçeneğini güncellediğinde 'shippingoptionchange' etkinliği satıcıya gönderilecek. Satıcı, ardından gönderim maliyetini belirleyin, toplam fiyatı güncelleyin ve ödeme uygulaması.

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

Satıcı, kendi müşteri özelliklerine göre kargo seçeneklerini dinamik olarak değiştirebilir. dikkat edin. Bu, satıcı size teklif sunmak istediğinde Yurt içi ve uluslararası müşteriler için farklı kargo seçeneği setleri mevcut.

Satıcı doğrulama etkinliği

Daha fazla güvenlik için, ödeme uygulamaları devam edebilir. Doğrulama mekanizmasının tasarımı ödeme uygulaması ancak satıcı doğrulama etkinliği, satıcıyı bilgilendirmek amacıyla kullanılır. URL'nin sonuna geldik.

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

6. adım: Satıcı ödemeyi doğrular ve işlemi tamamlar

Müşteri ödemeyi başarıyla yetkilendirdiğinde show() yöntemi bir vaat döndürür ve PaymentResponse PaymentResponse nesnesi aşağıdaki bilgileri içerir:

• Ödeme sonucu ayrıntıları
• Gönderim adresi
• Kargo seçeneği
• İletişim bilgileri

Bu noktada, tarayıcının kullanıcı arayüzü bir yükleme göstergesi göstermeye devam edebilir. Bu, İşlem henüz tamamlanmadı.

Ödeme uygulaması bir ödeme hatası veya hata nedeniyle feshedilirse show() tarafından döndürülen vaat reddedilir ve tarayıcı, ödemeyi sonlandırır. belirtir.

Ödemenin işlenmesi ve doğrulanması

PaymentResponse içindeki details, döndürülen ödeme kimlik bilgisi nesnesi ödeme uygulamasından Satıcı, kimlik bilgisini işlemek veya doğrulamak için kullanabilir ödeme yaparsınız. Bu kritik sürecin nasıl işlediği ödeme işleyiciye bağlıdır.

İşlemi tamamlama veya yeniden deneme

Satıcı işlemin başarılı mı yoksa başarısız mı olduğunu belirledikten sonra aşağıdakilerden birini yapabilirler:

• İşlemi tamamlamak için .complete() yöntemini çağırın ve yükleme göstergesi.
• Müşterinin, retry() yöntemini kullanarak yeniden denemesine izin verin.

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

Sonraki Adımlar

• ödeme yöntemi.
• Platforma özel ödeme uygulaması geliştirme hakkında daha fazla bilgi edinmek için: Android ödeme uygulamaları geliştirici kılavuzu.
• Web tabanlı ödeme uygulamaları geliştiricisinin rehberini inceleyin.