자바스크립트 웹 버튼

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

이 참조 페이지에서는 Google Wallet API 버튼을 렌더링하는 HTML 요소 g:savetoandroidpay와 Google에 웹 서비스를 설명하는 JSON 웹 토큰에 관한 세부정보를 제공합니다.

Google Wallet API 자바스크립트

로드 시 g:savetoandroidpay HTML 태그를 자동으로 파싱하려면 표준 자바스크립트를 포함합니다.

<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>

HTML 태그 g:savetoandroidpay개

g:savetoandroidpay 네임스페이스 태그는 Google 월렛에 추가 버튼의 위치와 다양한 속성을 정의합니다. 서버 측에서 HTML 및 JWT를 렌더링하는 경우 이 태그를 사용하세요.

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

Google Wallet API JWT

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

프로토콜

        {
  "iss": "example_service_account@developer.gserviceaccount.com",
  "aud": "google",
  "typ": "savetoandroidpay",
  "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"]
}

참고: 이러한 JWT는 RSA-SHA256을 사용하여 서명됩니다. 서명 키는 OAuth 서비스 계정 생성 키입니다.

필드 유형 필수 설명
iss 문자열 Y OAuth 2.0 서비스 계정에서 생성된 이메일 주소입니다.
aud 문자열 Y 잠재고객입니다. Google Wallet API 객체의 대상은 항상 google입니다.
typ 문자열 Y JWT 유형입니다. Google Wallet API 객체의 대상은 항상 savetoandroidpay입니다.
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 저장 기능에 대해 승인할 도메인 배열입니다. origins 필드가 정의되지 않으면 Google Wallet API 버튼이 렌더링되지 않습니다. origins 필드가 정의되지 않으면 브라우저 콘솔에 'Load denied by X-Frame-Options' 또는 'Refused to display' 메시지가 표시될 수 있습니다.

인코딩된 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가 포함된 오류 객체가 전달됩니다.
onprovidejwt 문자열 N 제공하는 JWT 핸들러 함수의 문자열 이름입니다. 이 함수의 목적은 객체가 Google 월렛에 추가되기 전에 JWT 데이터를 가로채고 잠재적으로 조작하는 것입니다. 이 함수는 매개변수를 사용하지 않으며 JWT를 문자열로 반환해야 합니다. 이벤트 핸들러를 구현할 때 this.getOpenParams().renderData.userParams.jwt 필드에서 원래 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 포함된 객체 또는 클래스에 필수 필드가 누락되었습니다.

현지화

자바스크립트 버튼의 언어는 다음 기준에 따라 변경됩니다.

  1. 사용자가 Google에 로그인하면 버튼은 사용자의 Google 계정 프로필에 지정된 기본 언어로 렌더링됩니다. 언어 변경을 참고하면 Google 계정의 기본 언어를 변경하는 방법을 확인할 수 있습니다.
  2. 사용자가 Google에 로그인하지 않은 경우에는 버튼에 HTTP 헤더의 ACCEPT-LANGUAGE 값이 사용됩니다.

위의 논리에 따라 버튼이 올바른 언어로 렌더링되지 않거나 문구가 부자연스러운 경우 Google 지원팀에 문의하시기 바랍니다.