การเปลี่ยนแปลงใน API คำขอการชำระเงิน

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

shippingType=&#39;delivery&#39;
shippingType="delivery"
shippingType=&#39;pickup&#39;
shippingType="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.
     });
}