JavaScript 웹 버튼

Google Wallet API를 사용하면 사용자가 웹에서 Google 월렛에 객체를 추가할 수 있습니다. 사용자가 웹사이트에서 직접 카드를 추가할 수 있습니다.

이 참조 자료에서는 HTML 요소 g:savetoandroidpay에 대해 Google Wallet API 버튼을 렌더링합니다 JSON 웹 토큰 은 웹 서비스를 Google에 설명하는 데 사용됩니다.

Google Wallet API 자바스크립트

로드 시 g:savetoandroidpay HTML 태그를 자동으로 파싱하려면 표준 JavaScript

<script src="https://apis.google.com/js/platform.js" type="text/javascript"></script>

AJAX 애플리케이션 및 Google Wallet API 버튼의 명시적 렌더링에는 "parsetags": "explicit" 매개변수를 포함합니다.

<script src="https://apis.google.com/js/platform.js" type="text/javascript">
  {"parsetags": "explicit"}
</script>

g:savetoandroidpay HTML 태그

g:savetoandroidpay 네임스페이스 태그는 게재위치와 '추가 대상'의 Google 월렛 버튼 HTML 및 JWT를 렌더링하는 경우 이 태그를 사용합니다. 있습니다

<g:savetoandroidpay jwt="JWT" onsuccess="successHandler" onfailure="failureHandler" />
필드 유형 필수 설명
height 문자열 N 표시할 버튼의 높이입니다. 가능한 값은 small (30px 높이) 및 standard (38픽셀 높이) height의 기본값은 small입니다. Google Wallet API 버튼을 참고하세요. height 설정이 다른 버튼 샘플을 확인합니다.
jwt 문자열 Y Google Wallet API JWT가 있습니다.
onsuccess 문자열 N 저장 성공 콜백 핸들러 함수의 문자열 이름입니다.
onfailure 문자열 N 저장 실패 콜백 핸들러 함수의 문자열 이름입니다. 이 함수에는 errorCode 및 errorMessage가 포함된 error 객체입니다.
onprovidejwt 문자열 N 제공하는 JWT 핸들러 함수의 문자열 이름입니다. 이 함수의 목적은 객체가 Google 월렛에 추가되기 전에 JWT 데이터를 가로채고 잠재적으로 조작할 수 있습니다. 이 함수는 매개변수를 사용하지 않으며 JWT를 문자열로 반환해야 합니다. 이벤트 핸들러를 구현할 때 원본 JWT 데이터를 가져올 수 있습니다. this.getOpenParams().renderData.userParams.jwt 필드 아래
size 문자열 N 표시할 버튼의 너비입니다. size를 matchparent로 설정할 수 있습니다. 너비가 상위 요소의 너비와 일치하도록 만듭니다. 또는 size에서 나가기 정의되지 않은 경우 너비가 text 설정의 너비에 맞게 늘어납니다. Google Wallet API 버튼을 참고하세요. size 설정이 다른 버튼 샘플을 확인합니다.
text 문자열 N 지원 중단됨
textsize 문자열 N textsize=large가 지정되면 다음이 표시됩니다. 텍스트 크기가 급격히 커지고 버튼 크기(특수한 UI 요구사항이 있는 경우)
theme 문자열 N 표시할 버튼의 테마입니다. 가능한 값은 dark 및 light입니다. 기본 테마는 dark입니다. 다음을 참고하세요. Google Wallet API 버튼 theme 설정이 다른 버튼 샘플을 확인합니다.

Google Wallet API JWT

Google Wallet API JWT는 저장할 객체와 클래스를 정의합니다.

JSON 표현

{
  "iss": "example_service_account@developer.gserviceaccount.com",
  "aud": "google",
  "typ": "savetowallet",
  "iat": 1368029586,
  "payload": {
    "eventTicketClasses": [{
      ... //Event ticket Class JSON
    }],
    "eventTicketObjects": [{
      // Event ticket Object JSON
    }],
    "flightClasses": [{
      // Flight Class JSON
    }],
    "flightObjects": [{
      // Flight Object JSON
    }],
    "giftCardClasses": [{
      // Gift card Class JSON
    }],
    "giftCardObjects": [{
      // Gift card Object JSON
    }],
    "loyaltyClasses": [{
      // Loyalty Class JSON
    }],
    "loyaltyObjects": [{
      // Loyalty Object JSON
    }],
    "offerClasses": [{
      // Offer Class JSON
    }],
    "offerObjects": [{
      // Offer Object JSON
    }],
    "transitClasses": [{
      // Transit Class JSON
    }],
    "transitObjects": [{
      // Transit Object JSON
    }]
  },
  "origins": ["http://baconrista.com", "https://baconrista.com"]
}

필드

필드 유형 필수 설명
iss 문자열 Y Google Cloud 서비스 계정에서 생성한 이메일 주소입니다.
aud 문자열 Y 잠재고객으로 이동합니다. Google Wallet API 객체의 대상은 항상 google
typ 문자열 Y JWT 유형입니다. Google Wallet API 객체의 대상은 항상 savetowallet
iat 정수 Y 에포크 이후 초 단위로 실행됩니다.
payload 객체 Y 페이로드 객체입니다.
payload.eventTicketClasses 배열 N 저장할 이벤트 티켓 클래스입니다.
payload.eventTicketObjects 배열 N 저장할 이벤트 티켓 객체입니다.
payload.flightClasses 배열 N 저장할 항공편 클래스입니다.
payload.flightObjects 배열 N 저장할 광고 게재 기간 객체입니다.
payload.giftCardClasses 배열 N 할인받을 기프트 카드 클래스
payload.giftCardObjects 배열 N 저장할 기프트 카드 객체입니다.
payload.loyaltyClasses 배열 N 저장할 포인트 클래스입니다.
payload.loyaltyObjects 배열 N 저장할 포인트 객체입니다.
payload.offerObjects 배열 N 저장할 쿠폰 객체입니다.
payload.offerClasses 배열 N 저장할 쿠폰 클래스입니다.
payload.transitObjects 배열 N 저장할 대중교통 객체입니다.
payload.transitClasses 배열 N 저장할 대중교통 클래스입니다.
origins 배열 Y JWT 저장 기능을 승인할 도메인 배열입니다. Google Wallet API origins 필드가 정의되지 않으면 버튼이 렌더링되지 않습니다. 다음과 같은 방법을 사용할 수 있습니다. 'X-Frame-Options에 의해 로드 거부됨' 메시지가 표시될 수 있습니다. 또는 '표시 거부' 메시지를 원본 필드가 정의되지 않은 경우 브라우저 콘솔로 돌아갑니다.

인코딩된 JWT는 다음 예시와 비슷하게 표시됩니다.

eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJnb29nbGUiLCJvcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6ODA4MCIsImh0dHA6Ly93d3cuZ29vZ2xlLmNvbSJdLCJpc3MiOiJzMmFwLXRvb2wuZ29vZ2xlLmNvbUBhcHBzcG90LmdzZXJ2aWNlYWNjb3VudC5jb20iLCJpYXQiOjE1NTE5ODcxNTEsInR5cCI6InNhdmV0b3dhbGxldCIsInBheWxvYWQiOnsib2ZmZXJPYmplY3RzIjpbeyJpZCI6IjMyMDI0MTMyNDE4NDM2OTk0MDEuMDFfT2ZmZXJPYmplY3RJZCJ9XX19.maHX40WWT29TC_kEb90EKQBH9AiTYAZR3153K8UI7fznVnfjVdlwsH_GKTECV3PGXdNnKCcmatUbKsONC0bxrnAHYG02kuvA1D3hSctz_amU66ntsvGIDe13mpxTzhI8fPvt9KMP1iaO7uOJuLQIHwipu4uRFAjyFaHGVaSFaP9c53qQyb_Zgyyk50M-MhH2n4kDpstNCqUJKWaadQkOWjrtMjwGzQ_ME04lbR4wb_mfK1A7Rc1UieWkxM9aMl5TOPubBKxKRRk_CqillN8XoTl9MI5RRGPuElVO28zGpYlFS6BarzDaaUfmbRZGvfF8ZiKrHZKxVrJjfZIJ2TCcDw

gapi.savetoandroidpay.render 함수

이 함수를 사용하면 Google Wallet API 버튼을 명시적으로 렌더링할 수 있습니다.

gapi.savetoandroidpay.render("dom-container",{
  "jwt": "JWT",
  "onsuccess": "successHandler",
  "onfailure": "failureHandler"
});
필드 유형 필수 설명
dom-container 문자열 Y Google Wallet API 버튼을 배치할 컨테이너의 ID입니다.
jwt 문자열 Y 저장할 콘텐츠를 정의하는 JWT입니다.
onsuccess 문자열 N 저장 성공 콜백 핸들러 함수의 문자열 이름입니다.
onfailure 문자열 N 저장 실패 콜백 핸들러 함수의 문자열 이름입니다. 이 함수에는 errorCode 및 errorMessage가 포함된 error 객체입니다.
onprovidejwt 문자열 N 제공하는 JWT 핸들러 함수의 문자열 이름입니다. 이 함수의 목적은 객체가 Google 월렛에 추가되기 전에 JWT 데이터를 가로채고 잠재적으로 조작할 수 있습니다. 이 함수는 매개변수를 사용하지 않으며 JWT를 문자열로 반환해야 합니다. 이벤트 핸들러를 구현할 때 원본 JWT 데이터를 가져올 수 있습니다. this.getOpenParams().renderData.userParams.jwt 필드 아래

Google Wallet API 오류 코드 및 메시지

다음 표에는 오류에서 전달된 오류 코드와 기본 오류 메시지가 나와 있습니다. 객체를 실패 콜백 함수에 다시 전달합니다.

        {
          "errorCode": "errorCode",
          "errorMessage": "errorMessage"
        }
errorCode errorMessage
SERVICE_FAILURE Google 월렛 서버에 오류가 발생했습니다.
CLASS_NOT_FOUND 객체에서 참조된 클래스를 찾을 수 없습니다.
CLASS_MISMATCH 동일한 유형의 객체가 있어야 하며 포함된 클래스를 참조해야 합니다.
ORIGIN_MISMATCH 버튼 원점이 출처 목록에 지정된 원점과 일치하지 않습니다.
INVALID_NUM_TYPES 정확히 한 유형의 객체를 지정할 수 있습니다.
INVALID_SIGNATURE 서명을 확인할 수 없습니다.
INVALID_DUPLICATE_IDS 중복 객체 또는 클래스는 허용되지 않습니다.
INVALID_JWT JWT가 잘못되었습니다.
INVALID_EXP_IAT JWT가 만료되었거나 이후에 발급되었습니다.
INVALID_AUD AUD 필드의 값이 잘못되었습니다.
INVALID_TYP TYP 입력란의 값이 잘못되었습니다.
INVALID_NUM_OBJECTS 포인트 카드, 기프트 카드, 쿠폰에 대해 정확히 하나의 객체와 최대 한 개의 클래스를 지정할 수 있습니다.
MALFORMED_ORIGIN_URL 원본 URL의 형식이 잘못되었습니다. URL에는 프로토콜과 도메인이 포함되어야 합니다.
MISSING_ORIGIN 출처를 지정해야 합니다.
MISSING_FIELDS 포함된 객체 또는 클래스에 필수 필드가 누락되었습니다.

현지화

JavaScript 버튼의 언어는 다음 기준에 따라 변경됩니다.

  1. 사용자가 Google에 로그인하면 버튼이 사용자의 Google 계정 프로필 사용자가 읽을 수 있는 콘텐츠는 언어 변경 Google 계정의 기본 언어를 변경하는 방법을 알아보세요.
  2. 사용자가 Google에 로그인하지 않은 경우 버튼에 ACCEPT-LANGUAGE 값이 사용됩니다. 가 HTTP 헤더에 있어야 합니다.

위의 로직에 따라 버튼이 올바른 언어로 렌더링되지 않거나 표현이 부자연스럽고 지원팀에 문의하세요.