Ö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
Milica Mihajlija
X GitHub Ana sayfa

Web Payments API'leri, tarayıcıda ilk kez yerleşik olarak bulunan özel ödeme özellikleridir. Web ödemeleri sayesinde satıcıların ödeme uygulamalarıyla entegrasyonu daha kolay hale gelirken müşteri deneyimi de kolaylaştırılır ve daha güvenli hale gelir.

Web Payments'ı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.

    BobPay (ödeme uygulaması) düğmesi bulunan bir peynir dükkanı web sitesinin şeması.

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

    BobPay uygulamasının modal pencerede başlatıldığı peynir dükkanı web sitesinin şeması. Bu modal pencerede gönderim seçenekleri ve toplam maliyet gösterilir.

  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.

    BobPay uygulama modalinde müşterinin farklı bir gönderim seçeneğini seçmesini gösteren şema. Satıcının BobPay'de gösterilen toplam maliyeti güncellediğini gösteren ikinci bir diyagram.

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

    Müşterinin düğmeye bastığını gösteren bir diyagram

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 bilgiler 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 isteyebileceğ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 öğesine isteğe bağlı kargo türü (shipping, delivery veya pickup) da 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, toplam fiyatın ayırtılması için satıcının ve ödeme işleyicinin sunucusu arasında iletişimi 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 başlatır. 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 nasıl işlediğini ayrıntılı olarak öğrenmek için Ödeme yöntemi oluşturma sayfasına göz atın.

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

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ı, PaymentRequest örneğini kullanarak müşterinin ödeme uygulamasının kullanılabilir 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 bir promise belirtilmezse tarayıcı, ödeme kullanıcı arayüzünü hemen başlatır.

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ı 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ı gönderebilir.

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 aralarından seçim yapabileceğ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, bir satıcı yerel ve uluslararası müşteriler için farklı kargo seçenekleri sunmak istediğinde kullanışlıdır.

Satıcı doğrulama etkinliği

Ödeme uygulamaları, 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
  });
});

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ı bir ödeme hatası veya hatası nedeniyle sonlandırılırsa show() tarafından döndürülen taahhüt reddedilir ve tarayıcı ödeme işlemini sonlandırır.

Ödemenin işlenmesi ve doğrulanması

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