Web için Google Pay API 101: Temel Bilgiler

1. Giriş

Ne oluşturacaksınız?

Bu codelab'i tamamladığınızda, Google Pay entegrasyonu çalışan minimum düzeyde işlevsel bir web siteniz olacak. Bu proje, işlenmek üzere bir ödeme hizmeti sağlayıcısına gönderilebilecek bir ödeme jetonu alır.

Neler öğreneceksiniz?

  • Google Pay API'yi yükleme ve yapılandırma
  • Google Pay düğmesini görüntüleme ve tıklamaları işleme
  • Google Pay'den ödeme jetonu isteme

İhtiyacınız olanlar

  • HTML ve JavaScript dosyalarını düzenlemek için istediğiniz bir metin düzenleyici.
  • Google Chrome web tarayıcısı veya yerel bir web sitesini test etmenin başka bir yolu.
  • Üretim için Google Pay merchantId gerekir. Google Pay ve Cüzdan Konsolu'na kaydolmak yalnızca bir dakika sürer. Bu nedenle, kaydınızı hemen yapabilirsiniz.

Firebase Studio'yu kullanarak takip edin

Firebase Studio'da açma

2. HTML sayfasını oluşturma

Proje dosyaları oluşturma

  1. Bilgisayarınızda gpay-web-101 adlı bir klasör oluşturun ve bu klasörün içinde index.html ve main.js adlı iki boş metin dosyası oluşturun.Dizin yapınız şu şekilde görünmelidir:
    gpay-web-101/
  index.html
  main.js
  2. Tercih ettiğiniz IDE'de index.html dosyasını açın ve aşağıdaki kodu ekleyin:
    <!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Pay API for Web 101</title>
</head>

<body>
  <div id="gpay-container"></div>
  <p>Transaction info and errors will be logged to the console.</p>
  <script type="text/javascript" src="main.js"></script>
  <script
    async src="https://pay.google.com/gp/p/js/pay.js"
    onload="onGooglePayLoaded()">
  </script>
</body>

</html>

Kod açıklaması

  1. Sayfaya gpay-container kimliğiyle boş bir DIV eklenir. Bu DOM öğesi, Google Pay düğmesinin eklendiği üst öğe olur. Bu öğeyi web sitenizin düzeninde uygun bir yere yerleştirebilirsiniz.
  2. main.js komut dosyası etiketi, gpay-container öğesinden sonra DOM'a yerleştirilir. Bu, main.js sorgularından önce kapsayıcı DIV'in DOM'da bulunduğundan emin olmak için gereklidir. Ayrıca, komut dosyası, yükleme tamamlanmadan önce onGooglePayLoaded() yönteminin mevcut olması gerektiğinden pay.js yüklenmeden önce yüklenmesini sağlamak için eşzamanlıdır. Aynı etkiyi elde etmenin başka yolları da vardır ancak bu yollar burada ele alınmayacaktır.
  3. Son olarak, pay.js asenkron olarak yüklenir ve onGooglePayLoaded() öğesini onload işleyicisi olarak yapılandırır. Bu yöntem, main.js adresinde tanımlanacaktır.

3. Google Pay'i yapılandırma

Google Pay ödeme isteği için istek nesnesi gerekir. Burada baseGooglePayRequest olarak tanımlanan nesne, tüm istekler için minimum ortak ayarları içerir. Yapılan isteğe bağlı olarak ek ayarlar eklenecektir. Bu ayarları bu codelab'de inceleyeceğiz.

Google Pay yapılandırma sabitlerini boş main.js dosyasına ekleyin:

//=============================================================================
// Configuration
//=============================================================================

// The DOM element that the Google Pay button will be rendered into
const GPAY_BUTTON_CONTAINER_ID = 'gpay-container';

// Update the `merchantId` and `merchantName` properties with your own values.
// Your real info is required when the environment is `PRODUCTION`.
const merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

// This is the base configuration for all Google Pay payment data requests.
const baseGooglePayRequest = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [
    {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: [
          "PAN_ONLY", "CRYPTOGRAM_3DS"
        ],
        allowedCardNetworks: [
          "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"
        ]
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'example',
          gatewayMerchantId: 'exampleGatewayMerchantId'
        }
      }
    }
  ],
  merchantInfo
};

// Prevent accidental edits to the base configuration. Mutations will be
// handled by cloning the config using deepCopy() and modifying the copy.
Object.freeze(baseGooglePayRequest);

Kod açıklaması

  1. Sabit değişkeni GPAY_BUTTON_CONTAINER_ID, HTML sayfasında Google Pay düğmesinin üst kapsayıcısı olarak kullanılan DOM öğesinin kimliğine ayarlayın.
  2. Uygulamanızla ilgili ayarları içeren yapılandırma nesnesini baseGooglePayRequest oluşturun. Özelliklerin ve değerlerin her birini referans belgelerinde bulabilirsiniz. Bu örnekte gösterilen değerler ihtiyaçlarınızı tam olarak karşılamayabilir. Bu nedenle, değerleri dikkatlice inceleyin.
  3. merchantId ve merchantName özelliklerini kendi değerlerinizle güncelleyin. Bu alanlar, ortam TEST olduğunda isteğe bağlıdır.

Kaynaklar

4. Ödeme istemcisi ekleme

Ödeme istekleri göndermek ve geri çağırmaları kaydetmek için bir ödeme istemcisi kullanılır. Bu codelab'de yalnızca ödeme istekleri göndereceğiz. Ayrıca, ödeme verileri veya yetkilendirme değiştiğinde ne yapılacağını belirlemek için PaymentDataCallbacks'ı da yapılandırabilirsiniz. Ancak bu ileri düzey konular bu codelab'de ele alınmamaktadır.

Bu istemci kodunu main.js dosyasının en altına ekleyin:

//=============================================================================
// Google Payments client singleton
//=============================================================================

let paymentsClient = null;

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo,
      // todo: paymentDataCallbacks (codelab pay-web-201)
    });
  }

  return paymentsClient;
}

Kod açıklaması

  1. paymentsClient değişkeni, oluşturulduktan sonra istemciye ait örneği tutar. Değişkene kodumuz tarafından doğrudan erişilmez, bunun yerine her zaman getGooglePaymentsClient() yöntemiyle erişilir.
  2. getGooglePaymentsClient() yöntemi, istemcinin zaten oluşturulup oluşturulmadığını kontrol eder ve bu örneği döndürür. Daha önce oluşturulmamışsa oluşturulur, kaydedilir ve döndürülür. Bu yöntem, bu komut dosyasının kullanım ömrü boyunca yalnızca bir örneğin oluşturulup kullanılmasını sağlar.
  3. Bir istemciyi başlatmak için PaymentsClient() yöntemi çağrılır. Bu örnekte, müşteriye TEST ortamında olduğumuzu söylüyoruz. Alternatif PRODUCTION'dır. Ancak TEST varsayılandır ve atlanabilir.

5. Yardımcı ekleme

Aşağıdaki yardımcı işlevler, komut dosyasının ilerleyen kısımlarında kullanılır ve yalnızca kodun okunabilirliğini ve sürdürülebilirliğini artırmak amacıyla eklenmiştir.

Yardımcı işlevleri main.js dosyasının en altına ekleyin:

//=============================================================================
// Helpers
//=============================================================================

const deepCopy = (obj) => JSON.parse(JSON.stringify(obj));

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    onClick: onGooglePaymentButtonClicked
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

Kod açıklaması

  1. deepCopy(), sağlanan nesnenin derin bir kopyasını oluşturmak için JSON serileştirme ve seri durumdan çıkarma işlemlerini kullanan bir yardımcı programdır. Bu, paylaşılan referanslar konusunda endişelenmeden nesneleri klonlamanın kolay bir yoludur.
  2. renderGooglePayButton(), Google Pay düğmesini göstermek için createButton() kitaplık yöntemini çağıran bir yardımcı programdır. Geçirilen bağımsız değişken, düğme tıklamalarını işlemek için onGooglePaymentButtonClicked() işlevini kaydetme gibi düğmenin nasıl davranması gerektiğini tanımlayan bir seçenekler kümesidir.

6. Etkinlik işleyicileri ekleme

Bu komut dosyasında iki etkinlik işleyicisi yapılandırıyoruz. Birincisi pay.js kitaplığı yüklenmeyi bitirdiğinde, diğeri ise Google Pay düğmesi tıklandığında çağrılır.

Etkinlik işleyicilerini main.js öğesinin en altına ekleyin:

//=============================================================================
// Event Handlers
//=============================================================================

function onGooglePayLoaded() {
  const req = deepCopy(baseGooglePayRequest);

  getGooglePaymentsClient()
    .isReadyToPay(req)
    .then(function(res) {
      if (res.result) {
        renderGooglePayButton();
      } else {
        console.log("Google Pay is not ready for this user.");
      }
    })
    .catch(console.error);
}

function onGooglePaymentButtonClicked() {
  // Create a new request data object for this request
  const req = {
    ...deepCopy(baseGooglePayRequest),
    transactionInfo: {
      countryCode: 'US',
      currencyCode: 'USD',
      totalPriceStatus: 'FINAL',
      totalPrice: (Math.random() * 999 + 1).toFixed(2),
    },
    // todo: callbackIntents (codelab gpay-web-201)
  };

  // Write request object to console for debugging
  console.log(req);

  getGooglePaymentsClient()
    .loadPaymentData(req)
    .then(function (res) {
      // Write response object to console for debugging
      console.log(res);
      // @todo pass payment token to your gateway to process payment
      // @note DO NOT save the payment credentials for future transactions
      paymentToken = res.paymentMethodData.tokenizationData.token;
    })
    .catch(console.error);
}

Kod açıklaması

  1. onGooglePayLoaded(), pay.js komut dosyası HTML dosyasında tanımlandığı şekilde yüklenmeyi tamamladığında çağrılır. Google Pay düğmesinin gösterilip gösterilmeyeceğini belirlemek için isReadyToPay() yöntemi çağrılır. Tüketici ödemeye hazırsa (Google Cüzdan'ına bir ödeme şekli eklemişse) Google Pay düğmesi oluşturulur.
  2. Google Pay düğmesi tıklandığında onGooglePaymentButtonClicked() çağrılır. Bu yöntem, ödeme jetonunu almak için kullanılan loadPaymentData() kitaplık yöntemini çağırır. Ödeme jetonunu aldıktan sonra işlemi işlemek için ödeme ağ geçidinize gönderirsiniz. transactionInfo, bu düğme tıklamasıyla işlenmesi gereken işlemi açıklar.

7. Sonuç

Bu Codelab'i tamamladığınız için tebrikler. Google Pay API'yi web sitesine nasıl entegre edeceğinizi öğrendiniz.

Projeyi yürütme

Google Chrome ile test etme

Google Chrome web tarayıcısını kullanarak Chrome'un ana menüsünden Dosya > Dosya Aç...'ı seçerek index.html dosyasını açın. Proje bu şekilde açıldığında Chrome, main.js dosyasını çalıştırır. Diğer web tarayıcıları, JavaScript'in yürütülmesine izin vermeyebilir.

– veya –

Yerel bir web sunucusuyla test etme

Python yüklüyse python3 -m http.server komutunu kök pay-web-101 klasöründeki bir terminal isteminden çalıştırın.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Ardından, http://localhost:8000 adresinden sitenizi ziyaret edin.

Şimdi beni ne bekliyor?

Ek kaynaklar