Web için Google Pay API 201: Gelişmiş

1. Giriş

Bu codelab, Web için Google Pay API 101: Temel Bilgiler codelab'inin devamı niteliğindedir ve bu codelab'de yazılan kodu temel alır. Bu codelab'i tamamlamak için öncelikle söz konusu codelab'i tamamlamanız gerekir.

Neler öğreneceksiniz?

Google Pay düğmesini özelleştirme
Ödeme sürecini başlatma
Ödeme yetkilendirme durumunu onaylama
Kargo adresi değişikliklerini işleme
Kullanım kodlarını yönetme

İ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

2. Düğme özelleştirme

Bu, ButtonOptions hakkında kısa bir genel bakıştır. Daha ayrıntılı açıklama için belgelere bakın.

Seçenek	Gereklilik	Değerler
onClick	Zorunlu	JavaScript etkinlik işleyicisinin adı
allowedPaymentMethods	İsteğe bağlı	`PaymentMethod[]`
buttonColor	İsteğe bağlı	varsayılan, siyah, beyaz
buttonLocale	İsteğe bağlı	İki harfli ISO 639-1 kodu. Desteklenen yerel ayarlar arasında en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk ve zh yer alır.
buttonRadius	İsteğe bağlı	0 ila 100
buttonRootNode	İsteğe bağlı	HTMLDocument veya ShadowRoot
buttonSizeMode	İsteğe bağlı	static, fill
buttonType	İsteğe bağlı	book, buy, checkout, donate, order, pay, plain, subscribe

main.js dosyanızda renderGooglePayButton() yöntemini bulun ve buradaki kodla değiştirin.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

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

Kod açıklaması

createButton() kitaplığı yöntemi, düğmenin nasıl görünmesini ve davranmasını istediğinizi tanımlamanıza olanak tanıyan bir ButtonOptions yapılandırma bağımsız değişkeni alır.

3. Ödeme verileri geri çağırmaları

Ödeme istemcisi, belirli etkinlikler gerçekleştiğinde işlenecek işlevleri kaydetmenize olanak tanıyan bir mekanizma sağlar. Birincisi ödeme yetkilendirmesi, ikincisi ise ödeme verisi değişikliğidir.

// todo: paymentDataCallbacks yorumunu main.js içinde bulup bu kodla değiştirin.

paymentDataCallbacks: {
  onPaymentAuthorized: onPaymentAuthorized,
  onPaymentDataChanged: onPaymentDataChanged
},

Ardından, Event Handlers bölümünü bulun ve bölümün sonuna aşağıdaki kodu ekleyin.main.js

function onPaymentAuthorized(paymentData) {
  // We'll fill this in later
}

function onPaymentDataChanged(intermediatePaymentData) {
  // We'll fill this in later
}

Son olarak, main.js içinde // todo: callbackIntents yorumunu bulun ve yorumu bu kodla değiştirin. Bu codelab'de 4 amacın tamamını uygulayacağız.

callbackIntents: [
  'PAYMENT_AUTHORIZATION',
  'SHIPPING_ADDRESS',
  'SHIPPING_OPTION',
  'OFFER',
],
shippingAddressRequired: true,
shippingOptionRequired: true,
shippingOptionParameters: {
  defaultSelectedOptionId: 'shipping-001',
  shippingOptions: [
    {
      id: 'shipping-001',
      label: '$0.00: Free shipping',
      description: 'Free Shipping delivered in 5 business days.'
    },
    {
      id: 'shipping-002',
      label: '$1.99: Standard shipping',
      description: 'Standard shipping delivered in 3 business days.'
    },
    {
      id: 'shipping-003',
      label: '$1000: Express shipping',
      description: 'Express shipping delivered in 1 business day.'
    },
  ],
},

Kod açıklaması

PaymentDataCallbacks mülkünün iki alt mülkü vardır. Bunlardan biri ödeme yetkilendirme geri araması, diğeri ise ödeme verileri değişikliği geri araması içindir.
Geri çağırma işlevleri uygulanıyorsa onPaymentAuthorized zorunludur. Bu geri çağırma, callbackIntents listesi PaymentDataRequest içinde PAYMENT_AUTHORIZATION içerdiğinde çağrılır.
onPaymentDataChanged isteğe bağlıdır. Bu geri çağırma, callbackIntents listesi PaymentDataRequest içinde OFFER, SHIPPING_ADDRESS veya SHIPPING_OPTION içerdiğinde çağrılır.
Bu codelab'deki her iki geri çağırmayı da tetiklemek için PaymentDataRequest içinde callbackIntents değerini ayarlayın.

4. Ödeme onayı

Ödeme sürecini başlatmak ve ödeme yetkilendirme durumunu onaylamak için Ödemeleri Yetkilendir işlevi kullanılır.

Son adımda eklediğiniz main.js içindeki onPaymentAuthorized() işlevini bulun ve aşağıdaki kodla değiştirin.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

Kod açıklaması

onPaymentAuthorized() geri çağırma işlevi, PaymentData bağımsız değişkeniyle çağrılır ve bir promise döndürmelidir. Bu örnekte işlev, başarı veya hata döndürme konusunda rastgele seçim yapmaktadır. Projenizde, paymentData konumundaki paymentData.paymentMethodData.tokenizationData.token içinde bulunan jetonu kullanarak işlemi ağ geçidinizle işlemek için bu fırsattan yararlanacaksınız.

5. Ödeme verilerinde değişiklik

Dinamik fiyat güncellemeleri, satıcının seçilen bir kargo adresine göre kargo seçeneklerini ve işlem bilgilerini dinamik olarak güncellemesine olanak tanır. Ayrıca, seçilen kargo seçeneğine göre işlem bilgilerini dinamik olarak güncelleyebilirsiniz.

Son adımda eklediğiniz main.js içindeki onPaymentDataChanged() işlevini bulun ve aşağıdaki kodla değiştirin.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

Kod açıklaması

onPaymentDataChanged() işlevi, bağımsız değişken olarak IntermediatePaymentData alır. Bu işlev, ödeme sayfasında kargo adresi veya kargo seçenekleri değiştirildiğinde çağrılır.
onPaymentDataChanged() işlevi, ödeme sayfasını güncellemek için yeni işlem bilgilerini, kargo seçeneklerini ve hatayı belirten bir PaymentDataRequestUpdate nesnesini çözen bir söz döndürmelidir.
redemptionCodes, ödeme sayfasına girilen bir grup promosyon kodudur. Daha önce onaylanmış kodları içerir.

6. Sonuç

Bu Codelab'i tamamladığınız için tebrikler. Öğrendikleriniz:

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?

Entegrasyon yapılacaklar listesini inceleyin

Ek kaynaklar

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