이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

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

속성 이름
`supportedMethods`	이 규칙이 적용되는 결제 수단을 지정합니다.
`additionalDisplayItems`	할인 또는 추가 요금을 추가하려는 추가 디스플레이 상품
`total`	additionalDisplayItems를 추가한 후의 총 가격입니다.
`data`	`basic-card` 결제의 경우 `supportedTypes`로 특정 카드 유형을 필터링하는 방법으로 사용됩니다. 그렇지 않으면 이 매개변수의 사용은 결제 수단 (결제 앱)에 따라 다릅니다. 각 결제 수단에서 제공하는 문서를 참고하세요.

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

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

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

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

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

금지사항

이전 버전 - 당분간은 계속 작동합니다.

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

기본 카드의 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);

권장사항

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의 값에 따라 다르며 기본 카드 사양을 기반으로 합니다. 사양에는 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 문자열을 허용합니다.

shippingType='pickup' — shippingType="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.
     });
}