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

Google Pay ile web'de hızlı bir ödeme deneyimi oluşturma

Google Pay API, kullanıcıların Google Hesaplarında depolanan ödeme bilgilerini kullanarak her yerde ödeme yapmasına olanak tanır. Bu laboratuvarda, daha hızlı, daha rahat ve daha güvenli bir deneyim oluşturarak basitleştirilmiş örnek bir online mağazanın ödeme deneyimini iyileştirmek için Google Pay'in web için istemci kitaplığından yararlanacaksınız. Bu da daha fazla dönüşüm ve daha mutlu müşteriler elde etmenizi sağlayacak.

Auto T-Shirt Shop, yapay zekadaki en son gelişmelerden yararlanan ve satın alabileceğiniz en uygun öğeyi önermek için stil tercihleri, hava durumu, yılın zamanı ve moda trendleri gibi bilgileri kullanan yenilikçi bir mağazadır.

Bu mağazanın etkileşim metrikleri çok yüksek. Maalesef metrikler, ödeme işlemi sırasında çok sayıda terk etme olduğunu da gösteriyor. Bu sorunu çözmeye kararlı olan proje sahiplerinden biri, Google Pay'in benzer siteler için sağladığı umut verici sonuçları gösteren bir video izlediğini hatırlıyor. Bu nedenle, Google Pay'i denemeye karar veriyor ve entegrasyonu sizin yapacağınızdan emin oluyor.

Ne oluşturacaksınız?

Bu codelab'de, Google Pay'in mevcut bir siteye entegrasyonu (kullanıcının Google Pay tarafından desteklenen bir ödeme yöntemiyle ödeme yapıp yapamayacağını belirleme, ödeme düğmesinin yerleştirilmesi ve tasarımı, işlemin yürütülmesi dahil) adım adım açıklanmaktadır.

Neler öğreneceksiniz?

Google Pay'i mevcut bir ödeme sayfasına entegre etme
Tercih ettiğiniz ödeme yöntemleri arasından seçim yapma
Kullanıcının Google Pay ile ödeme yapmaya hazır olup olmadığını belirleme

İhtiyacınız olanlar

İnternet erişimi olan bir bilgisayar
Temel JavaScript bilgisi

Örnek siteyi glitch.com'da çalıştırma

Bu codelab'i mümkün olduğunca hızlı bir şekilde kullanmaya başlamanız için glitch.com'da kullanıma sunduk. Glitch, web uygulamaları oluşturup yayınlamak için kullanabileceğiniz bir kod düzenleyici, barındırma ve dağıtım özellikleri sağlayan ücretsiz bir web tabanlı ortamdır.

Başlamak için aşağıdaki düğmeyi kullanarak Glitch'te bu codelab'in bir kopyasıyla önceden ayarlanmış yeni bir geliştirme ortamı sağlayın.

Glitch.com'da geliştirme ortamını başlatma

Bundan sonra, dosyalarınızı değiştirmek için Glitch'teki kod düzenleyiciyi kullanabilirsiniz. En üstteki Göster menüsünü kullanarak uygulamanızı yayınlamaya başlayın ve Yeni Pencerede'yi seçin.

Örnek siteye göz atma

Gördüğünüz gibi, depoda basit bir dosya yapısı bulunur. Bu codelab'in temel amacı, bu entegrasyonu mevcut ve gelecekteki uygulamalarınıza, birlikte çalışmayı seçtiğiniz çerçevelerden, kitaplıklardan veya araçlardan bağımsız olarak uyarlayabilmenizi sağlamaktır.

Siteyi keşfetme

Bu demo pazar yeri, satın alma yöntemi eklemeden önce mevcut veya potansiyel uygulamanızın bugün nasıl görünebileceğine benzer şekilde oluşturulmuştur. Hatta bu demo uygulaması üzerinde çalışmanızı önersek de Google Pay'i mevcut uygulamalarınıza entegre etmek için bu codelab'i kullanabilirsiniz.

Şimdi, henüz yapmadıysanız demo sitesini mevcut haliyle açın. Bunu yapmak için Glitch kullanıyorsanız Show (Göster) düğmesini tıklayın veya yerel web sunucunuzun çalıştığı URL'yi açın.

Demo sitesi şaşırtıcı bir şey değil, değil mi? Resim, fiyat, açıklama, bazı seçiciler ve sizi hayali ve sıradan bir ödeme formuna götüren bir düğme içeren bir ürün ayrıntıları sayfası.

Bu laboratuvarın amacı, bu akışı Google Pay destekli iki tıklamalı bir deneyimle değiştirmektir.

Bunu planlayalım.

Bu entegrasyonu daha iyi anlamak için süreç aşağıdaki temel adımlara ayrılmıştır:

Kitaplığı yükleme
Google Pay ile ödeme yapma özelliğini belirleme
Google Pay ile ödeme düğmesini gösterme
Ödeme isteği oluşturma ve gönderme
Sonuçları toplama

`script` etiketini ekleyin

Google Pay API'yi kullanmaya başlamak için yapmanız gereken ilk şey JavaScript kitaplığını yüklemektir. Bunu yapmak için API'yi çağırmayı planladığınız HTML dosyasına, harici JavaScript kitaplığına işaret eden bir src özelliği de dahil olmak üzere bir script etiketi ekleyin.

Bu codelab için index.html dosyasını açın. Komut dosyası etiketinin sizin için zaten eklendiğini görürsünüz:

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

src özelliğine ek olarak iki özellik daha eklediniz.

async, komut dosyanızın sayfanın geri kalanıyla birlikte eşzamansız olarak yüklenip yürütülmesine olanak tanır. Böylece belgenizin ilk yüklenme süresi etkilenmez.
onload, bu kitaplığa bağlı kodun yürütülmesini komut dosyanız yüklenene kadar ertelemenize yardımcı olur. Bu işlem tamamlandıktan sonra, bu özellikte belirttiğiniz işlev çalıştırılır. Bu durumda işlev onGooglePayLoaded olur.

API istemcisini oluşturma

Komut dosyanız yüklendikten sonra bu kitaplığı kullanmaya başlayabilirsiniz. Önce istemci nesnesini oluşturarak başlayın. Bu nesneyi daha sonra Google Pay API'ye çağrı yapmak için kullanacaksınız.

Bu projedeki dosya yapısının bir parçası olan index.js dosyasını düzenleyin. onGooglePayLoaded işlevini aşağıdaki kodla değiştirin.

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

Ödeme istemcisi, PaymentOptions nesnesiyle başlatılır. environment değerini TEST olarak ayarladığınızda entegrasyonun tamamında sahte ödeme bilgileriyle denemeler yapabilirsiniz. Gerçek işlemleri destekleyen işlemler oluşturmaya hazır olduğunuzda environment özelliğini PRODUCTION olarak güncelleyebilirsiniz.

Genel bakış

Google Pay API JavaScript İstemci Kitaplığı'nı yükledik. Şimdi de API çağrıları yapacak şekilde yapılandıralım.

Bu kod laboratuvarının geri kalanında yapılacak tüm kod değişiklikleri index.js dosyasına uygulanacaktır.

İskelet

Google Pay API ile her iletişim kurduğunuzda, isteklerinize dahil etmeniz gereken bir dizi yapılandırma parametresi (ör. hedeflediğiniz API'nin sürümü) vardır. Bu codelab'de, bu nesne uygulamanızda kabul edilen ödeme yöntemleri hakkında da bilgiler içerir. Nihai yapı aşağıdaki gibi görünür:

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

allowedPaymentMethods tesisinde ödeme yöntemleri listesi kabul ediliyor. Her ödeme yöntemi için aşağıdaki özellikleri eklemeniz gerekir:

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

Söz konusu kullanıcının Google Pay ile ödeme yapıp yapamayacağını belirlemek için yalnızca type ve parameters özellikleri gereklidir.

Ödeme yöntemi yapılandırması

Bu örnekte, yalnızca bir yapılandırmayı kabul edeceksiniz. Bu yapılandırma, hem belirteçli hem de birincil hesap numarası (PAN) biçiminde Mastercard ve Visa ile kart ödemelerine izin verir.

Yapılandırmanız index.js'da şu şekilde ayarlanmalıdır:

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

Kart kimlik doğrulama mekanizmaları hakkında: Ödeme yaparken, işlem bilgilerinin işlemciye veya ağ geçidine göre nasıl kimliği doğrulandığına bağlı olarak kartlar seçilebilir:

Birincil hesap numarası (PAN) kimlik doğrulaması kullanılırken kart hesap numarası ve son kullanma ayı ile yılı, ödeme işlemcisine gönderilir. Bu sayede müşterileriniz, Google Hesaplarıyla ilişkilendirilmiş ve daha önce güvenliği sağlanmış tüm kartları kullanabilir.
Dinamik kriptogram tabanlı kimlik doğrulama, kart belirteçleştirme ile birlikte çalışır. Kart belirteçleştirme, müşterinizin kart bilgilerini, müşterinizin kartı veren kuruluş dışında kimsenin anlayamayacağı rastgele bir değerle değiştiren bir mekanizmadır. Bu özellik, dinamik kriptogramlarla birlikte, işlemciye gönderilen jetonun her işlem için farklı olmasını sağlayarak bu işlemlerin güvenliğini önemli ölçüde artırır.

Özet

Özetleyelim.

Web sitenizde kabul edilecek bir ödeme yöntemi tanımladınız ve API'nin 2.0 sürümüyle çalışacaksınız. Elde edilen yapılandırma şu şekilde görünmelidir:

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

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

Temel yapılandırmanız hazır olduğuna göre şimdi eğlenceli kısma geçelim.

Google Pay'in temel amaçlarından biri, kullanıcılarınıza daha hızlı ve rahat bir ödeme deneyimi sunmaktır. Bu durum, kullanıcının Google Pay'i kullanabildiği durumların yanı sıra kullanamadığı durumlar için de geçerlidir. isReadyToPay isteğini kullanarak Google Pay ile ödeme yapmaya hazır olup olmadığını belirleyebilir ve deneyimi sitenizde buna göre değiştirebilirsiniz.

Kullanıcınız Google Pay ile ödeme yapabiliyor mu?

Yapmanız gereken ilk şey, sitenizde ödeme yapacak belirli bir kullanıcının Google Pay'i kullanıp kullanamayacağını kontrol etmektir. Bu istek için Google Pay API'sinin sürümünü ve sitenizde izin verilen ödeme yöntemlerini belirtmeniz gerekir. Bu, önceki adımda tanımlanan temel yapılandırma nesnesinin tam olarak içerdiğidir.

index.js içinde, onGooglePayLoaded() işlevine aşağıdakileri yapıştırın:

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);
  });

Arama başarısız olursa veya başarısız bir yanıtla geri dönerse Google Pay bağlamında başka bir işlem yapılması gerekmez. Bu durumda, en uygun sonraki adım diğer ödeme yöntemlerini destekleyen ek kullanıcı arayüzü göstermektir.

Diğer yandan, yanıt başarılı olursa kullanıcılarınızın Google Pay'den yararlanmasına izin vermeye hazırsınız demektir. Bu durumda, kullanıcı etkinleştirildiğinde ödeme sürecini başlatacak bir düğme (ör. düğme tıklama) ekleyebilirsiniz.

Google Pay ile ödeme yapma düğmesi ekleme

Ödeme sürecini başlatmak için Google Pay marka kurallarına uyan herhangi bir düğmeyi kullanabilirsiniz ancak Google Pay API'yi kullanarak bir düğme oluşturmanızı öneririz. Bu sayede, marka kurallarının doğru şekilde kullanılmasını sağlamanın yanı sıra düğmeye doğrudan yerleştirilmiş yerelleştirme gibi diğer iyileştirmelerden de yararlanabilirsiniz.

Düğme oluşturmak için createButton yöntemini PaymentsClient nesnesinde kullanın. Düğmeyi yapılandırmak için ButtonOptions'ı da ekleyin.

index.js içinde, createAndAddButton() işlevine aşağıdakileri yapıştırın:

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 kullanılırken tek zorunlu özellik onClick'dir. Bu özellik, kullanıcılarınız düğmeyi her etkinleştirdiğinde tetiklenecek geri çağırma nesnesini veya işlevini belirlemek için gereklidir. buttonColor ve buttonType, düğmenizin görünümünü özelleştirmenize olanak tanır. Uygulamanızın temasına ve kullanıcı arayüzü gereksinimlerine göre bunları uygun şekilde ayarlayın.

Düğme oluşturulduktan sonra yapmanız gereken tek şey, düğmeyi DOM'daki uygun bir düğüme eklemektir. Bu örnekte, bu amaçla div ile tanımlanan bir buy-now düğümü kullanılmaktadır.

Düğme tıklama etkinliklerini işleyecek bir işlev de tanımladığınızdan emin olun. Bir sonraki bölümde, ödeme yöntemi istemek için bu işlevi kullanacaksınız.

Ödeme isteğini hazırlama

Bu noktada, Google Pay API'yi yüklediniz ve sitenizin kullanıcısının ödeme yapmak için Google Pay'i kullanabildiğini belirlediniz. Sonuç olarak, kullanıcı arayüzünde Google Pay ödeme düğmesini gösterdiniz ve kullanıcınız artık işlemi başlatmaya hazır. Artık farklı oturum açmış kullanıcılar için kullanılabilen ödeme şekillerini içeren nihai ödeme sayfasını yükleme zamanı.

Daha önce yaptığınız gibi, isReadyToPay isteği tanımlanırken bu çağrı da bazı yeni özelliklerin yanı sıra daha önce tanımlanan temel yapılandırma nesnesindeki özellikleri (apiVersion, apiVersionMinor ve allowedPaymentMethods) gerektirir. Bu sefer, tokenizationSpecification adlı yeni bir mülk ve bu isteğin amacı için geçerli olan ödeme yöntemlerinizde ek parameters var. Ayrıca transactionInfo ve merchantInfo özelliklerinin eklenmesi gerekir.

Ödeme yöntemlerinize gerekli ek bilgileri ekleme

Daha önce kullanılan temel kart ödeme yönteminin bir kopyasını oluşturarak başlayın. Bu kart ödeme yöntemi artık seçilen ödeme yöntemiyle ilgili verilerin nasıl işleneceğini tanımlamak için bir tokenizationSpecification özelliği gerektiriyor. Ayrıca, gerçek işlem için gereken başka veri şartları da var. Bu örnekte, açık fatura adresi ve telefon numarası gibi.

`tokenizationSpecification` özelliği

Belirtkeleme spesifikasyonu, müşterilerinizin seçtiği ödeme yönteminin nasıl işleneceğini ve bir işlemi tamamlamak için nasıl kullanılacağını belirler.

İki farklı işleme stratejisi türü desteklenir. Ödeme işlemini PCI DSS'ye uygun sunucularınızdan işliyorsanız DIRECT spesifikasyon türünü kullanın. Bu örnekte, ödemeyi işlemek için bir ödeme ağ geçidi kullanıyorsunuz. Bu nedenle, PAYMENT_GATEWAY spesifikasyon türünü ayarlıyorsunuz.