Trang này được dịch bởi Cloud Translation API.

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

Eiji Kitamura

Twitter GitHub Sự cố Cột hai cột

Chrome 62

Hiện đã có PaymentDetailsModifier

Trong yêu cầu thanh toán, có thể có những trường hợp bạn muốn cung cấp khoản chiết khấu hoặc phụ 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 bạn có thể sử dụng để làm đượ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. Đây 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 mặt, tuỳ thuộc vào phương thức thanh toán mà khách hàng chọn.

Ví dụ sau cho thấy cách bạn khai báo người dùng bị tính phí xử 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 Yêu cầu thanh toán thực tế, ngay khi chọn thanh toán bằng thẻ tín dụng, người dùng sẽ thấy thêm mục hiển thị có tên "Phí xử lý" với khoản phí 3 USD, với tổng giá là 71 USD.

PaymentDetailsModifier chứa các tham số sau:

Tên tài sản
`supportedMethods`	Chỉ định phương thức thanh toán sẽ áp dụng quy tắc này.
`additionalDisplayItems`	Các mặt hàng trưng bày bổ sung mà bạn muốn thêm chiết khấu hoặc phụ phí.
`total`	Tổng giá sau khi thêm các gói additionalDisplayItems.
`data`	Đối với khoản thanh toán cho `basic-card`, thông tin này sẽ được dùng để lọc một số loại thẻ cụ thể bằng `supportedTypes`. Nếu không, việc sử dụng thông số này phụ thuộc vào phương thức thanh toán (ứng dụng thanh toán). Hãy tham khảo tài liệu mà từng phương thức thanh toán cung cấp.

Khi có các cách tính phí vận chuyển, mọi thứ sẽ có chút phức tạp, vì tổng giá của modifiers không thể là giá trị cố định và cần phải sửa đổi linh động.

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

Thuộc tính supportedMethods hiện sẽ 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 chuỗi cho biết một phương thức thanh toán. Phương thức này hiện đ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.

Không nên

Cũ – vẫn còn hoạt động.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: ['https://bobpay.xyz']
}];

Nên

Mới - cách mới.

var methodData = [{
     supportedMethods: 'basic-card',
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: 'https://bobpay.xyz'
}];

Chrome 61

Hiện đã có supportedTypes trong thẻ cơ bản

Giờ đây, khi supportedMethods là "basic-card", bạn có thể cung cấp supportedTypes để cho biết loại thẻ đượ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 chính xác tuỳ thuộc vào nguồn gốc của bộ lọc.

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ừ bên 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ợ thẻ "basic-card"

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

Không nên

Cũ – vẫn còn hoạt động.

var methodData = [{
     supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);

Nên

Mới – cấu trúc mới.

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 quy cách 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 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ục thanh toán, nhà phát triển có thể thêm pending để cho biết rằng 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 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 tuỳ chọn 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

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

shippingType

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

shippingType='pickup' — shippingType="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 JSON 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() rườm rà.

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

canMakePayment

Ngoài khả năng sử dụng API, 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 Payment Request API (API Yêu cầu thanh toán). Hãy nhớ rằng đây là không bắt buộc vì người dùng vẫn có thể thêm một 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.
     });
}