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 | 선택사항 | |
buttonColor | 선택사항 | 기본값, 검은색, 흰색 |
buttonLocale | 선택사항 | 두 글자 ISO 639-1 코드입니다. |
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);
}
코드 설명
createButton()라이브러리 메서드는 버튼의 모양과 동작 방식을 정의할 수 있는ButtonOptions구성 인수를 사용합니다.
3. 결제 데이터 콜백
결제 클라이언트는 특정 이벤트가 발생할 때 처리할 함수를 등록할 수 있는 메커니즘을 제공합니다. 첫 번째는 결제 승인이고 두 번째는 결제 데이터 변경입니다.
main.js에서// todo: paymentDataCallbacks주석을 찾아 다음 코드로 바꿉니다.paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized, onPaymentDataChanged: onPaymentDataChanged },- 그런 다음
main.js의Event Handlers섹션을 찾아 섹션 끝에 다음 코드를 추가합니다.function onPaymentAuthorized(paymentData) { // We'll fill this in later } function onPaymentDataChanged(intermediatePaymentData) { // We'll fill this in later } - 마지막으로
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.' }, ], },
코드 설명
PaymentDataCallbacks속성에는 결제 승인 콜백용 하위 속성과 결제 데이터 변경 콜백용 하위 속성 두 개가 있습니다.- 콜백을 구현하는 경우
onPaymentAuthorized가 필수입니다. 이 콜백은callbackIntents목록에PaymentDataRequest에PAYMENT_AUTHORIZATION가 포함된 경우 호출됩니다. onPaymentDataChanged는 선택사항입니다. 이 콜백은callbackIntents목록에PaymentDataRequest에OFFER,SHIPPING_ADDRESS또는SHIPPING_OPTION가 포함된 경우 호출됩니다.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);
});
}
코드 설명
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);
});
}
코드 설명
onPaymentDataChanged()함수는IntermediatePaymentData를 인수로 사용합니다. 이 함수는 결제 명세서에서 배송지 주소 또는 배송 옵션이 변경될 때 호출됩니다.onPaymentDataChanged()함수는 결제 명세서를 업데이트하기 위해 새 거래 정보, 배송 옵션, 오류를 지정하는PaymentDataRequestUpdate객체를 확인하는 약속을 반환해야 합니다.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 관련 동영상 시청하기