Integrer Google Pay i din webapp

Integrer Google Pay i din webapplikation: En omfattende guide

I den stadigt udviklende digitale handelsverden er en glat og sikker betalingsoplevelse afgørende for enhver succesfuld webapplikation. Google Pay API tilbyder en bekvem og pålidelig metode til at håndtere online betalinger, hvilket giver kunderne mulighed for at bruge deres gemte betalingsoplysninger med få klik. Denne guide vil lede dig gennem processen med at integrere Google Pay API i din webapplikation, fra de grundlæggende konfigurationer til avancerede funktioner som dynamiske prisopdateringer og kampagnekoder.

Trin 1: Definer din Google Pay API-version

Det første skridt i integrationen er at erklære den version af Google Pay API, som din side bruger. Dette sikrer kompatibilitet og korrekt dataudveksling. Både hoved- og mindre versioner er påkrævede i felterne for hvert objekt, der sendes, og de inkluderes også i svaret. Her er et eksempel på, hvordan du erklærer API-versionerne:

const baseRequest = { apiVersion: 2, apiVersionMinor: 0 }; 

Trin 2: Definer understøttede betalingskortnetværk

Du skal angive, hvilke betalingskortnetværk din hjemmeside accepterer. Dette inkluderer almindelige netværk som VISA, Mastercard, American Express, Discover, JCB og Interac. Derudover kan Google Pay API returnere kortoplysninger, der er gemt på Google.com (PAN_ONLY) eller en enhedstoken på Android-enheder (CRYPTOGRAM_3DS). Du kan vælge at understøtte en eller begge metoder. Det er vigtigt at bekræfte med din betalingsprocessor og indløser, om enhedstokens (CRYPTOGRAM_3DS) understøttes i din region, før du konfigurerer allowedCardAuthMethods.

const allowedCardNetworks = [ "AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA" ]; const allowedCardAuthMethods = [ "PAN_ONLY", "CRYPTOGRAM_3DS" ]; 

Vigtigt: Sørg for at anvende dine eksisterende risikokontroller og -mekanismer til Google Pay-transaktioner. Google Pays validerings- og svindelkontroller er ikke beregnet til at erstatte dine egne risikostyringsprocesser. Hvis du understøtter PAN_ONLY, skal du sikre dig, at du udløser 3D Secure (trinvis godkendelse) for disse transaktioner på samme måde som for normale korttransaktioner.

Trin 3: Beskriv dine tilladte betalingsmetoder

For at beskrive dine tilladte betalingsmetoder kombinerer du dine understøttede godkendelsesmetoder og kortnetværk for at definere understøttelsen af betalingsmetoden CARD. Derefter udvider du dette objekt til at inkludere oplysninger om tokeniserede betalingsdata.

const baseCardPaymentMethod = { type: 'CARD', parameters: { allowedAuthMethods: allowedCardAuthMethods, allowedCardNetworks: allowedCardNetworks } }; const cardPaymentMethod = Object.assign( { tokenizationSpecification: tokenizationSpecification }, baseCardPaymentMethod ); 

Google Pay understøtter i øjeblikket kun betalingsmetoden CARD.

Trin 4: Indlæs Google Pay API JavaScript-biblioteket

For at indlæse Google Pay API JavaScript-biblioteket skal du inkludere Googles hostede JavaScript på din side. Når biblioteket er indlæst, skal du initialisere et PaymentsClient-objekt. Til indledende udvikling anbefales det at bruge et TEST-miljø, som returnerer dummy-betalingsmetoder, der er velegnede til at referere til strukturen af et betalingssvar. I dette miljø er en valgt betalingsmetode ikke i stand til at gennemføre en transaktion.

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

let paymentsClient = null; function getGooglePaymentsClient() { if (paymentsClient === null) { paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'}); } return paymentsClient; } function onGooglePayLoaded() { const paymentsClient = getGooglePaymentsClient(); // ... yderligere logik ... } 

Det anbefales at initialisere paymentsClient kun én gang og bruge den samme instans til alle API-kald.

Trin 5: Bestem parathed til at betale med Google Pay API

Før du viser en Google Pay-knap, skal du kontrollere, om brugerens enhed og browser understøtter Google Pay. Dette gøres ved at kalde isReadyToPay()-metoden med en isReadyToPayRequest, der indeholder dine tilladte betalingsmetoder.

function getGoogleIsReadyToPayRequest() { return Object.assign({}, baseRequest, { allowedPaymentMethods: [baseCardPaymentMethod] }); } // ... inde i onGooglePayLoaded() ... paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest()) .then(function(response) { if (response.result) { addGooglePayButton(); // Tilføj Google Pay-knappen, hvis den er klar } }) .catch(function(err) { console.error(err); }); 

Trin 6: Tilføj en Google Pay-betalingsknap

En Google Pay-betalingsknap opfordrer kunderne til at gennemføre købet. Du kan tilpasse knappen med hensyn til type, farve og visningskrav i overensstemmelse med Googles retningslinjer.

function addGooglePayButton() { const paymentsClient = getGooglePaymentsClient(); const button = paymentsClient.createButton({ onClick: onGooglePaymentButtonClicked, allowedPaymentMethods: [baseCardPaymentMethod] }); document.getElementById('container').appendChild(button); } 

Trin 7: Opret et PaymentDataRequest-objekt

PaymentDataRequest-objektet beskriver din applikations understøttelse af Google Pay API. Dette inkluderer de tilladte betalingsmetoder, transaktionsoplysninger (totalpris, valuta, landekode) og merchant-information (merchant-navn og ID).

function getGooglePaymentDataRequest() { const paymentDataRequest = Object.assign({}, baseRequest); paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod]; paymentDataRequest.transactionInfo = { totalPriceStatus: 'FINAL', totalPrice: '123.45', currencyCode: 'USD', countryCode: 'US' }; paymentDataRequest.merchantInfo = { merchantName: 'Example Merchant', merchantId: '12345678901234567890' // Erstat med dit faktiske merchant ID }; return paymentDataRequest; } 

For transaktioner i Det Europæiske Økonomiske Samarbejdsområde (EØS) eller andre lande, der er omfattet af Strong Customer Authentication (SCA), skal du inkludere countryCode, totalPrice og merchantName for at opfylde SCA-kravene.

Trin 8: Registrer en hændelseslytter for brugerhandlinger

Når brugeren klikker på Google Pay-knappen, skal du registrere en hændelseslytter, der kalder loadPaymentData(). Dette åbner Google Pay-betalingsarket. Efter brugerens godkendelse modtager din applikation betalingsdata, herunder en betalingstoken, som du skal videresende til din gateway.

function onGooglePaymentButtonClicked() { const paymentDataRequest = getGooglePaymentDataRequest(); const paymentsClient = getGooglePaymentsClient(); paymentsClient.loadPaymentData(paymentDataRequest) .then(function(paymentData) { processPayment(paymentData); }) .catch(function(err) { console.error(err); }); } function processPayment(paymentData) { // Send paymentToken til din gateway const paymentToken = paymentData.paymentMethodData.tokenizationData.token; console.log(paymentToken); // ... resten af din betalingsbehandling ... } 

Trin 9 (Valgfrit): Opsætning af autoriseringsbetalinger

Med Authorize Payments kan du starte betalingsprocessen og bekræfte betalingens godkendelsesstatus. Dette gøres ved at registrere en onPaymentAuthorized() callback i PaymentOptions og kalde loadPaymentData() med PAYMENT_AUTHORIZATION callback-intent.

// ... i getGooglePaymentsClient() ... paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST', paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized } }); function onPaymentAuthorized(paymentData) { return new Promise(function(resolve, reject) { // Behandl betalingen her processPayment(paymentData) .then(function() { resolve({transactionState: 'SUCCESS'}); }) .catch(function() { resolve({transactionState: 'ERROR'}); }); }); } 

Du skal løse den promise, der returneres af onPaymentAuthorized(), inden for 30 sekunder for at undgå timeouts.

Trin 10 (Valgfrit): Dynamiske prisopdateringer

Dynamiske prisopdateringer giver dig mulighed for at opdatere forsendelsesmuligheder og transaktionsoplysninger baseret på den valgte forsendelsesadresse eller forsendelsesmulighed. Dette kræver registrering af både onPaymentAuthorized og onPaymentDataChanged callbacks.

// ... i getGooglePaymentsClient() ... paymentsClient = new google.payments.api.PaymentsClient({ environment: "TEST", paymentDataCallbacks: { onPaymentAuthorized: onPaymentAuthorized, onPaymentDataChanged: onPaymentDataChanged } }); function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let paymentDataRequestUpdate = {}; // Logik til at opdatere forsendelsesmuligheder og transaktionsoplysninger resolve(paymentDataRequestUpdate); }); } 

Trin 11 (Valgfrit): Opsætning af kampagnekoder

Med kampagnekoder kan du dynamisk opdatere transaktionsoplysninger baseret på en angivet kampagnekode. Dette involverer også onPaymentDataChanged callback, men med fokus på OFFER callback-intent.

// ... i getGooglePaymentsClient() ... paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST', paymentDataCallbacks: { onPaymentDataChanged: onPaymentDataChanged } }); function onPaymentDataChanged(intermediatePaymentData) { return new Promise(function(resolve, reject) { let paymentDataRequestUpdate = {}; // Logik til at validere og anvende kampagnekoder resolve(paymentDataRequestUpdate); }); } 

Sammenfatning

Ved at følge disse trin kan du succesfuldt integrere Google Pay API i din webapplikation og tilbyde dine kunder en hurtig, nem og sikker måde at foretage betalinger på. Husk altid at teste din integration grundigt i et TEST-miljø, før du går live, og konsulter altid den officielle Google Pay API-dokumentation for de seneste oplysninger og bedste praksisser.

Ofte stillede spørgsmål

Hvilke betalingsmetoder understøtter Google Pay?

Google Pay understøtter i øjeblikket primært kredit- og betalingskort. Det kan også håndtere andre betalingsmetoder afhængigt af din integration og din betalingsgateway.

Hvad er forskellen på PAN_ONLY og CRYPTOGRAM_3DS?

PAN_ONLY returnerer kortnummeret (Primary Account Number), mens CRYPTOGRAM_3DS returnerer en tokeniseret kryptogram, der er godkendt med 3-D Secure. CRYPTOGRAM_3DS anses generelt for at være mere sikker.

Hvornår skal jeg bruge TEST-miljøet?

TEST-miljøet er ideelt til indledende udvikling og test. Det bruger dummy-data og tillader dig at verificere din integrations struktur uden at foretage rigtige transaktioner.

Hvordan håndterer jeg betalingsfejl?

Du bør implementere fejlhåndtering i dine callbacks (f.eks. onPaymentAuthorized og onPaymentDataChanged) for at give brugeren meningsfuld feedback og mulighed for at rette fejlen.

Hvis du vil læse andre artikler, der ligner Integrer Google Pay i din webapp, kan du besøge kategorien Teknologi.