웹용 Google Pay API 201: 고급

1. 소개

이 Codelab은 웹용 Google Pay API 101: 기본사항의 연장선으로, 해당 Codelab에서 작성된 코드를 사용합니다. 이 Codelab을 완료하려면 먼저 해당 Codelab을 완료해야 합니다.

학습할 내용

• Google Pay 버튼을 맞춤설정하는 방법
• 결제 절차를 시작하는 방법
• 결제 승인 상태를 확인하는 방법
• 배송지 주소 변경을 처리하는 방법
• 사용 코드 처리 방법

필요한 항목

• HTML 및 JavaScript 파일을 수정할 텍스트 편집기
• Chrome 웹브라우저 또는 로컬 웹사이트를 테스트하는 다른 방법
• 프로덕션의 경우 Google Pay merchantId가 필요합니다. Google Pay 및 월렛 콘솔에 등록하는 데 1분밖에 걸리지 않으므로 지금 등록하는 것이 좋습니다.

Project IDX를 사용하여 따라하기

2. 버튼 맞춤설정

ButtonOptions에 대한 간단한 개요입니다. 자세한 설명은 문서를 참고하세요.

옵션	필요성	값
onClick	필수	JavaScript 이벤트 핸들러의 이름
allowedPaymentMethods	선택사항	PaymentMethod[]
buttonColor	선택사항	기본값, 검은색, 흰색
buttonLocale	선택사항	두 글자 ISO 639-1 코드입니다. 지원되는 언어는 en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk, zh입니다.
buttonRadius	선택사항	0~100
buttonRootNode	선택사항	HTMLDocument 또는 ShadowRoot
buttonSizeMode	선택사항	static, fill
buttonType	선택사항	예약, 구매, 결제, 기부, 주문, 결제, 일반, 정기 결제

main.js 파일에서 renderGooglePayButton() 메서드를 찾아 여기에 나열된 코드로 바꿉니다.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

코드 설명

1. createButton() 라이브러리 메서드는 버튼의 모양과 동작 방식을 정의할 수 있는 ButtonOptions 구성 인수를 사용합니다.

3. 결제 데이터 콜백

결제 클라이언트는 특정 이벤트가 발생할 때 처리할 함수를 등록할 수 있는 메커니즘을 제공합니다. 첫 번째는 결제 승인이고 두 번째는 결제 데이터 변경입니다.

1. main.js에서 // todo: paymentDataCallbacks 주석을 찾아 이 코드로 바꿉니다.

   paymentDataCallbacks: {
     onPaymentAuthorized: onPaymentAuthorized,
     onPaymentDataChanged: onPaymentDataChanged
   },
   

2. 그런 다음 main.js의 Event Handlers 섹션을 찾아 섹션 끝에 다음 코드를 추가합니다.

   function onPaymentAuthorized(paymentData) {
     // We'll fill this in later
   }
   
   function onPaymentDataChanged(intermediatePaymentData) {
     // We'll fill this in later
   }
   
   

3. 마지막으로 main.js 내에서 // todo: callbackIntents 주석을 찾아 주석을 이 코드로 바꿉니다. 이 Codelab에서는 4가지 인텐트를 모두 구현합니다.

   callbackIntents: [
     'PAYMENT_AUTHORIZATION',
     'SHIPPING_ADDRESS',
     'SHIPPING_OPTION',
     'OFFER',
   ],
   shippingAddressRequired: true,
   shippingOptionRequired: true,
   shippingOptionParameters: {
     defaultSelectedOptionId: 'shipping-001',
     shippingOptions: [
       {
         id: 'shipping-001',
         label: '$0.00: Free shipping',
         description: 'Free Shipping delivered in 5 business days.'
       },
       {
         id: 'shipping-002',
         label: '$1.99: Standard shipping',
         description: 'Standard shipping delivered in 3 business days.'
       },
       {
         id: 'shipping-003',
         label: '$1000: Express shipping',
         description: 'Express shipping delivered in 1 business day.'
       },
     ],
   },
   

코드 설명

1. PaymentDataCallbacks 속성에는 결제 승인 콜백용 하위 속성과 결제 데이터 변경 콜백용 하위 속성이 각각 하나씩 있습니다.
2. 콜백을 구현하는 경우 onPaymentAuthorized가 필수입니다. 이 콜백은 callbackIntents 목록에 PaymentDataRequest에 PAYMENT_AUTHORIZATION가 포함된 경우 호출됩니다.
3. onPaymentDataChanged는 선택사항입니다. 이 콜백은 callbackIntents 목록에 PaymentDataRequest에 OFFER, SHIPPING_ADDRESS 또는 SHIPPING_OPTION가 포함된 경우 호출됩니다.
4. PaymentDataRequest에서 callbackIntents를 설정하여 이 Codelab의 두 콜백을 모두 트리거합니다.

4. 결제 승인

결제 승인은 결제 프로세스를 시작하고 결제 승인 상태를 확인하는 데 사용됩니다.

main.js에서 지난 단계에서 추가한 onPaymentAuthorized() 함수를 찾아 다음 코드로 바꿉니다.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

코드 설명

1. onPaymentAuthorized() 콜백 함수는 PaymentData 인수로 호출되며 프로미스를 반환해야 합니다. 이 예에서는 함수가 성공 또는 오류를 반환할지 무작위로 선택합니다. 프로젝트에서는 이 기회를 사용하여 paymentData의 paymentData.paymentMethodData.tokenizationData.token에 있는 토큰을 사용하여 게이트웨이와 트랜잭션을 처리합니다.

5. 결제 데이터 변경

유동 가격 업데이트를 사용하면 판매자는 선택한 배송지 주소를 기반으로 배송 옵션 및 거래 정보를 동적으로 업데이트할 수 있습니다. 또한 선택한 배송 옵션에 따라 거래 정보를 동적으로 업데이트할 수 있습니다.

main.js에서 지난 단계에서 추가한 onPaymentDataChanged() 함수를 찾아 다음 코드로 바꿉니다.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

INITIALIZE 콜백은 loadPaymentData()가 한 번 호출될 때 여러 번 트리거될 수 있으므로 여러 호출을 처리할 수 있는지 확인해야 합니다. 예를 들어 사용자가 계정을 변경하면 onPaymentDataChanged()가 새 계정의 데이터를 사용하여 INITIALIZE와 함께 다시 호출됩니다.

코드 설명

1. onPaymentDataChanged() 함수는 IntermediatePaymentData를 인수로 사용합니다. 이 함수는 결제 명세서에서 배송지 주소 또는 배송 옵션이 변경될 때 호출됩니다.
2. onPaymentDataChanged() 함수는 결제 명세서를 업데이트하기 위해 새 거래 정보, 배송 옵션, 오류를 지정하는 PaymentDataRequestUpdate 객체를 확인하는 약속을 반환해야 합니다.
3. redemptionCodes는 결제 명세서에 입력된 프로모션 코드의 집합입니다. 이미 승인된 코드가 포함됩니다.

6. 결론

이 Codelab을 완료했습니다. 다음 작업을 수행하는 방법을 배웠습니다.

프로젝트 실행

Chrome으로 테스트

Google Chrome 웹브라우저를 사용하여 Chrome의 기본 메뉴에서 파일 > 파일 열기...를 사용하여 index.html를 엽니다. 이 방법으로 프로젝트를 열면 Chrome에서 main.js를 실행합니다. 다른 웹브라우저에서는 JavaScript 실행을 허용하지 않을 수 있습니다.

– 또는 –

로컬 웹 서버로 테스트

Python이 설치되어 있으면 루트 pay-web-101 폴더의 터미널 프롬프트에서 python3 -m http.server를 실행합니다.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

그런 다음 http://localhost:8000에서 사이트를 방문합니다.

다음 단계

• 통합 체크리스트 검토

추가 리소스

• Discord의 #payments 채널에서 대화에 참여하세요.
• X에서 @GooglePayDevs 팔로우
• YouTube에서 Google Pay 관련 동영상 시청하기