Build with Gemini, our largest and most capable AI model. Get an API key.

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

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

Google Pay API'si, kullanıcılara Google Hesaplarında kayıtlı ödeme bilgilerini kullanarak her yerde ödeme yapma fırsatı sunar. Bu laboratuvarda, daha kolay, daha güvenli ve daha güvenli bir deneyim oluşturarak, daha basit bir online mağazanın ödeme deneyimini iyileştirmek için web'de Google Pay'in istemci kitaplığından yararlanacaksınız. Bu da daha fazla dönüşüm ve müşteri memnuniyeti sağlayacak.

Auto T-Shirt Shop, yapay zeka alanındaki en son gelişmelerden yararlanan ve satın alınabilecek en uygun ürünü önermek için stil tercihleri, hava durumu, yılın saati ve moda trendleri gibi bilgileri kullanan yenilikçi bir mağazadır.

Bu mağaza için etkileşim metrikleri çatı üzerinden yapılır. Maalesef metrikler, ödeme işlemi sırasında çok sayıda vazgeçmeyi de yansıtıyor. Bu sorunun üstesinden gelmeye karar veren proje sahiplerinden biri, Google Pay'in benzer sitelerden elde ettiği umut vaat eden sonuçları gösteren bir video izlediğini fark ediyor. Bu nedenle, siteyi inceleyip ona entegre olma konusunda size güveniyor.

Oluşturacağınız uygulama

Bu codelab'de, kullanıcının Google Pay tarafından desteklenen ödeme yöntemini kullanarak ödeme yapıp yapamayacağı, ödeme düğmesinin yerleşimi ve tasarımı ve işlemin yürütülmesi de dahil olmak üzere, Google Pay'i mevcut bir siteye entegre etme adımları açıklanmaktadır.

Neler öğreneceksiniz?

Google Pay'i mevcut ö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

Gerekenler

İnternet erişimi olan bir bilgisayar
Temel JavaScript bilgisi

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

Olabildiğince hızlı şekilde çalışmaya başlamak için bu codelab, glitch.com'da kullanıma sunulmuştur. Glitch, web uygulamaları oluşturmak ve sunmak için kullanabileceğiniz bir kod düzenleyicinin yanı sıra barındırma ve dağıtım özellikleri sağlayan ücretsiz bir web tabanlı ortamdır.

Başlamak için, Glitch'te bu codelab'in bir kopyasıyla oluşturulmuş yeni bir geliştirme ortamının temel hazırlığını yapmak için aşağıdaki düğmeyi kullanın.

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

Bu aşamada, Glitch'teki kod düzenleyiciyi kullanarak dosyalarınızı değiştirebilirsiniz. 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 atın

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

Siteyi keşfedin

Bu demo ticaret sitesi, satın alım yöntemi eklemeden önce, mevcut veya potansiyel uygulamanızın bugünkü görünümüne şahsen benzeyecek şekilde oluşturulmuş. Aslında bu demo uygulaması üzerinde çalışmanızı önermemize rağmen devam ederek Google Pay'i mevcut uygulamalarınıza entegre etmek için bu codelab'i kullanabilirsiniz.

Henüz yapmadıysanız demo sitesini şu anki haliyle açın. Bunu yapmak için Glitch'i kullanıyorsanız Göster düğmesini tıklayın veya yerel web sunucunuzun çalıştığı URL'yi açın.

Demo sitesinde şaşırtıcı bir şey yok, değil mi? Bir resim, fiyat, açıklama, birkaç seçici ve sizi hayali ve sıradan bir ödeme formuna yönlendiren bir düğmenin bulunduğu ürün ayrıntıları sayfası.

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

Bunu planlayalım!

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

Kitaplığı yükleme
Google Pay ile ödeme yapma kapasitesini belirleme
Google Pay ile ödeme yapmak için düğmeyi gösterin
Ödeme isteği oluşturma ve gönderme
Sonuçları toplama

`script` etiketini ekleme

Google Pay API'yi kullanmaya başlamak için ilk olarak JavaScript kitaplığını yüklemeniz gerekir. Bunu yapmak için, API dosyasına çağırmak istediğiniz HTML dosyasına bir script etiketi ekleyin. Bu etiket, harici JavaScript kitaplığını işaret eden bir src özelliği de içerir.

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üklenmesine ve yürütülmesine olanak tanır. Böylece dokümanınızın ilk yükleme süresi etkilenmez.
onload, komut dosyanız yüklenene kadar bu kitaplığa bağlı kodun yürütülmesini ertelemenize yardımcı olur. İşlem tamamlandıktan sonra bu özellikte belirttiğiniz işlev çalıştırılır. Bu örnekte, işlev onGooglePayLoaded şeklindedir.

API istemcisini örneklendirme

Komut dosyanız yüklendikten sonra, bu kitaplığı kullanmaya başlamanız için her şey hazır olur. Daha sonra Google Pay API'ye çağrı yapmak için kullanacağınız istemci nesnesini örnekleyerek başlayın.

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 bir PaymentOptions nesnesiyle başlatılır. environment özelliğini TEST olarak ayarlamak, entegrasyonun tamamında sahte ödeme bilgileriyle denemeler yapmanıza olanak tanır. 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 bu API'yi bizim için API çağrıları yapacak şekilde yapılandıralım.

Codelab'in geri kalanı için aşağıdaki kod değişikliklerinin tümü index.js dosyasına yapılır.

İskelet

Google Pay API ile her iletişim kurduğunuzda, hedeflediğiniz API'nin sürümü gibi isteklerinize dahil etmeniz gereken çeşitli yapılandırma parametreleri bulunur. Bu codelab'in amacına uygun olarak bu nesne de başvurunuzda kabul edilen ödeme yöntemleri hakkında bilgi içerir. Son yapı aşağıdaki gibi görünür:

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

allowedPaymentMethods mülkü, ödeme yöntemlerinin listesini alır. 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 mülkleri gerekir.

Ödeme yöntemi yapılandırması

Bu örnekte, yalnızca jeton ve birincil hesap numarası (PAN) formlarında Mastercard ve Visa için kart ödemelerine izin veren bir yapılandırma kabul etmiş olursunuz.

index.js içinde yapılandırmanız ş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 kartlar, işlem bilgilerinin işlemciye veya ağ geçidine göre nasıl doğrulandığına bağlı olarak seçilebilir:

Birincil hesap numarası (PAN) kimlik doğrulaması kullanılırken kart hesabı numarasıyla birlikte geçerlilik bitiş ayı ve yılı, ödeme işleyiciye gönderilir. Bu, müşterilerinizin Google hesaplarıyla ilişkili daha önce güvenli hale getirilmiş tüm kartları kullanmasına olanak tanır.
Dinamik kriptograma dayalı kimlik doğrulama, müşterinizin kart bilgilerini, müşterinizin kartı veren kuruluşun başka kimsenin anlayamayacağı rastgele bir değerle değiştiren bir kart jetonasyonu ile birlikte çalışır. Bu yaklaşım, dinamik kriptogramlarla birlikte, işlemciye gönderilen jetonun her işlem için her zaman farklı olmasını sağlayarak bu işlemlerde güvenliği ö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 aşağıdaki gibi olacaktır:

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

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

Artık temel konfigürasyonunuzu hazırladığınıza göre şimdi en eğlenceli bölüme geçebiliriz.

Google Pay'in temel hedeflerinden biri, kullanıcılarınıza daha hızlı ve daha kolay bir ödeme deneyimi sunmaktır. Bu, bir kullanıcının Google Pay'i kullanabileceği durumlar için de geçerli değildir. Aynı zamanda, isReadyToPay isteğini kullanarak Google Pay ile ödeme yapmaya hazır olup olmadığınızı ve sitenizdeki deneyimi uygun şekilde değiştirme fırsatını belirleyebilirsiniz.

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

Yapmanız gereken ilk şey, sitenizde ödeme yapmak üzere olan belirli bir kullanıcının Google Pay'i kullanıp kullanamayacağını kontrol etmektir. Bu istek, Google Pay API'nin sürümünü ve siteniz için izin verilen ödeme yöntemlerini belirtmenizi gerektirir. Önceki adımda tanımlanan temel yapılandırma nesnesi tam olarak bunu içerir.

onGooglePayLoaded() işlevinin içindeki index.js öğesine 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 sonuçlanırsa Google Pay bağlamında başka bir işlem yapılmaz. Bu durumda en uygun adım, diğer ödeme yöntemlerini destekleyen ek kullanıcı arayüzünü göstermektir.

Diğer yandan, yanıt başarılı olursa artık kullanıcılarınızın Google Pay'den faydalanmasına olanak tanıyabilirsiniz. Dolayısıyla, devam ederek kullanıcı etkinleştirmesinde (örneğin, düğme tıklaması) ödeme işlemini başlatmak için bir düğme ekleyebilirsiniz.

Google Pay ile ödeme yapmak için bir düğme ekleyin

Ödeme işlemini başlatmak için Google Pay marka kurallarına uygun tüm düğmeleri kullanabilirsiniz, ancak Google Pay API'yi kullanarak bir düğme oluşturmanızı öneririz. Bu şekilde, marka kurallarının doğru şekilde kullanılmasını sağlamakla kalmaz, aynı zamanda yerelleştirme gibi doğrudan düğmeye yerleştirilmiş diğer iyileştirmelerden de yararlanırsınız.

Düğme oluşturmak için PaymentsClient nesnesinde createButton düğmesini kullanın ve düğmeyi yapılandırmak için ButtonOptions'ı kullanın.

createAndAddButton() işlevinin içindeki index.js öğesine 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 gereken tek özellik, kullanıcılarınız düğmeyi her etkinleştirdiğinde tetiklenecek geri çağırma nesnesini veya işlevini belirlemek için gerekli olan onClick değeridir. buttonColor ve buttonType, düğmenizin görünümünü özelleştirmenize olanak tanır. Uygulamanızın teması ve kullanıcı arayüzü koşullarına göre bu başlıkları gerektiği şekilde değiştirin.

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

Düğme tıklama etkinliklerini işlemek için bir işlev tanımladığınızı da görebilirsiniz. Sonraki bölümde, bir ö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 kullanabileceğini belirlediniz. Bunun sonucunda, 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, giriş yapan farklı kullanıcılara sunulan ödeme şekillerini içeren son ödeme sayfasını yüklemenin zamanı geldi.

Daha önce yaptığınız gibi, isReadyToPay isteğinin tanımı sırasında bu çağrı, bazı yeni özelliklerin yanı sıra daha önce tanımlanan temel yapılandırma nesnesindeki (apiVersion, apiVersionMinor ve allowedPaymentMethods) mülkleri de gerektirir. Bu sefer, ödeme yöntemlerinizde bu isteğin amacıyla ilgili yeni bir mülk, tokenizationSpecification ve ek parameters bulunuyor. transactionInfo ve merchantInfo özelliklerinin de 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önteminde artık, seçilen ödeme yöntemiyle ilgili verilerin nasıl işleneceğini ve gerçek işlem için gereken diğer veri gereksinimlerinin (bu örnekte tam fatura adresi ve telefon numarası) tanımlanması için tokenizationSpecification mülkü gerekiyor.

`tokenizationSpecification` özelliği

Jeton spesifikasyonu, müşterileriniz tarafından seçilen ödeme yönteminin nasıl işleneceğini ve bir işlemi tamamlamak için nasıl kullanılacağını belirler.

Desteklenen iki farklı işlem stratejisi türü vardır. Ödeme işlemini PCI DSS uyumlu sunucularınızdan gerçekleştiriyorsanız DIRECT spesifikasyon türünü kullanın. Bu örnekte, ödemeyi işlemek için bir ödeme ağ geçidi kullanırsınız. Dolayısıyla, PAYMENT_GATEWAY spesifikasyon türünü ayarlarsınız.