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 koda dayanır. Bu codelab'i tamamlamak için önce bu codelab'i tamamladığınızdan emin olun.

Neler öğreneceksiniz?

• Google Pay düğmesini özelleştirme
• Ödeme sürecini başlatma
• Ödeme yetkilendirme durumunu onaylama
• Gönderim adresi değişiklikleri nasıl ele alınır?
• Kullanım kodlarını kullanma

İ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 süreci takip etme

2. Düğme özelleştirme

Bu, ButtonOptions'a kısa bir genel bakıştır. Daha ayrıntılı açıklama için dokümanları inceleyin

Seçenek	Zorunluluk	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: 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.
buttonRadius	İsteğe bağlı	0 ila 100
buttonRootNode	İsteğe bağlı	HTMLDocument veya ShadowRoot
buttonSizeMode	İsteğe bağlı	statik, dolgu
buttonType	İsteğe bağlı	rezervasyon, satın alma, ödeme, bağış, sipariş, ödeme, sade, abone olma

main.js dosyanızda renderGooglePayButton() yöntemini bulun ve burada listelenen 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ı

1. 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 verisi geri çağırmaları

Ödeme istemcisi, belirli etkinlikler gerçekleştiğinde işlenecek işlevleri kaydettiğiniz bir mekanizma sağlar. Bunlardan ilki ödeme yetkilendirmesi, ikincisi ise ödeme verileri değişikliğidir.

1. main.js dosyasında // todo: paymentDataCallbacks yorumunu bulup bu kodla değiştirin.

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

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

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

3. Son olarak, main.js içinde // todo: callbackIntents yorumunu bulun ve yorumu bu kodla değiştirin. Bu kod laboratuvarında 4 intent'in de uygulamasını yapacağı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ı

1. PaymentDataCallbacks mülkünün biri ödeme yetkilendirmesi geri çağırması, diğeri ise ödeme verileri değişikliği geri çağırması için iki alt mülkü vardır.
2. Geri çağırma uygulanıyorsa onPaymentAuthorized zorunludur. Bu geri çağırma işlevi, callbackIntents listesi PaymentDataRequest içinde PAYMENT_AUTHORIZATION içerdiğinde çağrılır.
3. onPaymentDataChanged isteğe bağlıdır. Bu geri çağırma işlevi, callbackIntents listesi PaymentDataRequest içinde OFFER, SHIPPING_ADDRESS veya SHIPPING_OPTION içerdiğinde çağrılır.
4. Bu codelab için her iki geri çağırma işlevini de tetiklemek üzere PaymentDataRequest içindeki callbackIntents değerini ayarlayın.

4. Ödeme onayı

Ödemeleri Yetkilendirme, ödeme işlemini başlatmak ve ödeme yetkilendirme durumunu onaylamak için 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ı

1. 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ürüp döndürmeyeceğini rastgele seçmektedir. Projenizde, paymentData saat paymentData.paymentMethodData.tokenizationData.token itibarıyla paymentData adresinde bulunan jetonu kullanarak işlemi geçiş sunucunuzla işlemek için bu fırsattan yararlanırsınız.

5. Ödeme verileri değişikliği

Dinamik Fiyat Güncellemeleri, satıcıların kargo seçeneklerini ve işlem bilgilerini seçilen kargo adresine göre dinamik olarak güncellemelerine olanak tanır. Ayrıca, işlem bilgilerini seçilen kargo seçeneğine göre 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);
  });
}

INITIALIZE geri çağırma işlevi, loadPaymentData()'a yapılan tek bir çağrı sırasında birden çok kez tetiklenebilir. Bu nedenle, bu işleve yapılan birden çok çağrıyı işleyebileceğinizden emin olmanız gerekir. Örneğin, kullanıcı hesap değiştirdiğinde onPaymentDataChanged(), yeni hesaptaki verilerle birlikte INITIALIZE ile tekrar çağrılır.

Kod açıklaması

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

6. Sonuç

Bu Codelab'i tamamladığınız için tebrikler. Aşağıdakileri nasıl yapacağınızı öğ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?

• Entegrasyon yapılacaklar listesini inceleyin

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