Payment Request API 변경사항

키타무라 에이지
키타무라 에이지

Chrome 62

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

결제 요청에서 고객이 선택한 결제 수단에 따라 할인이나 추가 요금을 제공하려는 경우가 있습니다. PaymentDetailsModifier는 이 작업을 실행하는 데 사용할 수 있는 기능입니다.

고객이 선택한 결제 수단에 따라 표시 항목과 합계를 수정하는 방법에 관한 선언적 규칙인 PaymentDetailsModifier 객체의 배열과 함께 modifiers 속성을 PaymentRequest 생성자의 두 번째 인수에 추가합니다.

다음 예는 사용자에게 신용카드 결제 선택 시 처리 수수료 $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달러입니다.

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

속성 이름
supportedMethods 이 규칙을 적용할 결제 수단을 지정하세요.
additionalDisplayItems 할인 또는 추가 요금을 추가할 추가 항목을 표시합니다.
total additionalDisplayItems를 추가한 후의 총 가격입니다.
data basic-card 결제의 경우 supportedTypes로 특정 카드 유형을 필터링하는 방법으로 사용됩니다. 그 외의 경우 이 매개변수의 사용량은 결제 수단 (결제 앱)에 따라 다릅니다. 각 결제 수단이 제공하는 문서를 참조하세요.

modifiers의 총가격은 정적이지 않을 수 있고 동적 수정이 필요하기 때문에 배송 옵션이 있는 경우 상황이 다소 까다로워집니다.

이를 위해 PaymentDetails 객체의 displayItems 속성을 수정하는 것과 마찬가지로 shippingaddresschangeshippingoptionchange 이벤트 시 modifiers 속성의 additionalDisplayItemstotal를 수정합니다.

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

PaymentMethodData 객체의 supportedMethods 속성 (PaymentRequest 생성자의 첫 번째 인수)이 결제 수단을 나타내는 문자열 배열을 취했습니다. 이제 단일 문자열을 인수로 사용합니다.

배열을 제공하는 것은 당분간 계속 작동합니다.

금지사항

이전 - 당분간은 계속 사용할 수 있습니다.

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

New - 새로운 방식

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

Chrome 61

기본 카드의 supportedType을 사용할 수 있으며

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);
권장사항

New - 새 구조입니다.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}];
var request = new PaymentRequest(methodData, details, options);

data 속성의 형식은 supportedMethods의 값에 따라 다르며 Basic Card 사양에 기반합니다. 사양에는 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에 '배송' 대신 '배송' 또는 '수령'을 표시하도록 요청할 수 있습니다. shippingTypeshipping (기본값), delivery, pickup 문자열을 허용합니다.

shippingType=&#39;배송&#39;
shippingType="delivery"
shippingType=&#39;수령&#39;
shippingType="pickup"

PaymentResponse 및 PaymentAddress에 사용 가능한 Serializer 함수

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