turuncukafalikiz
New member
Yarından sonraki günün işlevselliği: Ödeme Talepleri API’sı
Web uygulamalarında sipariş veya ödeme süreçlerini uygulamak bazen oldukça karmaşık olabilir. Şu anda W3C’de geliştirilmekte olan ve yaklaşık bir ay önce Ödeme Yöntemi Tanımlayıcıları ile birlikte “Aday Önerisi” olarak yayınlanan Ödeme Talebi API’si, bunu düzeltmeyi amaçlamaktadır.
API, tarayıcının bir sipariş sürecinde yer alan şu aktörler arasında bir aracı olarak kullanılmasını bekler: alacaklı (ör. çevrimiçi satıcı), ödemeyi gönderen (ör. alıcı) ve ödeme araçlarını sağlayan kişi (kredi kartı vb.).
Aşağıdaki türler API tarafından sağlanır:
- Ödeme talebi: Bir sipariş süreci için bir talebi temsil eder.
- Fatura adresi: Bir fatura adresini temsil eder.
- ödeme yanıtı: Bir sıralama işlemi için yanıtı temsil eder.
- PaymentRequestUpdateEtkinliği: Bir sipariş talebinin detayları değiştiğinde tetiklenen olay.
API’nin mevcut tarayıcı tarafından desteklenip desteklenmediği, her zamanki gibi bir web sitesinde özellik algılama yoluyla, örneğin dosyayı kontrol ederek kontrol edilebilir. Ödeme talebi-Nesne:
if (window.PaymentRequest) {
// Payment Request API wird unterstützt
} else {
// Payment Request API wird nicht unterstützt
}
Şu anda yalnızca Chrome, Opera ve Microsoft Edge API’yi desteklemektedir, Firefox’ta API, “about:config” içindeki “dom.payments.request.enabled” bayrağı aracılığıyla deneysel bir özellik olarak etkinleştirilebilir.
Ödeme isteklerinde bulunun
Bir ödeme talebinde bulunmak için bir örnek oluşturursunuz. Ödeme talebiburada üç yapılandırma nesnesi yapıcıya parametre olarak iletilebilir:
const methodData = { /* siehe Listings unten */ };
const details = { /* siehe Listings unten */ };
const options = { /* siehe Listings unten */ };
const paymentRequest = new PaymentRequest(
methodData,
details,
options
);
üzerinde yöntemVeri mevcut ödeme yöntemlerini belirtebilirsiniz. Mülk desteklenen yöntemler desteklenen ödeme yöntemleri için bir dizi tanımlayıcı saklayabilirsiniz:
// Konfiguration der Bezahlmethoden
const methodData = [
{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard'],
supportedTypes: ['debit', 'credit'],
}
}
];
Sipariş kimlik numarası, sipariş edilecek ürünler, nakliye masrafları vb. gibi siparişinizle ilgili daha fazla ayrıntı. yapılandırma nesnesi aracılığıyla erişilebilirler detaylar yapılandır:
// Konfiguration der Bestelldetails
const details = {
id: 'order-123-12312',
displayItems: [
{
label: 'Summe',
amount: { currency: 'EUR', value: '25.00' },
},
{
label: 'Mehrwertsteuer',
amount: { currency: 'EUR', value: '4.75' },
},
],
shippingOptions: [
{
id: 'standard',
label: 'Standardversand',
amount: { currency: 'EUR', value: '5.00' },
selected: true,
},
{
id: 'express',
label: 'Expressversand',
amount: { currency: 'EUR', value: '11.00' },
},
],
total: {
label: 'Gesamtsumme',
amount: { currency: 'EUR', value: '34.75' },
},
};
Üçüncü yapılandırma nesnesi hakkında bilgi seçenekler sipariş sürecinde kullanıcının hangi bilgileri girmesi gerektiğini belirlemek mümkündür, örneğin ad, e-posta adresi veya telefon numarası:
// Konfiguration der Pflichtangaben
const options = {
requestPayerEmail: true,
requestPayerName: true,
requestPayerPhone: true,
requestShipping: true,
};
Ödeme isteklerini gönder
Yöntem, bir ödeme talebi başlatmak ve ardından ilgili iletişim kutusunu açmak için kullanılır. Sergiye() için Ödeme talebi-Nesne. Yöntem, kullanıcı iletişim kutusu aracılığıyla ödeme işlemini tamamladığında yerine getirilen bir taahhüt nesnesi döndürür. Sonraki geri aramanın bir parçası olarak, kullanıcı tarafından girilen verilere erişmek, genellikle bunları doğrulama için sunucuya göndermek (daha sonra arayarak) mümkündür. doğrulamak için() sembolize edilmiş).
// Hier normalerweise Überprüfung durch Server
const verify = (paymentResponse) => Promise.resolve(true);
Yöntemin çağrılması Tamamlamak() daha sonra tarayıcıya ödeme işleminin tamamlandığını söyler. Başarılı bir ödeme için “başarılı” veya bir hata oluşursa “başarısız” değerleri parametre olarak iletilebilir. Spesifikasyona bağlı olarak, tarayıcı ilgili mesajı gösterip göstermemekte serbesttir.
paymentRequest.show()
.then((paymentResponse) => {
// Zugriff auf die vom Nutzer
// eingegebenen Daten.
const {
requestId,
methodName,
details,
shipping,
shippingOption,
payerName,
payerEmail,
payerPhone
} = paymentResponse;
// verify() als imaginäre Funktion, mit der
// die Bezahlanfrage mit der Serverseite überprüft wird
verify(paymentResponse).then((success) => {
if (success) {
console.log('Bezahlung erfolgreich durchgeführt');
return paymentResponse.complete('success');
} else {
console.error('Fehler bei Bezahlung');
return paymentResponse.complete('failure');
}
});
})
.catch((error) => {
console.error('Fehler:', error);
});
Çözüm
Ödeme İsteği API’si, web uygulamaları içindeki sipariş ve ödeme süreçlerini basitleştirmeyi ve standartlaştırmayı amaçlar. API’yi bugün test etmek isterseniz, yukarıda gösterilen kodu yukarıda belirtilen tarayıcılardan birinde çalıştırabilirsiniz. Bu arada, API iyileştirmeleri için yorumlar ve öneriler ilgili GitHub projesinin sorun sayfasında yayınlanabilir.
()
Haberin Sonu