결제 거래의 처리 과정

판매자가 결제 앱을 통합하는 방법과 결제 거래가 작동하는 방식을 알아보세요. 결제 요청 API를 사용합니다.

Eiji Kitamura
Milica Mihajlija

Web Payments API는 브라우저에 내장된 전용 결제 기능입니다. 발생합니다 웹 결제를 사용하면 판매자가 결제 앱과 통합됨 고객 경험이 간소화되고 더 안전해지면서 더 단순해집니다.

웹 결제 사용의 이점에 대해 자세히 알아보려면 지원 웹 결제를 사용한 결제 앱의 사용을 고려합니다.

이 도움말에서는 판매자 웹사이트에서 결제 거래를 진행하는 과정을 안내하고 결제 앱 통합의 작동 방식을 이해하는 데 도움이 됩니다.

이 프로세스는 6단계로 이루어집니다.

  1. 판매자가 결제 거래를 시작합니다.
  2. 판매자가 결제 버튼을 표시합니다.

  3. 고객이 결제 버튼을 누릅니다.

    BobPay (결제 앱) 버튼이 있는 치즈 가게 웹사이트의 다이어그램

  4. 브라우저에서 결제 앱을 실행합니다.

    모달로 출시된 BobPay 앱이 있는 치즈 매장 웹사이트의 다이어그램 모달에 배송 옵션과 총비용이 표시됩니다.

  5. 고객이 배송 옵션이나 주소)의 경우, 판매자는 변경사항을 반영하여 거래 세부정보를 업데이트합니다.

    고객이 BobPay 앱 모달에서 다른 배송 옵션을 선택하는 모습을 보여주는 다이어그램 두 번째 다이어그램에서는 판매자가 BobPay에 표시된 총비용을 업데이트하는 모습을 보여줍니다.

  6. 고객이 구매를 확인하면 판매자가 결제를 검증합니다. 거래를 완료합니다

    고객이 버튼을 누르고 있는 모습을 보여주는 다이어그램

1단계: 판매자가 결제 거래 시작

고객이 구매하기로 결정하면 판매자는 결제를 시작합니다. 거래를 발생시키는 PaymentRequest 객체를 지정합니다. 이 객체에는 거래에 관한 중요한 정보가 포함되어 있습니다.

  • 허용되는 결제 수단 및 거래 처리를 위한 데이터
  • 총 가격 (필수) 및 상품에 대한 정보와 같은 세부정보입니다.
  • 판매자가 배송과 같은 배송 정보를 요청할 수 있는 옵션입니다. 주소 및 배송 옵션이 있습니다.
  • 또한 판매자는 청구서 수신 주소, 결제자의 이름, 이메일 및 전화번호입니다.
  • 판매자는 배송비(선택사항)를 포함할 수도 있습니다. 유형 PaymentRequest의 (shipping, delivery 또는 pickup). 결제 앱 이를 힌트로 사용하여 UI에 올바른 라벨을 표시할 수 있습니다.
const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  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' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});
거래 ID 포함

일부 결제 핸들러는 판매자에게 거래 ID를 제공하도록 요구할 수 있습니다. 거래 정보의 일부로 사전에 발급한 서류입니다. 가 일반적인 통합에는 판매자와 전체 가격을 예약할 수 있습니다. 이렇게 하면 악성 콘텐츠를 고객이 가격을 조작하고 상인을 속여 검증을 수행할 수 없습니다.

판매자는 PaymentMethodData 객체의 data 속성

거래 정보가 제공되면 브라우저에서 탐색 단계를 진행합니다. 결제를 기반으로 PaymentRequest에 지정된 결제 앱 프로세스 메서드 식별자 이렇게 하면 브라우저에서 판매자가 거래를 진행할 준비가 되는 즉시 시작됩니다.

탐색 프로세스의 작동 방식을 자세히 알아보려면 다음을 참조하세요. 결제 메서드).

2단계: 판매자에게 결제 버튼 표시

판매자는 여러 결제 수단을 지원할 수 있지만 결제 수단만 제시해야 합니다. 고객이 실제로 사용할 수 있는 버튼이 있습니다. 결제 버튼 표시 좋지 않은 사용자 경험입니다 판매자가 특정 품목의 매출이 PaymentRequest 객체에 지정된 결제 수단이 다음 결제에 대체 솔루션을 제공하거나 해당 버튼을 전혀 표시하지 않을 수 있습니다.

PaymentRequest 인스턴스를 사용하여 판매자는 고객에게 사용 가능한 결제 앱인지 확인합니다.

고객이 결제 앱을 사용할 수 있나요?

이 canMakePayment() PaymentRequest의 메서드는 결제 앱을 사용할 수 있는 경우 true를 반환합니다. 필요합니다. 'Available' 즉, Google Play에서 지원하는 결제 앱을 결제 수단이 발견되고 플랫폼별 결제 앱이 설치되어 있음 이제 웹 기반 결제 앱을 등록됨.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

3단계: 고객이 결제 버튼을 누릅니다.

고객이 결제 버튼을 누르면 판매자는 show()에 전화를 겁니다. PaymentRequest 인스턴스의 메서드를 호출하여 변경할 수 있습니다

최종 총 가격이 동적으로 설정된 경우 (예: 서버)의 총 금액이 결제될 때까지 판매자는 결제 UI의 출시를 연기할 수 있습니다. 알 수 있습니다.

결제 UI 출시 연기

지급 연기에 대한 데모 확인 UI를 통해 최종 총 가격이 결정되었습니다.

결제 UI를 연기하기 위해 판매자는 show() 메서드에 프로미스를 전달합니다. 프라미스가 해결되고 거래를 시작할 준비가 되었습니다.

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

show()의 인수로 지정된 프로미스가 없는 경우 브라우저는 결제 UI를 즉시 실행합니다.

4단계: 브라우저에서 결제 앱 실행

브라우저는 플랫폼별 결제 앱 또는 웹 기반 결제 앱을 실행할 수 있습니다. (g.co/newsinitiative에서 Chrome에서 사용할 결제 앱을 결정하는 방법 출시를 참조하세요.)

결제 앱을 빌드하는 방법은 대부분 개발자에게 달려 있지만, 데이터 구조 및 판매자로부터 내보낸 이벤트 표준화되어 있습니다.

결제 앱이 실행되면 거래를 수신합니다. 정보 다음을 포함하여 1단계에서 PaymentRequest 객체에 전달됩니다.

  • 결제 수단 데이터
  • 총 가격
  • 결제 옵션

결제 앱이 거래 정보를 사용하여 UI에 라벨을 지정합니다.

5단계: 고객의 행동에 따라 판매자가 거래 세부정보를 업데이트하는 방법

고객은 결제 등 거래 세부정보를 변경할 수 있습니다. 결제 수단 및 배송 옵션이 표시됩니다. 고객이 변경하는 동안 판매자가 변경 이벤트를 수신하고 거래 세부정보를 업데이트합니다.

판매자는 다음과 같은 네 가지 유형의 이벤트를 수신할 수 있습니다.

  • 결제 수단 변경 이벤트
  • 배송지 주소 변경 이벤트
  • 배송 옵션 변경 이벤트
  • 판매자 확인 이벤트

결제 수단 변경 이벤트

하나의 결제 앱은 여러 결제 수단을 지원할 수 있으며 판매자는 특별 할인을 받을 수 있습니다. 이 사용 사례를 다루기 위해 결제 수단 변경 이벤트를 통해 판매자에게 새 결제 정보를 알릴 수 있습니다. 메서드를 사용하여 총가격을 할인으로 업데이트하고 반환할 수 있습니다. 결제 앱으로 돌아갑니다.

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

배송지 주소 변경 이벤트

결제 앱은 선택적으로 고객의 배송지 주소를 제공할 수 있습니다. 이것은 세부정보를 직접 입력할 필요가 없기 때문에 고객이 편리하게 사용할 수 있습니다. 원하는 지급 정보에 배송지 주소를 저장할 수 있습니다. 앱을 사용하는 경우가 많습니다.

고객이 결제 기간 이후에 결제 앱에서 배송지 주소를 업데이트하는 경우 거래가 시작되면 'shippingaddresschange' 이벤트가 전송됩니다. 판매자에게 전달됩니다. 이 이벤트는 판매자가 제품 가격을 기준으로 배송비를 결정하는 데 도움이 됩니다. 새 주소로 업데이트하고 총가격을 업데이트한 후 결제 앱으로 반환합니다.

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

판매자가 업데이트된 주소로 배송할 수 없는 경우 오류를 제공할 수 있습니다. 오류 매개변수를 추가하여 있습니다.

배송 옵션 변경 이벤트

판매자는 고객에게 여러 배송 옵션을 제공할 수 있으며 이를 위임할 수 있습니다. 결제 앱에 추가하는 것입니다. 배송 옵션은 고객이 선택할 수 있는 가격과 서비스 이름을 선택할 수 있습니다. 예를 들면 다음과 같습니다.

  • 일반 배송 - 무료
  • 빠른 배송 - 5000 KRW

고객이 결제 앱에서 배송 옵션을 업데이트하면 이벤트 'shippingoptionchange'개가 판매자에게 전송됩니다. 판매자는 배송비를 결정하고 총 가격을 업데이트한 다음 있습니다.

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

판매자는 고객의 배송지 주소까지도 가능합니다. 이는 판매자가 제품 또는 서비스를 구매하려 할 때 다양한 배송 옵션을 제공합니다.

판매자 확인 이벤트

보안 강화를 위해 결제 앱에서 판매자 유효성 검사를 결제 절차를 진행해야 합니다. 검증 메커니즘의 설계는 판매자 확인 이벤트가 판매자에게 이를 알리는 역할을 합니다. 자체적으로 확인할 수 있습니다.

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

6단계: 판매자가 결제를 확인하고 거래를 완료합니다.

고객이 결제를 승인하면 show() 메서드가 사용됩니다. 다음으로 확인되는 프로미스를 반환합니다. PaymentResponse PaymentResponse 객체에는 다음 정보가 포함됩니다.

  • 결제 결과 세부정보
  • 배송지 주소
  • 배송 옵션
  • 연락처 정보

이 시점에서 브라우저 UI에 여전히 로드 표시기가 표시될 수 있는데, 이는 거래가 아직 완료되지 않았습니다

결제 실패 또는 오류로 인해 결제 앱이 종료된 경우 show()에서 반환된 프로미스가 거부되고 브라우저에서 결제를 종료함 발생합니다

결제 처리 및 확인

PaymentResponse의 details는 반환된 결제 사용자 인증 정보 객체입니다. 결제할 수 있습니다. 판매자는 사용자 인증 정보를 사용하여 처리하거나 검증할 수 있습니다. 있습니다. 이 중요한 프로세스의 작동 방식은 결제 핸들러가 결정합니다.

트랜잭션 완료 또는 재시도

판매자가 거래의 성공 또는 실패 여부를 확인한 후 다음 중 하나를 수행할 수 있습니다.

  • .complete() 메서드를 호출하여 트랜잭션을 완료하고 로드 표시기가 나타납니다.
  • 고객이 retry() 메서드를 호출하여 다시 시도할 수 있게 합니다.
async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

다음 단계