Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web için Google Pay API 101: Temel Bilgiler

1. Giriş

Ne oluşturacaksınız?

Bu codelab'in tamamlanmasıyla, çalışan bir Google Pay entegrasyonuna sahip minimum düzeyde uygulanabilir bir web siteniz olacak. Bu proje, işleme alınması için bir ödeme hizmeti sağlayıcıya 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 tercih ettiğ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 bir Google Pay merchantId'e ihtiyacınız vardır. Google Pay ve Cüzdan Konsolu'na kaydolmak yalnızca bir dakika sürer. Bu işlemi şimdi yapabilirsiniz.

Project IDX'yi kullanarak takip edin

2. HTML sayfasını oluşturma

Proje dosyası oluşturma

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

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ı

Sayfaya gpay-container kimlikli 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.
main.js komut dosyası etiketi, DOM'a gpay-container öğesinden sonra yerleştirilir. Bu, main.js'ün onu sorgulamasından önce kapsayıcı DIV'nin DOM'da bulunduğundan emin olmak için gereklidir. Ayrıca, onGooglePayLoaded() yöntemi yükleme işleminin tamamlanmasından önce var olması gerektiğinden komut dosyası, 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 bunlar burada açıklanmayacaktır.
Son olarak pay.js, asenkron olarak yüklenir ve onGooglePayLoaded()'u onload işleyicisi olarak yapılandırır. Bu yöntem main.js adresinde tanımlanır.

3. Google Pay'i yapılandırma

Google Pay ödeme isteği için bir istek nesnesi gerekir. Burada baseGooglePayRequest olarak tanımlanan nesne, tüm istekler için ortak minimum ayarları içerir. Yapılan isteğe bağlı olarak ek ayarlar eklenir. Bu ayarları bu kod laboratuvarında 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ı

GPAY_BUTTON_CONTAINER_ID sabit değişkenini, HTML sayfasında Google Pay düğmesinin üst kapsayıcısı olarak kullanılan DOM öğesinin kimliğine ayarlayın.
Uygulamanızla ilgili ayarları içeren baseGooglePayRequest yapılandırma nesnesini oluşturun. Mülklerin ve değerlerin her birini referans dokümanlarından bulabilirsiniz. Bu örnekte gösterilen değerler ihtiyaçlarınızla tam olarak eşleşmeyebilir. Bu nedenle, değerleri dikkatlice inceleyin.
merchantId ve merchantName özelliklerini kendi değerlerinizle güncelleyin. Ortam TEST olduğunda bu alanlar isteğe bağlıdır.

Kaynaklar

Blog yayını: Google Pay ile daha sorunsuz bir ödeme deneyimi yaşamak ister misiniz? Ödeme seçeneklerinizi yapılandırın.
API Referansı: Google Pay API istek nesneleri dokümanları
API Referansı: İzin verilen yetkilendirme yöntemleri, izin verilen kart ağları ve uygun ağ geçidi değeri dahil olmak üzere jeton oluşturma özellikleri hakkında daha fazla bilgi için PaymentMethod sayfasına bakın.

4. Ödeme istemcisi ekleme

Ödeme isteğinde bulunmak ve geri aramaları kaydetmek için ö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 PaymentDataCallbacks işlevini yapılandırabilirsiniz. Ancak bu gelişmiş konular bu kod laboratuvarının kapsamına dahil değildir.

Aşağıdaki istemci kodunu main.js'ün 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ı

paymentsClient değişkeni, oluşturulduktan sonra örneği istemciye aktarır. Değişkene doğrudan kodumuz tarafından değil, her zaman getGooglePaymentsClient() yöntemi tarafından erişilir.
getGooglePaymentsClient() yöntemi, bir istemcinin oluşturulup oluşturulmadığını kontrol eder ve bu örneği döndürür. Daha önce oluşturulmamışsa bir tane 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şturulmasını ve kullanılmasını sağlar.
Bir istemci örneği oluşturmak için PaymentsClient() yöntemi çağrılır. Bu örnekte, müşteriye TEST ortamında olduğumuzu söylüyoruz. Alternatif PRODUCTION. Ancak TEST varsayılan olarak kullanılır ve atlanabilir.

5. Yardımcı ekleme

Aşağıdaki yardımcı işlevler komut dosyasında daha sonra kullanılır ve yalnızca kod okunabilirliğini ve sürdürülebilirliğini iyileştirmek amacıyla eklenmiştir.

Yardımcı işlevleri main.js işlevinin 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ı

deepCopy(), sağlanan nesnenin derin bir kopyasını oluşturmak için JSON serileştirme ve seri bozma işlemlerini kullanan bir yardımcı programdır. Paylaşılan referanslarla ilgili endişelenmenize gerek kalmadan nesneleri kopyalamanın kullanışlı bir yoludur.
renderGooglePayButton(), Google Pay düğmesini görüntülemek için createButton() kitaplık yöntemini çağıran bir yardımcı programdır. İletilen bağımsız değişken, düğmenin nasıl davranması gerektiğini tanımlayan bir seçenekler kümesidir (ör. düğme tıklamalarını işlemek için onGooglePaymentButtonClicked() işlevini kaydetme).

6. Etkinlik işleyicileri ekleme

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

Etkinlik işleyicilerini main.js öğesinin 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ı

pay.js komut dosyası, HTML dosyasında tanımlandığı şekilde yüklemeyi tamamladığında onGooglePayLoaded() ç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 ödeme yapmaya hazırsa (yani Google Cüzdan'ına bir ödeme şekli eklediyse) Google Pay düğmesi oluşturulur.
Google Pay düğmesi tıklandığında onGooglePaymentButtonClicked() çağrılır. Bu yöntem, ödeme jetonu almak için kullanılan loadPaymentData() kitaplık yöntemini çağırır. Ödeme jetonunu aldıktan sonra işlemin işlenmesi için ödeme ağ geçidinize gönderirsiniz. transactionInfo, bu düğme tıklamasıyla işlenmesi gereken işlemi tanımlar.

7. Sonuç

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

Projeyi çalıştırma

Google Chrome ile test etme

Google Chrome web tarayıcısını kullanarak Chrome'un ana menüsünden Dosya > Dosya Aç...'ı tıklayarak index.html dosyasını açın. Proje bu şekilde açıldığında Chrome, main.js komutunu yürütü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 kök pay-web-101 klasöründeki bir terminal isteminden python3 -m http.server'yi ç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 adresindeki sitenizi ziyaret edin.

Şimdi beni ne bekliyor?

Ek kaynaklar

Discord'daki #payments kanalında sohbete katılın
X'te @GooglePayDevs hesabını takip edin
YouTube'da Google Pay ile ilgili videolar izleme