Payment Request API 변경사항

Eiji Kitamura

Chrome 62

이제 PaymentDetailsModifier를 사용할 수 있습니다.

결제 요청에서 고객이 선택한 결제 수단에 따라 할인 또는 추가 요금을 제공해야 하는 경우가 있습니다. 이를 위해 사용할 수 있는 기능은 PaymentDetailsModifier입니다.

modifiers 속성을 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);

실제 결제 요청 시트에서 신용카드 결제를 선택하는 즉시 사용자에게 '처리 수수료'라는 추가 표시 항목(총 $71.00의 $3 청구)이 표시됩니다.

PaymentDetailsModifier에는 다음 매개변수가 포함됩니다.

배송 옵션이 있는 경우 modifiers의 총 가격을 정적일 수 없으며 동적으로 수정해야 하므로 약간 까다로워집니다.

이렇게 하려면 PaymentDetails 객체의 displayItems 속성을 수정하는 것처럼 shippingaddresschange 및 shippingoptionchange 이벤트 시 modifiers 속성의 additionalDisplayItems 및 total를 수정합니다.

supportedMethods 속성이 이제 문자열을 사용합니다.

PaymentMethodData 객체의 supportedMethods 속성 (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

이제 iframe 내에서 PaymentRequest를 사용할 수 있습니다.

이제 iframe 요소에 allowpaymentrequest 속성을 추가하여 iframe 내에서 Payment Request API를 호출할 수 있습니다.

<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의 값에 따라 다르며 기본 카드 사양을 기반으로 합니다. 사양에는 credit, debit 또는 prepaid를 허용하는 supportedTypes가 포함되어 있지만 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

배송 옵션(PaymentRequest의 세 번째 인수)의 일부로 개발자는 이제 shippingType를 추가하여 UI에 '배송' 대신 '배송' 또는 '수령'이 표시되도록 요청할 수 있습니다. shippingType는 문자열 shipping (기본값), delivery 또는 pickup를 허용합니다.

PaymentResponse 및 PaymentAddress에서 사용할 수 있는 직렬화 함수

이제 PaymentResponse 객체 및 PaymentAddress 객체를 JSON으로 직렬화할 수 있습니다. 개발자는 toJSON() 함수를 호출하여 JSON 객체로 변환하고 번거로운 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.
     });
}