Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Google Pay를 사용하여 웹에서 빠른 결제 환경 구축

Google Pay API는 사용자가 Google 계정에 저장된 결제 정보를 사용하여 어디서나 결제할 수 있는 기회를 제공합니다. 이 실습에서는 Google Pay 웹 클라이언트 라이브러리를 사용하여 단순화된 샘플 온라인 상점의 결제 환경을 개선함으로써 보다 빠르고 편리하며 안전한 환경을 구축함으로써 더 많은 전환을 유도하고 고객을 만족시킬 수 있습니다.

Auto T-shirt Shop은 인공지능의 최신 발전 기술을 활용하고 스타일 환경설정, 날씨, 연중 시기, 패션 트렌드와 같은 정보를 사용하여 구매에 가장 적합한 상품을 추천해 주는 혁신적인 매장입니다.

이 매장의 참여도 측정항목은 지붕을 통해 나타납니다. 안타깝게도 이 측정항목에는 결제 과정에서 발생한 이탈률도 다수 반영되어 있습니다. 이 문제를 해결하기 위해 프로젝트 소유자 중 한 명이 Google Pay로 유사한 사이트에서 얻은 유망한 결과를 보여주는 동영상을 리콜한 결과, 통합을 처리하기로 결정하고 신뢰하기로 했습니다.

빌드할 항목

이 Codelab에서는 사용자가 Google Pay에서 지원하는 결제 수단을 사용하여 결제할 수 있는지, 결제 버튼의 배치와 디자인, 거래 실행을 비롯하여 Google Pay를 기존 사이트에 통합하는 과정을 설명합니다.

학습할 내용

Google Pay를 기존 결제 페이지에 통합하는 방법
원하는 결제 수단 선택 방법
사용자가 Google Pay로 결제할 준비가 되었는지 확인하는 방법

필요한 항목

인터넷이 연결된 컴퓨터
자바스크립트에 대한 기본 지식

glitch.com에서 샘플 사이트 실행

이 Codelab은 최대한 빠르게 설정하고 실행할 수 있도록 glitch.com에서 제공됩니다. Glitch는 웹 애플리케이션을 빌드하고 제공하는 데 사용할 수 있는 코드 편집기, 호스팅, 배포 기능을 제공하는 무료 웹 기반 환경입니다.

시작하려면 아래 버튼을 사용하여 이미 이 Codelab의 사본으로 설정된 Glitch에서 새 개발 환경을 프로비저닝하세요.

Glitch.com에서 개발 환경 시작하기

이제 Glitch의 코드 편집기를 사용하여 파일을 수정할 수 있습니다. 상단의 Show 메뉴를 사용하여 애플리케이션 제공을 시작하고 In a New Window를 선택합니다.

샘플 사이트 살펴보기

보시다시피 저장소에는 복잡한 파일 구조가 포함됩니다. 이 Codelab의 주요 목표는 선택하는 프레임워크, 라이브러리, 도구와 관계없이 기존 및 향후 애플리케이션에 이 통합 기능을 적용하는 것입니다.

사이트 살펴보기

이 데모 마켓플레이스는 구매 수단을 추가하기 전에 현재 또는 기존 애플리케이션이 어떻게 표시될지 겸손한 인상을 주도록 제작되었습니다. 실제로 이 데모 애플리케이션을 기반으로 작업하는 것이 좋지만 이 Codelab을 사용하여 Google Pay를 기존 애플리케이션에 통합할 수 있습니다.

아직 진행하지 않았다면 데모 사이트를 열어서 현재 그대로 둡니다. Glitch를 사용 중인 경우 Show 버튼을 클릭하거나 로컬 웹 서버가 실행 중인 URL을 엽니다.

데모 사이트는 전혀 예상할 수 없습니다. 사진, 가격, 설명, 일부 선택기, 가상 및 일반 결제 양식으로 이동할 수 있는 버튼이 있는 제품 세부정보 페이지

이 실습의 목표는 Google Pay에서 제공하는 클릭 한 번으로 이 흐름을 교체하는 것입니다.

이제 계획을 세우세요.

통합을 보다 잘 이해할 수 있도록 프로세스는 다음과 같은 기본 단계로 나누어져 있습니다.

라이브러리 로드
Google Pay로 결제 가능 여부 결정
Google Pay로 결제 버튼 표시
결제 요청 생성 및 전송
결과 수집

`script` 태그를 추가합니다.

Google Pay API 사용을 시작하기 위해 가장 먼저 해야 할 일은 자바스크립트 라이브러리를 로드하는 것입니다. 이렇게 하려면 API를 호출하려는 HTML 파일에 script 태그를 포함합니다. 여기에는 외부 자바스크립트 라이브러리를 가리키는 src 속성이 포함됩니다.

이 Codelab에서는 index.html 파일을 엽니다. 스크립트 태그가 이미 포함되어 있는 것을 확인할 수 있습니다.

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

src 외에 두 가지 다른 속성을 추가했습니다.

async을 사용하면 페이지의 나머지 부분과 함께 스크립트를 비동기식으로 로드하고 실행할 수 있으므로 문서의 첫 번째 로드 시간에 영향을 주지 않습니다.
onload를 사용하면 스크립트가 로드될 때까지 이 라이브러리에 종속된 코드의 실행을 지연시킬 수 있습니다. 그런 다음 이 속성에 지정하는 함수가 실행됩니다. 이 경우 함수는 onGooglePayLoaded입니다.

API 클라이언트 인스턴스화

스크립트가 로드되면 이 라이브러리 사용을 시작할 수 있습니다. 먼저 Google Pay API를 호출하는 데 사용할 클라이언트 객체를 인스턴스화합니다.

이 프로젝트의 파일 구조에 이미 포함된 index.js 파일을 수정합니다. onGooglePayLoaded 함수를 다음 코드로 바꿉니다.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

결제 클라이언트는 PaymentOptions 객체를 사용하여 초기화됩니다. environment를 TEST로 설정하면 전체 통합에서 더미 결제 정보를 실험할 수 있습니다. 실제 트랜잭션을 지원하는 작업을 만들 준비가 되면 environment 속성을 PRODUCTION로 업데이트하면 됩니다.

개요

이제 Google Pay API 자바스크립트 클라이언트 라이브러리를 로드했습니다. 이제 API를 호출하도록 구성해보겠습니다.

나머지 Codelab의 다음 코드 변경사항은 모두 index.js 파일에 적용됩니다.

뼈대

Google Pay API와 통신할 때마다 타겟팅하는 API의 버전과 같은 여러 구성 매개변수를 요청에 포함해야 합니다. 이 Codelab의 목적상 이 객체에는 애플리케이션에서 허용되는 결제 수단에 관한 정보도 포함되어 있습니다. 최종 구조는 다음과 같습니다.

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

allowedPaymentMethods 속성은 결제 수단 목록을 사용합니다. 모든 결제 수단에 다음 속성을 포함해야 합니다.

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

해당 사용자가 Google Pay로 결제할 수 있는지 확인하려면 type 및 parameters 속성만 필요합니다.

결제 수단 구성

이 예에서는 하나의 구성만 허용하며 Mastercard 및 Visa 카드의 경우 모두 토큰 및 기본 계좌 번호(PAN) 형식으로 허용됩니다.

구성은 index.js에서 다음과 같이 설정해야 합니다.

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

종합해 보기

요약 내용을 다시 살펴볼까요?

웹사이트에 허용되는 하나의 결제 수단을 정의했으며 API 버전 2.0을 사용합니다. 결과 구성은 다음과 같이 표시됩니다.

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

이제 기본 구성을 준비했으니 이제 재미있는 작업을 해보겠습니다.

Google Pay의 주요 목표 중 하나는 사용자에게 더 빠르고 편리한 결제 환경을 제공하는 것입니다. 이는 사용자가 Google Pay를 사용할 수 있는 상황뿐만 아니라 사용할 수 없는 상황에도 적용됩니다. isReadyToPay 요청을 사용하면 Google Pay로 결제할 준비가 되었는지 확인하고 사이트에서 환경을 수정할 수 있는 기회를 얻을 수 있습니다.

사용자가 Google Pay로 결제할 수 있나요?

가장 먼저 해야 할 일은 사이트에서 결제하려는 특정 사용자가 Google Pay를 사용하여 결제할 수 있는지 확인하는 것입니다. 이 요청에서는 Google Pay API 버전과 사이트에 허용되는 결제 수단을 지정해야 합니다. 이전 단계에서 정의한 기본 구성 객체에 정확히 이 객체가 포함됩니다.

index.js의 onGooglePayLoaded() 함수 내에 다음을 붙여넣습니다.

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

통화가 실패하거나 응답이 실패하면 Google Pay와 관련해 취할 수 있는 조치가 없습니다. 이 상황에서는 가장 적절한 다음 단계는 다른 결제 수단을 지원하는 추가 UI를 표시하는 것입니다.

반면에 응답이 완료되면 사용자가 Google Pay를 활용할 수 있는 준비가 된 것이므로 사용자 활성화 시 버튼 (예: 버튼 클릭)을 시작하는 버튼을 추가할 수 있습니다.

Google Pay로 결제하는 버튼 추가

Google Pay 브랜드 가이드라인을 따르는 모든 버튼을 사용하여 결제 프로세스를 시작할 수 있지만 Google Pay API를 사용하여 버튼을 만드는 것이 좋습니다. 이렇게 하면 브랜드 가이드라인을 정확하게 사용할 뿐만 아니라 현지화와 같은 다른 개선사항을 바로 이용할 수 있습니다.

버튼을 생성하려면 PaymentsClient 객체의 createButton 메서드(ButtonOptions 포함)를 사용하여 버튼을 구성합니다.

index.js의 createAndAddButton() 함수 내에 다음을 붙여넣습니다.

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

createButton를 사용할 때 유일한 필수 속성은 onClick입니다. 이 속성은 사용자가 버튼을 활성화할 때마다 트리거하는 콜백 객체 또는 함수를 결정하는 데 필요합니다. buttonColor 및 buttonType를 사용하면 버튼 모양을 맞춤설정할 수 있습니다. 애플리케이션의 테마 및 UI 요구사항을 기준으로 적절하게 조정하세요.

버튼이 생성되면 DOM 내의 적절한 노드에 추가하기만 하면 됩니다. 이 예시에서는 buy-now로 식별된 div 노드가 이 목적으로 사용됩니다.

버튼 클릭 이벤트를 처리하는 함수도 정의했습니다. 다음 섹션에서는 이 함수를 사용하여 결제 수단을 요청합니다.

결제 요청 준비하기

이제 Google Pay API가 로드되었으며 사이트 사용자가 Google Pay를 사용하여 결제할 수 있다고 판단했습니다. 따라서 UI에 Google Pay 결제 버튼을 표시했으며 이제 사용자가 거래를 시작할 준비가 되었습니다. 이제 로그인한 여러 사용자가 사용할 수 있는 결제 수단이 포함된 최종 결제 명세서를 로드할 차례입니다.

이전과 마찬가지로 isReadyToPay 요청 정의 과정에서 이 호출에는 앞에서 정의한 기본 구성 객체의 속성 (예: apiVersion, apiVersionMinor, allowedPaymentMethods)도 새로 필요합니다. 현재 결제 수단에 이 요청의 목적과 관련된 새 속성 tokenizationSpecification 및 추가 parameters이(가) 있습니다. 또한 transactionInfo 및 merchantInfo를 추가해야 합니다.

결제 수단에 필수 정보 추가로 입력

먼저 이전에 사용한 기본 카드 결제 수단의 사본을 만듭니다. 이제 이 카드 결제 수단에는 tokenizationSpecification 속성을 사용하여 선택된 결제 수단과 관련된 데이터 및 실제 거래에 필요한 추가 데이터 요구사항(이 예에서는 전체 청구서 수신 주소 및 전화번호)을 처리하는 방법을 정의해야 합니다.

`tokenizationSpecification` 속성

토큰화 사양은 고객이 선택한 결제 수단을 거래를 완료하는 데 사용하는 방식을 결정합니다.

지원되는 처리 유형에는 두 가지가 있습니다. PCI DSS 규정 준수 서버 내에서 결제 거래를 처리하는 경우 DIRECT 사양 유형을 사용하세요. 이 예시에서는 결제 게이트웨이를 사용하여 결제를 처리하므로 PAYMENT_GATEWAY 사양 유형을 설정합니다.