Ödeme işleminin ömrü

Satıcıların ödeme uygulamalarını nasıl entegre ettiğini ve ödeme işlemlerinin Payment Request API ile nasıl çalıştığını öğrenin.

Eiji Kitamura

Milica Mihajlija

Web Ödemeleri API'leri, ilk kez tarayıcıya yerleştirilen özel ödeme özellikleridir. Web Ödemeleri sayesinde, satıcının ödeme uygulamalarıyla entegrasyonu kolaylaşırken müşteri deneyimi daha kolay ve daha güvenli hale gelir.

Web Ödemeleri'ni kullanmanın avantajları hakkında daha fazla bilgi edinmek için Ödeme uygulamalarını Web Ödemeleriyle destekleme konusuna göz atın.

Bu makale, satıcı web sitesindeki ödeme işlemlerinde size yol gösterir ve ödeme uygulaması entegrasyonunun nasıl çalıştığını anlamanıza yardımcı olur.

Süreç 6 adımdan oluşur:

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

3. Müşteri ödeme düğmesine basar.

   

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

   

5. Müşteri herhangi bir ayrıntıyı (gönderim seçenekleri veya adresi gibi) değiştirirse satıcı, değişikliği yansıtan işlem ayrıntılarını 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

Bir müşteri satın alma işlemi yapmaya karar verdiğinde satıcı, ödeme işlemini bir PaymentRequest nesnesi oluşturarak başlatır. Bu nesne, işlemle ilgili önemli bilgiler içerir:

• İşlemi gerçekleştirmek için kabul edilen ödeme yöntemleri ve bunların verileri.
• Toplam fiyat (zorunlu) ve öğelerle ilgili bilgiler gibi ayrıntılar.
• Satıcıların gönderim adresi ve gönderim seçeneği gibi gönderim bilgilerini isteyebildiği seçenekler.
• Satıcılar fatura adresini, ödeme yapanın adını, e-posta adresini ve telefon numarasını da isteyebilir.
• Satıcılar, PaymentRequest içinde isteğe bağlı gönderim türünü (shipping, delivery veya pickup) de ekleyebilir. Ödeme uygulaması, bu bilgileri kullanıcı arayüzünde doğru etiketleri görüntülemek için 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 kimliği ekleme

Bazı ödeme işleyiciler, satıcıdan işlem bilgilerinin bir parçası olarak önceden düzenledikleri işlem kimliğini sağlamasını isteyebilir. Tipik bir entegrasyon, toplam fiyatı ayırmak için satıcı ile ödeme işleyicinin sunucusu arasında kurulan iletişimi içerir. Bu sayede kötü niyetli müşterilerin işlemin sonunda bir doğrulama ile fiyatı değiştirmesi ve satıcıyı aldatması önlenir.

Satıcı, PaymentMethodData nesnesinin data özelliğinin bir parçası olarak işlem kimliği iletebilir.

İşlem bilgilerini sağlayan tarayıcı, ödeme yöntemi tanımlayıcılarına göre PaymentRequest politikasında belirtilen ödeme uygulamalarını keşfetme sürecinden geçer. Bu şekilde tarayıcı, satıcı işleme devam etmeye hazır olduğunda başlatılacak ödeme uygulamasını belirleyebilir.

Keşif sürecinin nasıl işlediğini ayrıntılı olarak öğrenmek için Ödeme yöntemi oluşturma başlıklı makaleyi inceleyin.

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

Satıcılar birçok ödeme yöntemini destekleyebilir, ancak ödeme düğmelerini yalnızca müşterinin gerçekten kullanabileceği yöntemlere sunmalıdır. Kullanılamayan bir ödeme düğmesinin gösterilmesi kullanıcı deneyimini olumsuz etkiler. Satıcı, PaymentRequest nesnesinde belirtilen ödeme yönteminin müşteri için uygun olmayacağını tahmin edebiliyorsa bir yedek çözüm sağlayabilir veya bu düğmeyi hiç göstermeyebilir.

Satıcı, PaymentRequest örneği kullanarak müşterinin ödeme uygulamasının olup olmadığını sorgulayabilir.

Müşterinin ödeme uygulaması mevcut mu?

Müşterinin cihazında bir ödeme uygulaması varsa PaymentRequest canMakePayment() yöntemi true değerini döndürür. "Kullanılabilir", ödeme yöntemini destekleyen bir ödeme uygulamasının keşfedildiği, platforma özel ödeme uygulamasının yüklü olduğu veya web tabanlı ödeme uygulamasının kaydedilmeye hazır olduğu anlamına gelir.

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ı, PaymentRequest örneğinin show() yöntemini çağırır. Bu yöntem, ödeme kullanıcı arayüzünün başlatılmasını hemen tetikler.

Nihai toplam fiyatın dinamik olarak ayarlanması (örneğin, bir sunucudan) durumunda satıcı, toplam tutar öğreninceye kadar ödeme kullanıcı arayüzünün kullanıma sunulmasını erteleyebilir.

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

Nihai toplam fiyat belirlenene kadar ödeme kullanıcı arayüzünü erteleme demosuna göz atın.

Satıcı, ödeme kullanıcı arayüzünü ertelemek için show() yöntemine bir söz verir. Taahhüt çözümlenene ve işlem başlatılmaya hazır olana kadar tarayıcıda bir yükleme göstergesi gösterilir.

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ı ödeme kullanıcı arayüzünü hemen başlatır.

Not: Ödeme işleyici, toplam fiyat belirlendikten sonra bir işlem kimliği döndürecek şekilde tasarlandıysa kimlik, söz verilen sonucun bir parçası olarak aktarılabilir.

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

Tarayıcı, platforma özel veya web tabanlı bir ödeme uygulaması başlatabilir. (Chrome'un hangi ödeme uygulamasını başlatacağını nasıl belirlediği hakkında daha fazla bilgi edinebilirsiniz.)

Ödeme uygulamasının nasıl oluşturulacağı çoğunlukla geliştiriciye bağlıdır, ancak satıcıdan ve satıcıya gönderilen etkinlikler ve bu etkinliklerle birlikte iletilen verilerin yapısı standart hale getirilir.

Ödeme uygulaması başlatıldığında, 1. adımdaki PaymentRequest nesnesine iletilen işlem bilgilerini alır. Bu bilgiler arasında şunlar bulunur:

• Ö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: Bir satıcının, müşteri işlemlerine bağlı olarak işlem ayrıntılarını nasıl güncelleyebilir?

Müşterilerin, ödeme uygulamasında ödeme yöntemi ve gönderim seçeneği gibi işlem ayrıntılarını değiştirme seçeneği vardır. 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 etkinlik türü vardır:

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

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

Ödeme uygulamaları birden fazla ödeme yöntemini destekleyebilir ve bir satıcı, müşterinin seçimine bağlı olarak özel bir indirim sunabilir. Bu kullanım alanını kapsamak için ödeme yöntemi değişikliği etkinliği, satıcıyı yeni ödeme yöntemi konusunda bilgilendirebilir. Böylece satıcı toplam fiyatı indirimle güncelleyip ödeme uygulamasına iade edebilir.

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 gönderim adresini sağlayabilir. Forma bilgileri manuel olarak girmek zorunda olmadıklarından ve gönderim adreslerini birden fazla farklı satıcı web sitesi yerine tercih ettikleri ödeme uygulamasında depolayabildiğinden bu müşteriler için kullanışlıdır.

Bir müşteri, işlem başlatıldıktan sonra ödeme uygulamasında gönderim adresini güncellerse satıcıya bir 'shippingaddresschange' etkinliği gönderilir. Bu etkinlik, satıcının yeni adrese göre gönderim maliyetini belirlemesine, toplam fiyatı güncellemesine ve ödeme uygulamasına iade etmesine yardımcı olur.

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

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

Not: Satıcılar, ödeme işlemine onay verene kadar müşterilerin tam gönderim adresini almaz.

Gönderim seçeneği değişikliği etkinliği

Bir satıcı, müşteriye birden fazla gönderim seçeneği sunabilir ve bu seçeneği ödeme uygulamasına devredebilir. Gönderim seçenekleri, müşterinin seçim yapabileceği fiyatlar ve hizmet adlarının bir listesi olarak görüntülenir. Örneğin:

• Standart gönderim - Ücretsiz
• Ekspres kargo: 5 TRY

Müşteri, ödeme uygulamasında gönderim seçeneğini güncellediğinde satıcıya 'shippingoptionchange' etkinliği gönderilir. Ardından satıcı gönderim maliyetini belirleyebilir, toplam fiyatı güncelleyebilir ve ödeme uygulamasına iade edebilir.

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

Satıcı, müşterinin gönderim adresine göre gönderim seçeneklerini de dinamik olarak değiştirebilir. Bu, bir satıcı yurt içi ve uluslararası müşterilere farklı kargo seçenekleri sunmak istediğinde kullanışlıdır.

Satıcı doğrulama etkinliği

Ödeme uygulaması, daha fazla güvenlik için ödeme akışına geçmeden önce satıcı doğrulaması yapabilir. Doğrulama mekanizmasının tasarımı, ödeme uygulamasına bağlıdır ancak satıcı doğrulama etkinliği, satıcıya kendisini doğrulamak için kullanabileceği URL hakkında bilgi verir.

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

Not: Satıcı doğrulama etkinliği desteği Apple Safari ile sınırlıdır. Chromium tabanlı tarayıcılar, Mayıs 2020 itibarıyla bu etkinliği uygulamadı.

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

Müşteri ödemeyi başarıyla onayladığında show() yöntemi, PaymentResponse ile sonuçlanan bir söz verir. 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ünde hâlâ işlemin henüz tamamlanmadığını belirten bir yükleme göstergesi görünebilir.

Ödeme uygulaması bir ödeme hatası veya hatası nedeniyle sonlandırılırsa show() uygulamasından döndürülen söz reddedilir ve tarayıcı, ödeme işlemini sonlandırır.

Ödemeyi işleme ve doğrulama

PaymentResponse öğesindeki details, ödeme uygulamasından döndürülen ödeme kimlik bilgisi nesnesidir. Satıcı, ödemeyi işlemek veya doğrulamak için kimlik bilgisini kullanabilir. Bu kritik sürecin işleyiş şekli ödeme işleyiciye bağlıdır.

İşlemi tamamlama veya yeniden deneme

Satıcı, işlemin başarılı veya başarısız olduğunu belirledikten sonra aşağıdakilerden birini yapabilir:

• İşlemi tamamlamak ve yükleme göstergesini kapatmak için .complete() yöntemini çağırın.
• Müşterinin retry() yöntemini çağırarak 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 tanımlayıcısını nasıl beyan edeceğinizi ayrıntılı olarak Ödeme yöntemi oluşturma bölümünde öğrenin.
• Platforma özel ödeme uygulamalarının nasıl oluşturulacağını Android ödeme uygulamaları geliştirici kılavuzundan öğrenebilirsiniz.
• Web tabanlı ödeme uygulamaları geliştirici kılavuzundan web tabanlı ödeme uygulaması oluşturmayı öğrenin.