다음 가이드라인에는 Google Pay 브랜드를 웹사이트에 포함하는 방법이 나와 있습니다.
Google Pay 결제 버튼
Google Pay 결제 버튼은 항상 Google Pay API를 호출해야 합니다. 그러면 Google Pay API는 사용자가 결제 수단을 선택할 수 있는 결제 명세서를 호출합니다.
애셋
자바스크립트 메서드인 createButton()은 HTML <button> 요소의 Google CDN에서 CSS 규칙과 SVG 파일을 동적으로 삽입합니다.
사이트에 표시되는 모든 Google Pay 결제 버튼은 다음 요구사항을 포함하되 이에 국한되지 않는 Google 브랜드 가이드라인을 준수해야 합니다.
- 크기는 페이지의 다른 유사한 버튼 또는 요소를 기준으로 해야 합니다.
createButtonAPI의buttonSizeMode옵션을 사용하여 버튼 크기를 조정할 수 있습니다. - 버튼 색상은 버튼 주변 영역의 배경 색상과 대비를 이루어야 합니다.
- 버튼의 사방에 최소 여백을 유지해야 합니다.
이 편의 메서드 또는 지원되는 언어가 요구사항에 맞지 않으면 Google에 문의하세요.
카드 정보
카드 정보 옵션에는 카드의 브랜드 네트워크와 카드의 마지막 4자리 숫자가 표시됩니다. 자세한 내용은 ButtonOptions를 참고하세요.
'Google Pay로 구매'
'Buy with Google Pay' 옵션은 뷰어의 브라우저 설정과 일치하는 지원 언어로 번역된 버튼을 표시합니다. 자세한 내용은 ButtonOptions를 참고하세요.
옵션 버튼
'기부', '지불', '구독', '예약', '결제', '주문', '보기' 버튼은 뷰어의 브라우저 설정과 일치하는 지원 언어로 자동 표시됩니다.
자세한 내용은 ButtonOptions를 참고하세요.
스타일
모든 Google Pay 결제 버튼은 어두운 스타일과 밝은 스타일 두 가지가 있습니다. 애셋 섹션에서 두 스타일의 예시를 확인할 수 있습니다. Google Pay 브랜드 이름은 번역하면 안 됩니다. 텍스트를 직접 현지화하여 버튼을 만들지 마세요.
대비되게 하려면 밝은 배경에 어두운 버튼, 어둡거나 화려한 배경에 밝은 버튼을 사용하세요.
다음 도구를 사용하여 각 버튼의 모양을 미리 보세요.
여백
결제 버튼의 사방에 항상 최소 8dp의 여백을 유지하세요. 그래픽이나 텍스트가 여백을 침범하지 않도록 주의하시기 바랍니다.
예시
| Google Pay 버튼을 다른 버튼 옆에 배치할 때 Google Pay 버튼의 크기가 다른 버튼과 동일한지 확인합니다. | 항상 배경색과 대비되는 Google Pay 버튼 색상을 사용하세요. |
| Google Pay 버튼의 크기를 조정할 때는 항상 비율을 동일하게 유지하세요. |
권장사항 및 금지사항
| 권장사항 | 금지사항 |
|---|---|
|
|
Google Pay 표시
Google Pay를 결제 과정의 옵션으로 표시할 때 이 가이드라인에 나와 있는 Google Pay 표시만 사용하세요.
애셋
Google Pay 표시를 SVG 파일 형식으로 다운로드하려면 다음 버튼을 클릭하세요.
애셋 다운로드표시
Google Pay를 결제 옵션으로 표시할 때 다음 Google Pay 표시를 사용하세요.
다른 브랜드에 표시하는 경우 Google Pay 표시 옆에 'Google Pay'를 텍스트로 표시하세요. 표시 윤곽선의 색상이나 두께를 변경하거나 어떤 식으로든 표시를 변경하지 마세요. Google에서 제공한 표시만 사용하세요.
여백
Google Pay 가맹점 표시 사방에 항상 대문자 G 높이 절반(0.5x) 이상의 여백을 유지하세요. 여백은 표시되는 다른 브랜드 아이덴티티와 같아야 합니다.
크기
높이를 결제 과정에 표시된 다른 브랜드 아이덴티티에 맞게 조정하세요. Google Pay 표시를 다른 브랜드 아이덴티티보다 작게 만들지 마세요.
권장사항 및 금지사항
| 권장사항 | 금지사항 |
|---|---|
|
|
Google Pay 텍스트
텍스트를 사용하여 Google Pay를 결제 옵션으로 지정하고 마케팅 커뮤니케이션에서 Google Pay를 홍보할 수 있습니다.
- 'G'와 'P'를 대문자로 표기
- 'G'와 'P'는 항상 대문자로 표기하고 나머지 문자는 소문자로 표기합니다. 웹사이트의 활자 스타일과 일치시키는 경우를 제외하고 'GOOGLE PAY'처럼 전체 이름을 대문자로 표기하지 마세요. 마케팅 커뮤니케이션에서도 'GOOGLE PAY'와 같이 모든 글자를 대문자로 표시하면 안 됩니다.
- Google Pay를 줄여 쓰지 않기
- 항상 'Google'과 'Pay' 두 단어를 모두 표기하세요.
- 웹사이트 스타일에 맞추기
- 'Google Pay'를 웹사이트의 나머지 텍스트와 같은 글꼴 및 활자 스타일로 설정하세요. Google의 활자 스타일을 모방하지 마세요.
- Google Pay 번역하지 않기
- 'Google Pay'는 항상 영어로 표기하고 다른 언어로 번역하지 마세요.
- 마케팅 커뮤니케이션에서 'Google Pay'가 처음 표시될 때 상표권 기호 사용
- 마케팅 커뮤니케이션에서 'Google Pay'를 사용할 때 'Google Pay'가 처음 나타나는 경우나 가장 중요한 위치에 상표권 기호(™)를 표시하세요. 웹사이트에서 결제 옵션으로 Google Pay를 나열하는 경우에는 상표권 기호를 사용하지 마세요.
| 다른 결제 옵션에 브랜드 아이덴티티를 표시하지 않으면 'Google Pay'를 텍스트로 표시하세요. | 'Google Pay'를 사이트의 나머지 텍스트와 같은 글꼴 및 활자 스타일로 설정하세요. |
Google Pay 권장사항
결제 과정과 결제 명세서에서 고객이 결제 정보를 빠르고 쉽게 검토하고 구매를 확인할 수 있도록 하여 전환을 최대화합니다.
다음은 권장사항입니다.
- Google Pay를 기본 결제 옵션으로 지정
- 가능하면 Google Pay 버튼을 눈에 잘 띄게 표시합니다. Google Pay를 기본 결제 옵션 또는 유일한 결제 옵션으로 지정할 수도 있습니다.
- 계정 없이 구매할 수 있도록 비회원 결제 사용
- 계정 생성으로 결제 과정이 지체되면 장바구니 단계에서 구매를 포기할 수 있으므로 Google Pay에서 신속한 비회원 결제를 사용 설정합니다. 구매를 완료한 후 고객이 계정을 만들 수 있도록 허용할 수 있습니다.
- 장바구니 결제 중 Google Pay를 사용하여 결제 시작
- Google Pay 버튼을 누르면 결제 명세서가 표시됩니다. 결제 명세서에서 고객은 단일 결제 수단과 배송지 주소만 선택하고 확인할 수 있습니다. 따라서 필요한 다른 정보를 모두 수집한 후 고객에게 Google Pay 버튼을 선택할 수 있는 옵션을 제공해야 합니다. 이러한 정보는 다음과 같습니다.
- 상품 크기, 색상 또는 수량
- 선물 메시지를 추가하거나 프로모션 코드를 적용하는 옵션
- 상품별로 다른 배송 기간 옵션과 배송지를 선택할 수 있는 기능
- 고객이 필요한 정보를 제공하지 않으면 결제 명세서를 표시하기 전에 필요한 정보를 알 수 있도록 실시간 피드백을 제공하세요.
- 제품 세부정보 페이지에 장바구니 결제 외에 Google Pay 버튼 추가
- 고객이 제품 세부정보 페이지에서 바로 개별 구매를 할 수 있도록 하면 단일 상품 결제를 신속하게 처리할 수 있습니다. 결제 명세서에서는 결제 및 배송 정보만 확인할 수 있으므로 고객이 이 옵션을 선택하면 장바구니에 있는 다른 모든 항목을 제외해야 합니다.
- 확인 페이지 및 영수증에 Google Pay 포함
- 확인 페이지 및 이메일 영수증에 결제 정보를 표시할 때 고객이 Google Pay로 결제했음을 나타내야 하며 다른 결제 수단과 동일한 방식으로 Google Pay를 표시해야 합니다.
- 전체 계좌 번호, 만료일 또는 기타 결제 수단 세부정보는 사용자에게 표시되지 않도록 하세요. 항상 Google Pay API가 반환한 설명 텍스트를 사용하여 결제 수단을 식별하세요.
- 사용할 수 있는 설명 텍스트의 예시는 다음과 같습니다.
- 'Google Pay를 사용한 네트워크 •••• 1234'
- '네트워크 •••• 1234(Google Pay)'
- 'Google Pay(네트워크 •••• 1234)'
- 'Google Pay를 사용한 PayPal abc...d@gmail.com'
- '결제 수단: Google Pay'
- 'Google Pay로 결제됨'
완성된 모양
다음은 완성된 통합 이미지를 보여줍니다. 통합에는 상품 선택/구매 전 단계, 거래 단계, Google Pay 선택 도구 단계, 구매 후 단계도 포함됩니다.
승인 받기
Google Pay API를 통합하면 프로덕션에 액세스하기 위해 Google Pay를 표시하거나 참조하는 모든 위치에 대해 승인을 받아야 합니다.
웹 통합을 제출하여 검토를 받으려면 통합 체크리스트를 작성하세요. 영업일 기준 1일 이내로 승인 또는 의견을 받으실 수 있습니다.