Ö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 Payments API'leri, tarayıcıya ilk kez yerleştirilmiş özel ödeme özellikleridir. Web ödemeleri sayesinde satıcıların ödeme uygulamalarıyla entegrasyonu daha basit hale gelirken müşteri deneyimi de kolaylaştırılır ve daha güvenli hale gelir.

Web Payments'ı kullanmanın avantajları hakkında daha fazla bilgi edinmek için Ödeme uygulamalarını Web Payments ile güçlendirme başlıklı makaleyi inceleyin.

Bu makalede, satıcı web sitesindeki bir ödeme işleminde size yol gösterilir ve ödeme uygulaması entegrasyonunun işleyiş şekli açıklanır.

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

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

   

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

   

5. Müşteri herhangi bir ayrıntıyı (ör. gönderim seçenekleri veya adresi) değiştirirse 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

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

• Kabul edilen ödeme yöntemleri ve işlemi işlemek için bu yöntemlerle ilgili veriler.
• Toplam fiyat (zorunlu) ve öğelerle ilgili bilgiler gibi ayrıntılar.
• Satıcıların kargo adresi ve kargo seçeneği gibi kargo bilgileri isteğinde bulunabileceği seçenekler.
• Satıcılar fatura adresini, ödemeyi yapan kişinin adını, e-posta adresini ve telefon numarasını da isteyebilir.
• Satıcılar, PaymentRequest alanına isteğe bağlı gönderim türünü (shipping, delivery veya pickup) de ekleyebilir. Ödeme uygulaması, kullanıcı arayüzünde doğru etiketleri göstermek için bunu 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şleyicileri, satıcının işlem bilgileri kapsamında önceden verdiği işlem kimliğini sağlamasını zorunlu tutabilir. Tipik bir entegrasyon, satıcının ve ödeme işleyicinin sunucusu arasında toplam fiyatı ayırmak için iletişim içerir. Bu sayede, kötü niyetli müşterilerin fiyatı değiştirmesi ve işlemin sonunda doğrulama yaparak satıcıyı aldatması önlenir.

Satıcı, PaymentMethodData sınıfının data mülkü kapsamında bir işlem kimliği iletebilir.

Tarayıcı, işlem bilgilerini sağladığında ödeme yöntemi tanımlayıcılarına göre PaymentRequest içinde belirtilen ödeme uygulamalarının keşif sürecini gerçekleştirir. Bu sayede tarayıcı, satıcı işleme devam etmeye hazır olduğunda başlatılacak ödeme uygulamasını belirleyebilir.

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

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

Satıcılar birçok ödeme yöntemini destekleyebilir ancak yalnızca müşterinin gerçekten kullanabileceği ödeme düğmelerini sunmalıdır. Kullanılamayacak bir ödeme düğmesi göstermek kötü bir kullanıcı deneyimidir. Satıcı, PaymentRequest nesnesinde belirtilen bir ödeme yönteminin müşteri için işe yaramayacağını tahmin ederse yedek bir çözüm sunabilir veya bu düğmeyi hiç göstermeyebilir.

Satıcılar, PaymentRequest örneğini kullanarak bir müşterinin ödeme uygulamasına sahip olup olmadığını sorgulayabilir.

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

Müşterinin cihazında ö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 bulunduğu ve 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 hemen başlatılmasını tetikler.

Nihai toplam fiyat dinamik olarak ayarlanırsa (ör. bir sunucudan alınırsa) satıcı, toplam tutar bilinene kadar ödeme kullanıcı arayüzünün başlatılmasını erteleyebilir.

Ödeme kullanıcı arayüzünün lansmanı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. Sözleşme çözülene ve işlem başlamaya 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 belirtilen bir promise yoksa 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, promise sonucunun bir parçası olarak iletilebilir.

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ğı büyük ölçüde geliştiricinin tercihine bağlıdır ancak satıcıya ve satıcıdan gönderilen etkinliklerin yanı sıra bu etkinliklerle birlikte iletilen verilerin yapısı standarttır.

Ödeme uygulaması başlatıldığında, 1. adımda PaymentRequest nesnesine iletilen işlem bilgilerini alır. Bu bilgiler ş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üşterinin işlemlerine bağlı olarak işlem ayrıntılarını nasıl güncelleyebilir?

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

Satıcıları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

Ödeme uygulamaları birden fazla ödeme yöntemini destekleyebilir ve satıcılar, müşterinin seçimine bağlı olarak özel indirimler sunabilir. Bu kullanım alanını karşılamak için ödeme yöntemi değişikliği etkinliği, satıcıyı yeni ödeme yöntemi hakkında bilgilendirebilir. Böylece satıcı, toplam fiyatı indirimle güncelleyip ödeme uygulamasına geri gönderebilir.

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

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

Ödeme uygulamaları isteğe bağlı olarak müşterinin gönderim adresini sağlayabilir. Bu, müşterilerin bir forma herhangi bir ayrıntıyı manuel olarak girmek zorunda kalmamaları ve gönderim adreslerini birden fazla farklı satıcı web sitesinden ziyade tercih ettikleri ödeme uygulamalarında depolayabilmeleri açısından 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 kargo maliyetini belirlemesine, toplam fiyatı güncellemesine ve ödeme uygulamasına döndürmesine yardımcı olur.

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

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

Not: Satıcılar, ödemeye yetki verene kadar müşterilerin gönderim adresinin tamamını almaz.

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

Satıcılar müşterilere birden fazla kargo seçeneği sunabilir ve bu seçimi ödeme uygulamasına devredebilir. Kargo seçenekleri, müşterinin seçebileceği fiyatlar ve hizmet adlarının listesi olarak gösterilir. Örneğin:

• Standart kargo - Ücretsiz
• Ekspres kargo: 5 ABD doları

Bir müşteri, ödeme uygulamasındaki gönderim seçeneğini güncellediğinde satıcıya bir 'shippingoptionchange' etkinliği gönderilir. Ardından satıcı, kargo maliyetini belirleyebilir, toplam fiyatı güncelleyebilir ve ödeme uygulamasına geri gönderebilir.

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

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

Satıcı doğrulama etkinliği

Ödeme uygulaması, ek 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ıyı kendisini doğrulamak için kullanabileceği URL hakkında bilgilendirir.

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

Not: Satıcı doğrulama etkinliği desteği yalnızca Apple Safari ile sınırlıdır. Chromium tabanlı tarayıcılarda Mayıs 2020 itibarıyla bu etkinlik uygulanmıyor.

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

Müşteri ödemeyi başarıyla yetkilendirdiğinde show() yöntemi, PaymentResponse değerine çözümlenen bir promise döndürür. 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ı kullanıcı arayüzünde işlem henüz tamamlanmadığı için bir yükleme göstergesi gösterilmeye devam edebilir.

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

Ödemeyi işleme ve doğrulama

PaymentResponse içindeki 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ı olup olmadığını belirledikten sonra aşağıdakilerden birini yapabilir:

• İşlemi tamamlamak ve yükleme göstergesini kapatmak için .complete() yöntemini çağırın.
• retry() yöntemini çağırarak müşterinin tekrar 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 oluşturma başlıklı makalede, ödeme yöntemi tanımlayıcısını nasıl beyan edeceğinizi ayrıntılı olarak öğrenebilirsiniz.
• Platforma özel bir ödeme uygulaması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ını nasıl oluşturacağınızı öğrenin.