Payment Request API 작동 방식

Payment Request API가 어떻게 작동하는지 개략적으로 알아보세요.

Eiji Kitamura

결제 요청 API

고객이 웹사이트에서 무언가를 구매하려고 할 때 사이트에서 다음을 요청해야 합니다. 고객이 결제 정보 및 기타 정보(선택사항) 제공 여러 옵션을 지정할 수 있습니다. 다음을 사용하여 쉽고 빠르게 이 작업을 수행할 수 있습니다. Payment Request API (PR API).

기본 구조

PaymentRequest 객체를 구성하려면 두 가지 매개변수인 결제가 필요합니다. 결제 수단 및 결제 세부정보가 표시됩니다. 또한 세 번째 결제 옵션 매개변수는 선택사항입니다. 다음과 같이 기본 요청을 생성할 수 있습니다.

const request = new PaymentRequest(paymentMethods, paymentDetails);

각 매개변수의 빌드 및 사용 방식을 살펴보겠습니다.

결제 수단

첫 번째 매개변수인 paymentMethods는 배열 변수입니다. 배열의 각 요소는 두 가지 구성요소로 이루어져 있습니다. supportedMethods 및 data(선택사항)

supportedMethods의 경우 판매자가 결제 수단을 지정해야 합니다. 식별자 (예: https://bobbucks.dev/pay) data의 존재 여부와 그 내용은 다음에 따라 다릅니다. supportedMethods의 콘텐츠 및 결제 앱 제공업체의 디자인

이 두 가지 정보는 모두 결제 앱 제공업체에서 제공해야 합니다.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

결제 세부정보

두 번째 매개변수인 paymentDetails는 객체로 전달되며 거래 관련 결제 세부정보입니다. 필수 값인 total를 포함합니다. 고객에게 지불해야 할 총금액을 지정합니다. 이 매개변수는 원하는 경우 구매한 품목을 표시할 수 있습니다.

아래 예에서 선택적인 구매 품목 목록 (이 예에서는 한 개의 항목만)을 필요한 총 결제 금액과 함께 표시됩니다. 두 경우 모두 통화는 단위는 각 금액과 함께 지정됩니다.

const paymentDetails = {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
};

결제 수단을 사용할 수 있는지 확인

Chrome에서 사용자와 환경이 결제할 준비가 되었는지 확인 PaymentRequest 객체를 구성하는 동안

사용자 및 환경이 결제할 준비가 되었는지 확인하려면 다음을 호출합니다. canMakePayment()를 호출합니다. 전화 거는 중 브라우저에서 결제를 1회 이상 지원하면 canMakePayment()는 true를 반환합니다. 메서드를 호출할 수 있습니다.

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

MDN의 PaymentRequest.canMakePayment()에 대해 자세히 알아보기

show() 메서드

다음과 같이 두 매개변수를 설정하고 request 객체를 만든 후 위에서 결제 앱 사용자를 표시하는 show() 메서드를 호출할 수 있습니다. 인터페이스에 추가되었습니다.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});
드림

결제 앱 사용자 인터페이스의 모양은 전적으로 결제 앱에서 결정합니다. 제공업체 고객이 결제에 동의하면 JSON 객체가 전달됩니다. 송금하는 데 필요한 모든 정보가 포함된 판매자에게 제공됩니다. 그런 다음 판매자는 결제를 처리하기 위해 PSP에 전송할 수 있습니다.

마지막으로, 결제 요청 UI를 닫을 수 있습니다. response.complete('success') 또는 response.complete('fail')에 따라 다름 PSP에서 반환하는 결과 값입니다.

다음 단계

웹 결제에 대해 자세히 알아보기