실시간 Google Pay 데모

이 페이지에는 자바스크립트 또는 JSFiddle에서 수정할 수 있는 실시간 Google Pay 데모가 포함되어 있습니다.

기본 예시

다음은 Google Pay 버튼의 실제 작동 예시를 보여줍니다. 생성 방식에 대한 예시를 확인하려면 인접한 코드를 참조하세요.

버튼 크기 조정의 예시

다음은 Google Pay 버튼의 크기를 조정하는 방법을 보여줍니다. buttonSizeMode 속성이 fill로 설정된 상태로 createButton을 호출한 다음 #container div의 크기를 설정합니다.

결제 승인 예시

다음은 결제를 처리하기 전에 결제를 승인하는 방법에 대한 예시입니다.

결제를 처리하기 전에 결제를 승인하려는 이유는 승인에 실패한 경우 다른 결제 수단을 선택할 기회를 사용자에게 제공하기 위해서입니다.

다음 안내에 따라 결제 승인 요청을 처리할 수 있습니다.

  1. PaymentOptions에 onPaymentAuthorized() 콜백을 등록합니다.
  2. PAYMENT_AUTHORIZATION 콜백 인텐트를 사용하여 loadPaymentData() 함수를 호출합니다.
  3. onPaymentAuthorized() 콜백 핸들러를 구현합니다.

JSFiddle에서 수정 링크를 클릭하여 직접 수정하고 사용해 보세요.

유동 가격 업데이트 예시

유동 가격 업데이트를 사용하면 배송지 주소와 배송 옵션 변경사항을 반영하여 총 가격을 유동적으로 조정할 수 있습니다.

유동 가격 업데이트를 설정하는 방법은 다음과 같습니다.

  1. onPaymentAuthorized 및 onPaymentDataChanged 콜백을 모두 PaymentOptions에 등록합니다.
  2. 콜백 인텐트를 사용하여 loadPaymentData() 함수를 호출합니다. 자세한 내용은 해당 예시를 참조하세요.
  3. onPaymentAuthorized 및 onPaymentDataChanged를 구현합니다.

JSFiddle에서 수정 링크를 클릭하여 직접 수정하고 사용해 보세요.