Thay đổi về API yêu cầu thanh toán

Eiji Kitamura

Chrome 62

PaymentDetailsModifier hiện đã có

Trong một yêu cầu thanh toán, có những trường hợp bạn muốn cung cấp chiết khấu hoặc tính thêm phí tuỳ thuộc vào phương thức thanh toán mà khách hàng chọn. PaymentDetailsModifier là tính năng mà bạn có thể sử dụng để đạt được điều này.

Thêm thuộc tính modifiers vào đối số thứ hai của hàm khởi tạo PaymentRequest cùng với một mảng đối tượng PaymentDetailsModifier là các quy tắc khai báo về cách sửa đổi các mục hiển thị và tổng số tiền tuỳ thuộc vào phương thức thanh toán mà khách hàng chọn.

Ví dụ sau đây cho thấy cách bạn khai báo người dùng sẽ bị tính phí xử lý là 3 USD khi chọn thanh toán bằng thẻ tín dụng.

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);

Trên trang tính Yêu cầu thanh toán thực tế, ngay khi chọn phương thức thanh toán bằng thẻ tín dụng, người dùng sẽ thấy một mục hiển thị bổ sung có tên "Phí xử lý" với khoản phí 3 đô la Mỹ, tổng giá là 71 đô la Mỹ.

PaymentDetailsModifier chứa các thông số sau:

Khi có các lựa chọn vận chuyển, mọi thứ sẽ trở nên hơi phức tạp vì tổng giá của modifiers không thể là giá tĩnh và cần được sửa đổi linh động.

Để làm được việc này, bạn sẽ sửa đổi additionalDisplayItems và total của thuộc tính modifiers khi có sự kiện shippingaddresschange và shippingoptionchange, giống như cách bạn làm với thuộc tính displayItems của đối tượng PaymentDetails.

Thuộc tính supportedMethods hiện nhận một chuỗi

Thuộc tính supportedMethods trong đối tượng PaymentMethodData (đối số đầu tiên cho hàm khởi tạo PaymentRequest) đã lấy một mảng các chuỗi cho biết một phương thức thanh toán. Bây giờ, hàm này đang lấy một chuỗi duy nhất làm đối số.

Xin lưu ý rằng việc cung cấp một mảng sẽ tiếp tục hoạt động trong thời gian này.

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

Bạn có thể sử dụng supportedTypes trong thẻ cơ bản

Khi supportedMethods là "basic-card", giờ đây, bạn có thể cung cấp supportedTypes để cho biết loại thẻ nào được hỗ trợ trong số "credit",  "debit" và "prepaid".

var methodData = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
     'diners', 'discover', 'mir', 'unionpay']
   supportedTypes: ['credit', 'debit', 'prepaid']
 }
}];

Hãy nhớ kiểm tra kỹ loại thẻ với cổng thanh toán của bạn vì bộ lọc này có thể không hoạt động hoàn hảo tuỳ thuộc vào nguồn gốc của thẻ.

Chrome 57

PaymentRequest hiện có sẵn bên trong iframe

Giờ đây, bạn có thể gọi API Yêu cầu thanh toán từ trong iframe bằng cách thêm thuộc tính allowpaymentrequest vào phần tử iframe.

<iframe src="/totally/fake/url" allowpaymentrequest></iframe>

PaymentMethodData hỗ trợ "basic-card"

Đối số đầu tiên cho hàm khởi tạo PaymentRequest() là một mảng dữ liệu phương thức thanh toán. Định dạng PaymentMethodData đã được thay đổi trong bản phát hành này.

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);

Định dạng của thuộc tính data phụ thuộc vào giá trị trong supportedMethods và dựa trên thông số kỹ thuật của Thẻ cơ bản. Xin lưu ý rằng thông số kỹ thuật bao gồm supportedTypes chấp nhận credit, debit hoặc prepaid, nhưng Chrome 57 sẽ bỏ qua thuộc tính này và coi mọi giá trị trong supoprtedNetworks là thẻ tín dụng.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay'],
       supportedTypes: ['credit'] <= not available
     }
}];

Chrome 56

đang chờ xử lý

Trong thông tin về mặt hàng thanh toán, nhà phát triển có thể thêm pending để cho biết giá chưa được xác định đầy đủ. Trường pending chấp nhận giá trị boolean.

    {
      label: "State tax",
      amount: { currency: "USD", value : "5.00" },
      pending: true
    },

Thuộc tính này thường được dùng để hiển thị các mục hàng như phí vận chuyển hoặc số tiền thuế phụ thuộc vào lựa chọn địa chỉ giao hàng hoặc phương thức giao hàng. Chrome cho biết các trường đang chờ xử lý trong giao diện người dùng cho yêu cầu thanh toán.

requestPayerName

Trong tuỳ chọn vận chuyển (đối số thứ ba cho PaymentRequest), giờ đây, nhà phát triển có thể thêm requestPayerName để yêu cầu tên của người thanh toán tách biệt với thông tin về địa chỉ giao hàng. requestPayerName chấp nhận giá trị boolean.

shippingType

Trong phương thức vận chuyển (đối số thứ ba cho PaymentRequest), nhà phát triển hiện có thể thêm shippingType để yêu cầu giao diện người dùng hiển thị "giao hàng" hoặc "tự lấy hàng" thay vì "vận chuyển". shippingType chấp nhận các chuỗi shipping (mặc định), delivery hoặc pickup.

Các hàm chuyển đổi tuần tự có sẵn cho PaymentResponse và PaymentAddress

Đối tượng PaymentResponse và đối tượng PaymentAddress hiện có thể chuyển đổi tuần tự JSON. Nhà phát triển có thể chuyển đổi một đối tượng thành đối tượng JSON bằng cách gọi hàm toJSON() và tránh tạo các hàm toDict() cồng kềnh.

request.show().then(response => {
     let res = response.toJSON();
});

canMakePayment

Ngoài việc API có sẵn hay không, bạn có thể kiểm tra xem người dùng có phương thức thanh toán đang hoạt động hay không trước khi gọi API Yêu cầu thanh toán. Hãy nhớ rằng việc này là không bắt buộc vì người dùng vẫn có thể thêm phương thức thanh toán mới trên giao diện người dùng thanh toán.

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.
     });
}