실시간 Google Pay 데모
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이 페이지에는 자바스크립트 또는 JSFiddle에서 수정할 수 있는 실시간 Google Pay 데모가 포함되어 있습니다.
기본 예시
다음은 Google Pay 버튼의 실제 작동 예시를 보여줍니다. 생성 방식에 대한 예시를 확인하려면 인접한 코드를 참조하세요.
다음은 Google Pay 버튼의 크기를 조정하는 방법을 보여줍니다. buttonSizeMode 속성이 fill로 설정된 상태로 createButton을 호출한 다음 #container div의 크기를 설정합니다.
결제 승인 예시
다음은 결제를 처리하기 전에 결제를 승인하는 방법에 대한 예시입니다.
결제를 처리하기 전에 결제를 승인하려는 이유는 승인에 실패한 경우 다른 결제 수단을 선택할 기회를 사용자에게 제공하기 위해서입니다.
다음 안내에 따라 결제 승인 요청을 처리할 수 있습니다.
PaymentOptions에 onPaymentAuthorized() 콜백을 등록합니다.-
PAYMENT_AUTHORIZATION 콜백 인텐트를 사용하여 loadPaymentData() 함수를 호출합니다.
onPaymentAuthorized() 콜백 핸들러를 구현합니다.
JSFiddle에서 수정 링크를 클릭하여 직접 수정하고 사용해 보세요.
유동 가격 업데이트 예시
유동 가격 업데이트를 사용하면 배송지 주소와 배송 옵션 변경사항을 반영하여 총 가격을 유동적으로 조정할 수 있습니다.
유동 가격 업데이트를 설정하는 방법은 다음과 같습니다.
onPaymentAuthorized 및 onPaymentDataChanged 콜백을 모두 PaymentOptions에 등록합니다.- 콜백 인텐트를 사용하여
loadPaymentData() 함수를 호출합니다. 자세한 내용은 해당 예시를 참조하세요.
onPaymentAuthorized 및 onPaymentDataChanged를 구현합니다.
JSFiddle에서 수정 링크를 클릭하여 직접 수정하고 사용해 보세요.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2024-10-16(UTC)
[null,null,["최종 업데이트: 2024-10-16(UTC)"],[[["\u003cp\u003eThis page provides live, editable Google Pay demos using JavaScript or JSFiddle.\u003c/p\u003e\n"],["\u003cp\u003eYou can explore examples demonstrating basic Google Pay button integration, button resizing, and payment authorization.\u003c/p\u003e\n"],["\u003cp\u003eThe demos also showcase how to dynamically update prices based on shipping changes using Dynamic Price Updates.\u003c/p\u003e\n"],["\u003cp\u003eThese demos are interactive and can be edited in JSFiddle for experimentation and learning.\u003c/p\u003e\n"]]],["The content showcases live Google Pay demos editable in JavaScript or JSFiddle. Key actions include creating and resizing the Google Pay button using `createButton` with `buttonSizeMode`. It demonstrates authorizing payments before processing by registering `onPaymentAuthorized()`, calling `loadPaymentData()`, and implementing the callback handler. Dynamic price updates are enabled by registering `onPaymentAuthorized` and `onPaymentDataChanged`, and implementing both functions after calling `loadPaymentData`. Note that authorize payments and Dynamic price updates do not support liability shift.\n"],null,["# Live Google Pay demos\n\nThis page contains live Google Pay demos that you can edit in JavaScript or JSFiddle.\n| **Note**: The demos on this page will only show a button if your browser supports Google Pay.\n\nBasic example\n-------------\n\nThe following demonstrates a basic example of the Google Pay button in action. Refer to the\nadjacent code for an example on how it's constructed. \n\nButton resize example\n---------------------\n\nThe following demonstrates how you can resize the Google Pay button. Call\n`createButton` with the `buttonSizeMode` property set to `fill`,\nand then set a size on the `#container div`. \n\nAuthorize Payments example\n--------------------------\n\nThe following is an example of how you can *authorize a payment* before processing it. \n\nThe reason you might want to authorize a payment before processing it is to give the user an\nopportunity to choose a different payment method if the authorization fails.\n\nYou can handle the payment authorization request by following these instructions:\n\n1. Register an [`onPaymentAuthorized()`](/pay/api/web/reference/client#onPaymentAuthorized) callback in [`PaymentOptions`](/pay/api/web/reference/request-objects#PaymentOptions).\n2. Call the [`loadPaymentData()`](/pay/api/web/reference/client#loadPaymentData) function with the `PAYMENT_AUTHORIZATION` callback intent.\n3. Implement the [`onPaymentAuthorized()`](/pay/api/web/reference/client#onPaymentAuthorized) callback handler.\n\nClick the [Edit in JSFiddle](https://jsfiddle.net/34wxopb2/)\nlink to edit and try it out for yourself.\n\nDynamic Price Update example\n----------------------------\n\nDynamic Price Updates allows you to dynamically adjust the total price to reflect changes in shipping address and shipping option changes.\n\nUse the following steps to set up Dynamic Price Updates:\n\n1. Register both of the [`onPaymentAuthorized`](/pay/api/web/reference/client#onPaymentAuthorized) and [`onPaymentDataChanged`](/pay/api/web/reference/client#onPaymentDataChanged) callbacks in [`PaymentOptions`](/pay/api/web/reference/request-objects#PaymentOptions).\n2. Call the [`loadPaymentData()`](/pay/api/web/reference/client#loadPaymentData) function with callback intents. For details, see the corresponding [example](/pay/api/web/guides/tutorial#load).\n3. Implement [`onPaymentAuthorized`](/pay/api/web/reference/client#onPaymentAuthorized) and [`onPaymentDataChanged`](/pay/api/web/reference/client#onPaymentDataChanged).\n\nClick the [Edit in JSFiddle](https://jsfiddle.net/ynt8p152/) link to edit and try it out for yourself."]]