Chrome 62
PaymentDetailsModifier พร้อมใช้งานแล้ว
ในคำขอการชำระเงิน มีกรณีที่คุณต้องการมอบส่วนลดหรือการเรียกเก็บเงินเพิ่มเติมโดยขึ้นอยู่กับวิธีการชำระเงินที่ลูกค้าเลือก
คุณใช้ PaymentDetailsModifier
เพื่อบรรลุเป้าหมายนี้ได้
เพิ่มพร็อพเพอร์ตี้ modifiers
ลงในอาร์กิวเมนต์ที่ 2 ของเครื่องมือสร้าง PaymentRequest
พร้อมด้วยอาร์เรย์ของออบเจ็กต์ PaymentDetailsModifier
ซึ่งเป็นกฎเชิงประกาศเกี่ยวกับวิธีการแก้ไขรายการที่แสดงและยอดรวม โดยขึ้นอยู่กับวิธีการชำระเงินที่ลูกค้าเลือก
ตัวอย่างต่อไปนี้แสดงวิธีที่คุณประกาศว่าผู้ใช้จะถูกเรียกเก็บค่าธรรมเนียมการดำเนินการมูลค่า $3 จากการเลือกการชำระเงินผ่านบัตรเครดิต
let methods = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard']
supportedTypes: ['credit', 'debit']
}
}];
let details = {
displayItems: [{
label: 'T-shirt',
amount: { currency: 'USD', value: '68.00' }
}],
total: {
label: 'Total price',
amount: { currency: 'USD', value: '68.00' }
},
modifiers: [{
supportedMethods: 'basic-card',
data: {
supportedTypes: ['credit']
},
additionalDisplayItems: [{
label: 'Processing fee',
amount: { currency: 'USD', value: '3.00' }
}],
total: {
label: 'Credit card price',
amount: {currency: ‘USD’, value: ‘71.00’}}
}]
};
let options = {};
let request = new PaymentRequest(methods, details, options);
ในชีตคำขอการชำระเงินจริง ทันทีที่เลือกการชำระเงินด้วยบัตรเครดิต ผู้ใช้จะเห็นรายการเพิ่มเติมชื่อ "ค่าธรรมเนียมการดำเนินการ" โดยมีการเรียกเก็บเงินจำนวน $3 รวมทั้งหมดเป็น $71.00
PaymentDetailsModifier
มีพารามิเตอร์ต่อไปนี้
ชื่อพร็อพเพอร์ตี้ | |
---|---|
supportedMethods | ระบุว่าวิธีการชำระเงินใดจะใช้กฎนี้ |
additionalDisplayItems |
สินค้าที่แสดงเพิ่มเติมที่คุณต้องการเพิ่มส่วนลดหรือการเรียกเก็บเงินเพิ่มเติม |
total | ราคารวมหลังจากเพิ่ม DisplayItems เพิ่มเติม |
data | สำหรับการชำระเงินด้วย basic-card จะใช้วิธีนี้เพื่อกรองประเภทบัตรที่เจาะจงด้วย supportedTypes มิเช่นนั้น การใช้พารามิเตอร์นี้จะขึ้นอยู่กับวิธีการชำระเงิน (แอปการชำระเงิน) โปรดดูเอกสารประกอบเกี่ยวกับวิธีการชำระเงินแต่ละวิธี |
ทุกอย่างอาจจะซับซ้อนเมื่อมีตัวเลือกการจัดส่ง เพราะราคารวมของ modifiers
จะเป็นราคาคงที่และต้องแก้ไขแบบไดนามิก
เพื่อให้บรรลุเป้าหมายนี้ คุณจะแก้ไข additionalDisplayItems
และ total
ของพร็อพเพอร์ตี้ modifiers
ในเหตุการณ์ shippingaddresschange
และ shippingoptionchange
ได้เช่นเดียวกับพร็อพเพอร์ตี้ displayItems
ของออบเจ็กต์ PaymentDetails
ตอนนี้พร็อพเพอร์ตี้ supportedMethods รับสตริง
พร็อพเพอร์ตี้ supportedMethods
ในออบเจ็กต์ PaymentMethodData
(อาร์กิวเมนต์แรกไปยังตัวสร้าง PaymentRequest
) ได้รับอาร์เรย์ของสตริงที่ระบุวิธีการชำระเงิน ตอนนี้มีการใช้สตริงเดียวเป็นอาร์กิวเมนต์
โปรดทราบว่าการระบุอาร์เรย์จะยังทำงานต่อไปในขณะนี้
เวลาเก่า - ยังคงใช้ได้ในขณะนี้
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: ['https://bobpay.xyz'] }];
แบบใหม่ - แบบใหม่
var methodData = [{ supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: 'https://bobpay.xyz' }];
Chrome 61
ประเภทที่รองรับในการ์ดพื้นฐานพร้อมใช้งาน
เมื่อ supportedMethods
คือ "basic-card
" คุณสามารถระบุ supportedTypes
เพื่อระบุว่ารองรับการ์ดประเภทใดระหว่าง "credit
", "debit
" และ "prepaid
"
var methodData = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
supportedTypes: ['credit', 'debit', 'prepaid']
}
}];
โปรดตรวจสอบประเภทบัตรที่มีเกตเวย์การชำระเงินอีกครั้งเนื่องจากการกรองนี้อาจทำงานได้ไม่สมบูรณ์แบบขึ้นอยู่กับว่ามาจากแหล่งที่มาใด
Chrome 57
PaymentRequest พร้อมใช้งานแล้วใน iframe
ตอนนี้คุณเรียกใช้ Payment Request API ได้จากภายใน iframe
แล้วด้วยการเพิ่มแอตทริบิวต์ allowpaymentrequest
ลงในองค์ประกอบ iframe
<iframe src="/totally/fake/url" allowpaymentrequest></iframe>
PaymentMethodData รองรับ "บัตรพื้นฐาน"
อาร์กิวเมนต์แรกไปยังตัวสร้าง PaymentRequest()
คืออาร์เรย์ของข้อมูลวิธีการชำระเงิน รูปแบบ PaymentMethodData
ได้รับการปรับเปลี่ยนในรุ่นนี้
เวลาเก่า - ยังคงใช้ได้ในขณะนี้
var methodData = [{ supportedMethods: ['visa', 'mastercard', 'amex', 'jcb'] }]; var request = new PaymentRequest(methodData, details, options);
ใหม่ - โครงสร้างใหม่
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }]; var request = new PaymentRequest(methodData, details, options);
รูปแบบของพร็อพเพอร์ตี้ data
ขึ้นอยู่กับค่าใน supportedMethods
และเป็นไปตามข้อกำหนดการ์ดพื้นฐาน โปรดทราบว่าข้อกำหนดรวมถึง supportedTypes
ซึ่งยอมรับ credit
, debit
หรือ prepaid
แต่ Chrome 57 ไม่สนใจพร็อพเพอร์ตี้นี้และถือว่าค่าใน supoprtedNetworks
เป็นบัตรเครดิต
var methodData = [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay'],
supportedTypes: ['credit'] <= not available
}
}];
Chrome 56
รอดำเนินการ
ในส่วนข้อมูลรายการการชำระเงิน นักพัฒนาแอปสามารถเพิ่ม pending
เพื่อระบุว่าราคายังไม่สมบูรณ์ ช่อง pending
จะยอมรับค่าบูลีน
{
label: "State tax",
amount: { currency: "USD", value : "5.00" },
pending: true
},
ซึ่งโดยทั่วไปแล้วจะใช้เพื่อแสดงรายการโฆษณา เช่น ค่าจัดส่งหรือภาษี ซึ่งขึ้นอยู่กับการเลือกที่อยู่สำหรับจัดส่งหรือตัวเลือกการจัดส่ง Chrome จะระบุช่องที่รอดำเนินการใน UI สำหรับคำขอการชำระเงิน
requestPayerName
ในฐานะส่วนหนึ่งของตัวเลือกการจัดส่ง
(อาร์กิวเมนต์ที่สามกับ PaymentRequest
) ตอนนี้นักพัฒนาแอปสามารถเพิ่ม requestPayerName
เพื่อขอชื่อผู้ชำระเงินแยกจากข้อมูลที่อยู่สำหรับจัดส่งได้แล้ว
requestPayerName
ยอมรับค่าบูลีน
shippingType
ในฐานะส่วนหนึ่งของตัวเลือกการจัดส่ง
(อาร์กิวเมนต์ที่ 3 ของ PaymentRequest
) ตอนนี้นักพัฒนาแอปสามารถเพิ่ม shippingType
เพื่อขอให้ UI แสดง "การนำส่ง" หรือ "รับสินค้า" แทน "การจัดส่ง"
shippingType
ยอมรับสตริง shipping
(ค่าเริ่มต้น), delivery
หรือ pickup
ฟังก์ชัน Serializer พร้อมใช้งานสำหรับ PaymentResponse และ PaymentAddress
ออบเจ็กต์ PaymentResponse
และออบเจ็กต์ PaymentAddress
แปลงเป็นไฟล์ JSON ได้แล้ว นักพัฒนาซอฟต์แวร์จะแปลงตัวแปรหนึ่งเป็นออบเจ็กต์ JSON ได้โดยเรียกใช้ฟังก์ชัน toJSON()
และหลีกเลี่ยงการสร้างฟังก์ชัน toDict()
ที่ยุ่งยาก
request.show().then(response => {
let res = response.toJSON();
});
canMakePayment
นอกจากความพร้อมใช้งานของ API แล้ว คุณยังตรวจสอบได้ว่าผู้ใช้มีวิธีการชำระเงินที่ใช้งานอยู่หรือไม่ก่อนที่จะเรียกใช้ Payment Request API โปรดทราบว่าการดำเนินการนี้เป็นแบบไม่บังคับเนื่องจากผู้ใช้ยังคงเพิ่มวิธีการชำระเงินใหม่ใน UI การชำระเงินได้
let request = new PaymentRequest(methods, details, options);
if (request.canMakePayment) {
request.canMakePayment().then(result => {
if (result) {
// Payment methods are available.
} else {
// Payment methods are not available, but users can still add
// a new payment method in Payment UI.
}
}).catch(error => {
// Unable to determine.
});
}