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

Eiji Kitamura

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 มีพารามิเตอร์ต่อไปนี้

เมื่อมีตัวเลือกการจัดส่ง สิ่งต่างๆ จะยุ่งยากขึ้นเล็กน้อย เนื่องจากราคารวมของ 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

supportedTypes ในการ์ดพื้นฐานพร้อมใช้งาน

เมื่อ 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 รองรับ "basic-card"

อาร์กิวเมนต์แรกสำหรับคอนสตรัคเตอร์ 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

ในส่วนตัวเลือกการจัดส่ง (อาร์กิวเมนต์ที่ 3 ของ 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.
     });
}