1. TRU Connect   
  2. ...
  3. Toevoegingen
  4. Google Pay

Aan de slag met Google Pay voor JavaScript Library

​  Laatst bijgewerkt: 

 

Trust Payments host een openbaar toegankelijke JavaScript Library die u kunt opnemen in uw kassa om uw web-app-oplossing betalingen te laten accepteren met Google Pay.

Om uw integratie te beginnen moet u de volgende gegevens bevestigen/opvragen bij ons Support Team:

  • Controleer of uw acquiring bank Google Pay ondersteunt als betalingsoptie.
  • Vraag een test en live site referentie aan, met Google Pay toegevoegd als ingeschakelde functie en schakel 3-D Secure in voor zowel test- als liveaccounts.
  • Vraag een JWT gebruikersnaam & geheime sleutel gekoppeld aan uw test site referentie.

 

Uw Google-account instellen om te testen

Om te beginnen met het testen van Google Pay in een testomgeving, hebt u een Google-account nodig en moet u lid worden van een groep die Google ter beschikking stelt en waarmee u een set API-testkaarten kunt gebruiken voor het testen van uw Google Pay -oplossing.

   Klik hier voor meer informatie over de testkaartensuite van Google (link naar externe site).

  1. Zodra u een Google-account hebt geregistreerd, meldt u zich aan bij het account in uw browser en navigeert u naar de volgende pagina:
      https://groups.google.com/g/googlepay-test-mode-stub-data

  2. Klik dan op "Lid worden van groep".

    CP44-NL.png

  3. Zodra u uw voorkeuren hebt ingesteld, klikt u op "Lid worden van groep".

    CP45-EN.png

  4. U krijgt een pagina te zien die bevestigt dat u toegang hebt gekregen tot de Google-testsuite:

    CP46-NL.png

  5. Om te controleren of dit werkt, biedt Google een demopagina waarop je op een knop Google Pay kunt klikken om het betalingsformulier te bekijken.
    Klik hier om dit in een nieuw tabblad te openen (link naar externe site).

    Als alles werkt zoals verwacht, kunt u een van de voorbeeldbetalingsmethoden selecteren en op "VERDER" klikken. Dit zal een testbetaling verwerken.

    CP47-NL.png

 

Uw betalingskassa configureren

  Zorg ervoor dat je alle bovenstaande stappen hebt uitgevoerd voordat je verder gaat.

  1. Neem een link naar onze v3 JS library op in uw webpagina <script src=<DOMAIN>/js/v3/st.js></script>
    Voor <DOMAIN>raadpleeg dan de informatie onder het kopje JavaScript Library / Webservices API op deze pagina.

  2. Om de knop Google Pay op het scherm te laten verschijnen bij het initialiseren, moet je een div opnemen in je html-bron met een id die wordt geconfigureerd in de volgende stappen van deze handleiding <div id="st-google-pay"></div>

  3. De st.js library vereist een formulier met het volgende id. <form id="st-form"/> - De naam van het id kan worden gewijzigd door de eigenschap stform in de SecureTrading config.

  4. Het meldingskader is een optionele div die aan uw pagina kan worden toegevoegd om een succes-, fout- of annuleringsbericht aan de klant te tonen als de betaling is voltooid. Als u de melding nuttig vindt, kunt u de tekst misschien aanpassen. Dit kan met behulp van de translations eigenschap ingesteld in de SecureTrading config. Klik hier voor meer informatie.

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          <! -- st.js configuration -->       
        });  
        st.GooglePay({
          <! -- Google Pay configuration -->
        });
      })(); 
    </script>
  </body>
</html>

Vervang <CDN_DOMAIN> met een ondersteund domein. Klik hier voor een volledige lijst.

 

Initialiseer st.js library

Bij het initialiseren van de st.js library moet u de eigenschap jwt, met een JSON Web Token gegenereerd op uw server.

  JSON Web Tokens (JWT) zijn een open, industriestandaard RFC 7519 methode voor het veilig verzenden van gegevens tussen twee partijen. Het beschermt tegen de wijziging van kritieke transactiegegevens (bijv. het af te schrijven bedrag) door onbevoegde partijen tijdens de betaalsessie.

Als u nog geen JWT-gebruikersnaam en geheime sleutel hebt ontvangen, zoals beschreven in de sectie 'Aan de slag', neem dan contact op met ons Support Team.

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          jwt : 'INSERT YOUR JWT HERE'      
        });  
        st.GooglePay({
          <! -- Google Pay configuration -->
        });
      })(); 
    </script>
  </body>
</html>

Vervang <CDN_DOMAIN> met een ondersteund domein. Klik hier voor een volledige lijst.

 

De JSON Web Token (JWT) configureren

Je moet onze JSON Web Token richtlijnen raadplegen om de vereiste inhoud voor het JWT te bevestigen.

  Klik hier om info in een nieuw tabblad te openen

 

initialiseren Google Pay

Het volgende voorbeeld toont een basisconfiguratie op Google Pay die de vereiste velden bevat.

  Hoewel het onderstaande voorbeeld bevat wat je nodig hebt om aan de slag te gaan, kun je de Google Pay checkout aanpassen aan je behoeften met optionele velden. Voor een volledige lijst van eigenschappen die worden geleverd door Google Pay, ga je naar hun API-documentatie: 
st.GooglePay({
  "buttonOptions": {
    "buttonRootNode": "st-google-pay"
  },
  "paymentRequest": {
    "allowedPaymentMethods": [{
      "parameters": {
        "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
        "allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
      },
      "tokenizationSpecification": {
        "parameters": {
          "gateway": "trustpayments",
          "gatewayMerchantId": "test_site12345"
        },
        "type": "PAYMENT_GATEWAY"
      },
      "type": "CARD"
    }],
    "environment":"TEST",
    "apiVersion": 2,
    "apiVersionMinor": 0,
    "merchantInfo": {
      "merchantId": "<e.g. 1234567890>"
    },
    "transactionInfo": {
      "countryCode": "US",
      "currencyCode": "USD",
      "checkoutOption": "COMPLETE_IMMEDIATE_PURCHASE",
      "totalPriceStatus": "FINAL",
      "totalPrice": "10.00",
      "displayItems": [{
        "label": "Example item",
        "price": "10.00",
        "type": "LINE_ITEM",
        "status": "FINAL"
      }]
    }
  }
});

  Hieronder volgen aanvullende overwegingen die specifiek zijn voor uw Trust Payments account:

  Eigendom Formaat Beschrijving
X1-EN.png allowedCardNetworks Lijst

De ondersteunde waarden voor deze eigenschap zijn afhankelijk van de betaalmethoden die worden ondersteund op uw Trust Payments account.

Neem contact op met ons Support Team om dit te bevestigen.
X1-EN.png gatewayMerchantId String

De Trust Payments site referentie geconfigureerd in de Google Pay manager instance fungeert als je gateway merchant Id.

Wanneer u klaar bent om naar de PRODUCTIE-omgeving te gaan, wordt de gatewayMerchantId moet worden ingesteld op uw live site referentie.
X1-EN.png gateway String

Stel in uw configuratie de eigenschap in met waarde “trustpayments”.

 

Een betaling verwerken

Als je de bovenstaande stappen hebt uitgevoerd, zou de opmaak van je afrekenpagina moeten lijken op het volgende voorbeeld, waarmee je een Google Pay betaling kunt voltooien in de TEST-omgeving.

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          jwt: 'INSERT YOUR JWT HERE',          
        });  
        st.GooglePay({
          "buttonOptions": {
            "buttonRootNode": "st-google-pay"
          },
          "paymentRequest": {
            "allowedPaymentMethods": [{
              "parameters": {
                "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
                "allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
              },
              "tokenizationSpecification": {
                "parameters": {
                  "gateway": "trustpayments",
                  "gatewayMerchantId": "test_site12345"
                },
                "type": "PAYMENT_GATEWAY"
              },
              "type": "CARD"
            }],
            "environment":"TEST",
            "apiVersion": 2,
            "apiVersionMinor": 0,
            "merchantInfo": {
              "merchantId": "<e.g. 1234567890>"
            },
            "transactionInfo": {
              "countryCode": "US",
              "currencyCode": "USD",
              "checkoutOption": "COMPLETE_IMMEDIATE_PURCHASE",
              "totalPriceStatus": "FINAL",
              "totalPrice": "10.00",
              "displayItems": [{
                "label": "Example item",
                "price": "10.00",
                "type": "LINE_ITEM",
                "status": "FINAL"
              }]
            }
          }
        });
      })(); 
    </script>
  </body>
</html>

Vervang <CDN_DOMAIN> met een ondersteund domein. Klik hier voor een volledige lijst.

 

Dynamische prijsupdates

Optioneel kun je dynamisch:

  • Werk de transactiegegevens op het betalingsformulier bij op basis van de verzendoptie die je klant heeft gekozen.
  • Werk de verzendopties en transactiegegevens op het betalingsblad bij op basis van het door je klant gekozen verzendadres.

Om aan de slag te gaan met dynamische prijsupdates, moet je de configuratie die wordt doorgegeven aan de methode st.js GooglePay wijzigen door:

  • De callbackIntents.
  • Abonneren op onPaymentDataChanged callback om het betalingsformulier bij te werken wanneer de klant zijn verzendadres of verzendoptie wijzigt.
  • Abonneren op onPaymentAuthorized callback om te controleren of het geautoriseerde bedrag overeenkomt met het weergegeven en overeengekomen bedrag op het betalingsformulier Google Pay.
  Eigendom Formaat Beschrijving
X1-EN.png callbackIntents String[]
  • SHIPPING_ADDRESS - Ontvang een callback wanneer de klant het verzendadres wijzigt in het betalingsformulier.
  • SHIPPING_OPTION - Ontvang een callback wanneer de klant de verzendoptie wijzigt in het betalingsformulier.
  • PAYMENT_AUTHORIZATION - Ontvang een terugbelbericht zodra de klant op "Betalen" klikt.
  • OFFER - Ontvang een terugbelbericht zodra de klant probeert een kortingscode toe te passen.

De PAYMENT_AUTHORIZATION moet worden opgenomen wanneer SHIPPING_ADDRESS of SHIPPING_OPTION in de lijst met intenties staat.
X2-EN.png shippingOptionRequired Booleaanse

Moet worden ingesteld op true wanneer SHIPPING_OPTION is ingesteld in de callbackIntents.
X2-EN.png shippingAddressRequired Booleaanse

Moet worden ingesteld op true wanneer SHIPPING_ADDRESS is ingesteld in de callbackIntents.
functie

De onPaymentDataChanged callback wordt aangeroepen wanneer:

  • callbackIntents omvat SHIPPING_ADDRESS en de klant zijn adres wijzigt.
  • callbackIntents omvat SHIPPING_OPTION en de klant zijn verzendoptie wijzigt.
  • callbackIntents omvat SHIPPING_ADDRESS en/of SHIPPING_OPTION wanneer de klant voor het eerst het betalingsformulier krijgt.
  • callbackIntents omvat OFFER en de klant past een promotiecode toe op het betalingsformulier.
  • Wanneer het betalingsblad wordt geïnitialiseerd.

onPaymentDataChanged retourneert een object genaamd intermediatePaymentData. De intermediatePaymentData object omvat welk adres en welke verzendoptie de klant heeft gekozen.

Let op: Wanneer het betalingsblad wordt geïnitialiseerd, wordt de INITIALIZE intentie wordt automatisch verzonden in de intermediatePaymentData en hiermee kun je het verzendadres van de klant en de beschikbare verzendopties onmiddellijk valideren en indien nodig het blad bijwerken.

oplossen onPaymentDataChanged met een object (  PaymentDataRequestUpdate (externe link)) dat de nieuwe transactie-informatie bevat die aan de klant moet worden getoond op het betalingsformulier Google Pay. Een voorbeeld is wanneer de klant een optie voor expresverzending selecteert en het totaalbedrag moet worden bijgewerkt op het betalingsblad om deze keuze weer te geven.

Wanneer er een fout optreedt, wordt de   PaymentDataRequestUpdate (externe link) object kan worden geconfigureerd met een fouteigenschap waarmee je de klant op de hoogte kunt stellen van de foutreden op het betalingsformulier, bijv. het verzendadres van de klant is mogelijk niet bruikbaar of de toegepaste promotiecode is verlopen.

error: {
  reason: "OFFER INVALID",
  message: "Promotional code has expired.",
  intent: "OFFER"
}

Raadpleeg   Google's documentatie (externe link) voor alle update-eigenschappen die kunnen worden toegevoegd aan de PaymentDataRequestUpdate object.

Voor een volledige referentiegids voor de onPaymentDataChanged callback,   Bekijk de documentatie van Google (externe link).
X1-EN.png onPaymentAuthorized functie

Wanneer callbackIntents omvat PAYMENT_AUTHORIZATION en de klant op "Betalen" klikt in het betalingsblad Google Pay , wordt de onPaymentAuthorized callback wordt aangeroepen en je moet een belofte retourneren die succesvol zal oplossen en de betalingsfiche zal sluiten, of zal oplossen met een fout en een foutbericht zal weergeven op de betalingsfiche.

De transactionState moet "SUCCESS" of "ERROR":

SUCCESS

  • Maak een nieuw JWT aan op je server om het eindbedrag op te nemen dat de klant heeft toegezegd te betalen op het betalingsformulier.
  • Werk het JWT bij door de updateJWT functie op de SecureTrading voorbeeld.

ERROR

  • Als er een fout optreedt tijdens het aanmaken of bijwerken van de JWT, zorg er dan voor dat u deze oplost met een "ERROR" om ervoor te zorgen dat alleen het juiste bedrag wordt geautoriseerd.
  • De "error" eigenschap met de "message" is optioneel, maar wordt aanbevolen.
function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject){
    /*Generate a newJWT with the final amount
    to pay final amount must match the displayed
    amount on the payment sheet call
    st.updateJWT(newJWT) to ensure the correct
    amount is authorised resolve with SUCCESS to
    trigger a closure of the payment sheet and
    for the payment authorisation to proceed*/

    resolve({transactionState: 'SUCCESS'});

    /*If an issue occurs when updating the JWT 
    return an error to the payment sheet to
    notify the customer*/

    resolve({
      transactionState: 'ERROR',
      error: {
        message: 'An error occurred, please try again.'
      }
    });
  });
}

De callback-implementaties voor onPaymentDataChanged (externe link) en onPaymentAuthorized (externe link) zijn in overeenstemming met de contracten die door Google zijn opgesteld, zoals beschreven in hun officiële documentatie. Hoewel de technische aspecten van deze callbacks consistent blijven, houdt de richtlijn van Google geen rekening met aangepaste integraties via gateways van derden. Houd dit onderscheid in gedachten bij het raadplegen van externe documentatie.

 

Voorbeeld van dynamische prijsupdate

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          jwt: 'INSERT YOUR JWT HERE',          
        });  
        st.GooglePay({
          "buttonOptions": {
            "buttonRootNode": "st-google-pay"
          },
          "paymentRequest": {
            "allowedPaymentMethods": [{
              "parameters": {
                "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
                "allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
              },
              "tokenizationSpecification": {
                "parameters": {
                  "gateway": "trustpayments",
                  "gatewayMerchantId": "test_site12345"
                },
                "type": "PAYMENT_GATEWAY"
              },
              "type": "CARD"
            }],
            "environment":"TEST",
            "apiVersion": 2,
            "apiVersionMinor": 0,
            "merchantInfo": {
              "merchantId": "<e.g. 1234567890>"
            },
            "transactionInfo": {
              "countryCode": "US",
              "currencyCode": "USD",
              "checkoutOption": "COMPLETE_IMMEDIATE_PURCHASE",
              "totalPriceStatus": "FINAL",
              "totalPrice": "10.00",
              "displayItems": [{
                "label": "Example item",
                "price": "10.00",
                "type": "LINE_ITEM",
                "status": "FINAL"
              }]
            }
          },
          "shippingAddressRequired": true,
          "shippingAddressParameters": {
            "phoneNumberRequired": true,
          },
          "shippingOptionParamaters": {
          {
            "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."
              }
            ]
          },
          "shippingOptionRequired": true,
          "callbackIntents": [
            "SHIPPING_ADDRESS",
            "SHIPPING_OPTION",
            "PAYMENT_AUTHORIZATION",
          ],
          "paymentDataCallbacks": {
            "onPaymentAuthorized": onPaymentAuthorized,
            "onPaymentDataChanged": onPaymentDataChanged
          },
        }
      }
   });
})();
    </script>
  </body>
</html>

Factureringsgegevens vastleggen van de klant Google Pay Wallet

Om de factureringsgegevens van de Google Pay Wallet van de klant vast te leggen en te gebruiken bij het verwerken van de betaling, zijn de volgende stappen vereist:

  1. In je ondertekende jwt payload moet je het veld billingcontactdetailsoverride met de waarde 1 opnemen.
  2. De billingAddressRequired moet worden ingesteld op waar in de configuratie van de GooglePay-methode.
  3. Om het e-mailadres optioneel vast te leggen, neemt u"emailRequired":true op in de paymentRequest.
  4. billingAddressParamaters biedt optionele eigenschappen die controle mogelijk maken over de hoeveelheid factureringsgegevens die de portemonnee van de klant nodig heeft voordat hij verder kan gaan met de betaling.
      Eigendom Formaat Beschrijving
    X2-EN.png format String

    Het formaat van het factuuradres is vereist om de transactie te voltooien.

    • MIN: Naam, landcode en postcode (standaard).

    • FULL: Naam, straatadres, plaats, regio, landcode en postcode.
    X2-EN.png phoneNumberRequired Booleaanse

    Ingesteld op waar als een telefoonnummer vereist is om de transactie te verwerken.

    		 
<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com"/>
    <div id="st-google-pay"></div>
    <script src="<CDN_DOMAIN>"></script>
    <script> 
      (function() {
        var st = SecureTrading({  
          jwt: 'INSERT YOUR JWT HERE',          
        });  
        st.GooglePay({
          "buttonOptions": {
            "buttonRootNode": "st-google-pay"
          },
          "paymentRequest": {

            "emailRequired":true,

            "allowedPaymentMethods": [{
              "parameters": {
                "allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
                "allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"],
                "billingAddressRequired":true,
                "billingAddressParamaters":{
                    "format":"FULL",
                    "phoneNumberRequired":true
                }
                ...

 
Was dit artikel nuttig?
0 van de 0 vonden dit nuttig
Avatar
Michael Buckley

 

Meer lezen over dit onderwerp