1. TRU Connect   
  2. JavaScript Library

1️⃣ De bibliotheek configureren

​  Laatst bijgewerkt: 

 

Voordat u verder gaat, moet u ervoor zorgen dat u aan alle vereisten voldoet
Klik hier om deze informatie in een nieuw tabblad te openen

 

Uw betalingsformulier bijwerken

U moet uw server-side betalingsformulier bijwerken om onze "st.js" JavaScript Library op te nemen (zoals in het onderstaande voorbeeld). De JavaScript Library zal verzoeken verwerken en de geretourneerde antwoorden afhandelen.

  Zorg ervoor dat uw systeem verwijst naar de st.js library op de Trust Payments servers. Dit zorgt ervoor dat uw oplossing altijd de laatste versie van de bibliotheek gebruikt.

  Wanneer de klant zijn betalingsgegevens in het betalingsformulier invoert en verzendt, neemt onze st.js contact op met de kaartuitgever om te bepalen of de kaart is geregistreerd. Als de kaartuitgever bepaalt dat er een verhoogd frauderisico is, krijgt de klant automatisch een overlay te zien waarin om verificatie wordt gevraagd.

Om dit gedrag mogelijk te maken, moet u verwijzen naar de JavaScript Library door een gedefinieerde configuratie op te nemen die een specifieke methode ("st.Components") binnen "st.js".

Opmerking: Zorg ervoor dat u de anonieme functie opneemt zoals in het voorbeeld. Dit voorkomt dat de JS wordt uitgevoerd totdat de st.js is geladen.

Dit basisvoorbeeld toont een eenvoudige kassa die de klant om zijn kaartgegevens vraagt, en een betaling verwerkt:

<html>
  <head>
  </head>
  <body>
    <div id="st-notification-frame"></div>
    <form id="st-form" action="https://www.example.com" method="POST">
      <div id="st-card-number"></div>
      <div id="st-expiration-date"></div>
      <div id="st-security-code"></div>
      <button type="submit">Pay securely</button>
    </form>
    <script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
    <script>
      (function() {
        var st = SecureTrading({
          jwt : 'We explain how to construct this on the next page'
        });
        st.Components();
    })();
    </script>
  </body>
</html>

De JavaScript Library is een beheerde dienst die regelmatig wordt bijgewerkt om nieuwe functies toe te voegen en bestaande functionaliteit te verbeteren. Daarom moet de JavaScript Library voor elk betalingsverzoek worden opgehaald van https://cdn.eu.trustpayments.com/js/latest/st.js. Als u dit niet doet, kan uw integratie mogelijk niet correct werken en kunnen betalingsverzoeken mislukken.

  Wanneer u de Content Delivery Network (CDN) gebruikt om te verwijzen naar de st.js library, wees u er dan van bewust dat de CDN verzoeken van uw localhost/127.0.0.1 omgeving zal blokkeren. Om uw applicatie lokaal te testen met CDN, moet u uw testapplicatie draaien met uw IPv4 adres in plaats van localhost. Na het uitvoeren van een lookup van uw IPv4-adres, moet u localhost in uw browser vervangen door het opgehaalde IP-adres.

 

st-notification-frame Optioneel A <div> tag met attribuut id=“st-notification-frame” kan in het formulier worden opgenomen om ongeldige veld- en verbindingsfouten aan de klant te tonen, zodat deze de betaling kan oplossen en opnieuw proberen.

Opmerking: Als u de bibliotheek niet gebruikt om de AUTH te verwerken, raden wij u aan om de st-notification-frame in uw formulier op te nemen, aangezien dit kan leiden tot tegenstrijdige bevestigingsberichten. De THREEDQUERY Authenticatierespons kan bijvoorbeeld succes opleveren, maar de daaropvolgende autorisatie kan worden geweigerd.

Klik hier voor meer informatie over het gebruik van de JavaScript Library om de 3-D Secure authenticatie te verwerken maar niet de AUTH.
st-form Verplicht U moet ervoor zorgen dat aan uw betalingsformulier de id "st-form" en een action attribuut dat een geldig URL-adres op uw server bevat. Het opgegeven adres moet de gegevens kunnen verwerken die in application/x-www-form-urlencoded formaat worden teruggestuurd (zie het voorbeeld hieronder). Klik hier voor een voorbeeld.
Payment divs Verplicht De volgende velden zijn verplicht in het betalingsformulier:
  • "st-card-number " - Het kaartnummer van de klant.
  • "st-expiration-date" - De vervaldatum van de kaart.
  • "st-security-code " - De beveiligingscode van de kaart.

U moet ervoor zorgen dat het kaartnummer, de vervaldatum en de veiligheidscode NIET gebruik een <input> tag, omdat dit ertoe kan leiden dat gevoelige gegevens rechtstreeks op uw server worden geplaatst.
st-animated-card Optioneel Dit wordt gebruikt om een afbeelding van een kaart weer te geven, die wordt bijgewerkt om in real time een voorbeeld van de kaart van de klant te tonen terwijl deze zijn gegevens invoert.

 

De bibliotheek initialiseren

U moet uw server-side betalingsformulier bijwerken om onze "st.js" JavaScript Library op te nemen. De JavaScript Library zal verzoeken verwerken en de geretourneerde antwoorden afhandelen. Wanneer de klant zijn betalingsgegevens in uw formulier invoert en verzendt, neemt onze st.js contact op met de kaartuitgever om te bepalen of de kaart is geregistreerd. Als de kaartuitgever bepaalt dat er een verhoogd frauderisico is, krijgt de klant automatisch een overlay te zien waarin om verificatie wordt gevraagd.

Om dit gedrag mogelijk te maken, moet u verwijzen naar de JavaScript Library door een gedefinieerde configuratie op te nemen die een specifieke methode gebruikt ("st.Components") binnen "st.js".

Opmerking: Zorg ervoor dat je de anonieme functie opneemt zoals in het voorbeeld. Dit voorkomt dat de JS wordt uitgevoerd totdat de st.js is geladen.

  Standaard richt onze 3-D Secure authenticatie zich op de sandbox-omgeving. Om deze instelling op te heffen en in plaats daarvan de productieomgeving aan te spreken, moet u ervoor zorgen dat uw betalingsformulier het volgende specificeert
livestatus: 1.

(function() {
  var st = SecureTrading({ 
    jwt: 'INSERT YOUR JWT HERE',
    livestatus: 1
  }); 
  st.Components(); 
})();

  Zodra de st.js library is geïnitialiseerd voor kaartbetalingen, heeft de klant maximaal 15 minuten om zijn betaalsessie te voltooien. Als hij zijn sessie niet binnen deze tijd voltooit, leidt dit tot een fout bij het ontbreken van een token.

 

Volledige specificatie van de bibliotheek

  Field Beschrijving
X3-EN.png animatedCard Door deze eigenschap in te stellen op true wordt een geanimeerde afbeelding van een kaart weergegeven op het formulier op basis van de plaats waar u de st-animated-card div (als deze div niet aanwezig is, wordt de kaart niet getoond). Standaard wordt de kaart niet weergegeven (ingesteld op false).
X3-EN.png buttonId

Standaard stelt het JavaScript de eerste knop in het DOM in als de betaalknop. Als u echter meerdere knoplabels op uw betalingsformulier hebt, kan de buttonId kan worden toegevoegd aan st.js configuratie om een specifieke knop te richten op het indienen van het verzoek.

<html>
  <body>
    <form id="st-form"
    action="https://www.example.com"
    method="POST">
      <div class="example-form__section">
        <div class="example-form__group">
          <button type="submit"
          class="example-form__button"
          id="abcd">this is the pay button</button>
        </div>
      </div>
    </form>
    <script> 
      (function() {
        var st = SecureTrading({ 
          buttonId: 'abcd',
        }); 
      })();
    </script>
  </body>
</html>
X3-EN.png componentIds

De standaard container-ID's voor st.Components zijn:

<div id="st-card-number"></div>
<div id="st-expiration-date"></div>
<div id="st-security-code"></div>
<div id="st-animated-card"></div>
<div id="st-notification-frame"></div>

Het is bijvoorbeeld mogelijk om de standaard ID voor elk onderdeel afzonderlijk te wijzigen:

componentIds: {
  animatedCard: "st-animate",
  cardNumber: "st-card",
  expirationDate: "st-expiry",
  notificationFrame: "st-notify",
  securityCode: "st-cvv"
}

Containers met aangepaste ID's:

<div id="st-card"></div>
<div id="st-expiry"></div>
<div id="st-cvv"></div>
<div id="st-notify"></div>
<div id="st-animate"></div>
X2-EN.png disabledAutoPaymentStart

disabledAutoPaymentStart kan worden ingesteld met een array van betaalmethode-namen.

De volledige lijst met ondersteunde namen is:
["APPLEPAY", "CARD", "GOOGLEPAY"]

Als de klant een betaalmethode uit de array selecteert, wordt het hoofdbetalingsproces uitgesteld, zodat er vooraf extra controles en processen kunnen worden uitgevoerd.

disabledAutoPaymentStart wordt gebruikt in combinatie met de paymentPreCheck event, waarmee de geselecteerde betaalmethode kan worden bepaald en die ook een callback geeft om de betaling te starten zodra je de extra stappen hebt voltooid.

Het volgende is een voorbeeld van hoe je kunt voorkomen dat GOOGLEPAY transacties onmiddellijk worden gestart nadat de klant op de betaalknop heeft geklikt, zodat er extra validatie kan worden uitgevoerd. Zodra dit is voltooid, kunt u de bibliotheek laten weten dat de betaling moet worden uitgevoerd door het volgende aan te roepen paymentStart();

<script>
(function() {
var st = SecureTrading({
  jwt,
  disabledAutoPaymentStart: ['GOOGLEPAY'],
});
st.Components();
st.GooglePay();
st.on('paymentPreCheck', (data) => {
  const {paymentMethod, paymentStart} = data;
  if (paymentMethod === 'GooglePay') {
    var validationPass = validateData();
    if (validationPass){
      paymentStart();
    } else {
      //Notify customer of issue
    }
  }
});
})();
</script>
  Het hoofdbetalingsproces wordt automatisch gestart als de klant een betaalmethode selecteert die niet wordt vermeld in de disabledAutoPaymentStart matrix.
  Klik hier voor meer informatie over de paymentPreCheck evenement en andere evenementopties.
X3-EN.png disableNotification Standaard toont het JavaScript een succes- of foutmelding bij het afrekenen na een betalingspoging. In gevallen waarin u uw klant na een transactie doorverwijst naar een andere pagina op uw website, kunt u er de voorkeur aan geven dit bericht volledig te verbergen voor een meer naadloze betaalervaring. Hiervoor moet u het volgende opnemen disableNotification met waarde true.

Opmerking: Als u een digitale portemonnee hebt geïmplementeerd (zoals Apple Pay of Visa Checkout), moet u er rekening mee houden dat dit ook eventuele annuleringsberichten verbergt die worden weergegeven door de JavaScript Library, in gevallen waarin de klant de overlay van de portemonnee sluit voordat de transactie is voltooid.
X3-EN.png errorReporting

Standaard is foutrapportage ingeschakeld op ST.js . Hiermee kunnen we je JavaScript Library integratie controleren op fouten die van invloed kunnen zijn op de betaalervaring van gebruikers tijdens hun betaalsessie. Dit wordt aanbevolen en is standaard ingeschakeld. Als je er echter de voorkeur aan geeft om de foutrapportage uit te schakelen, kun je dit doen door de eigenschap in te stellen op false, bijvoorbeeld:

errorReporting: false
X2-EN.png fieldsToSubmit

Als een terugkerende klant betaalt met een opgeslagen kaart, waarbij alleen de beveiligingscode moet worden vastgelegd, kun je de SecureTrading Configureren met:

fieldsToSubmit: ['securitycode']

Dit zorgt ervoor dat alleen de invoer van de beveiligingscode wordt weergegeven bij het aanroepen van st.Components.

Raadpleeg dit artikel voor meer informatie over het accepteren van betalingen met een opgeslagen kaart.
X2-EN.png formId

U kunt de standaard "st-form" ID naar wat het beste werkt voor jouw toepassing. Bijvoorbeeld:

formId: 'my-checkout-form'
X1-EN.png jwt

Een ondertekende JSON Web Token (JWT), gegenereerd op je server. Lees dit artikel om te leren hoe u uw JWT configureert
X2-EN.png livestatus Dit geeft aan of de 3-D Secure controles worden uitgevoerd op de testomgeving of op de productieomgeving. Er zijn twee mogelijke waarden die kunnen worden opgegeven - 0 en 1 - en deze worden als volgt beschreven:
  • 0 - 3-D Secure controles worden uitgevoerd met behulp van de testomgeving (standaard gedrag indien niet opgenomen in uw markup).
  • 1 - 3-D Secure controles worden uitgevoerd op deproductieomgeving (dit is vereist bij het verwerken van live betalingen, anders optioneel).
(function() {
  var st = SecureTrading({ 
    jwt: 'INSERT YOUR JWT HERE',
    livestatus: 0
  }); 
  st.Components(); 
})();
X3-EN.png panIcon U kunt aangeven dat het logo van het kaartmerk moet worden weergegeven in het kaartnummerveld wanneer de klant in het betalingsformulier typt. Daartoe moet u uw server-side checkout-formulier bijwerken met het volgende panIcon met waarde true.
X3-EN.png placeholders

Om de placeholder-tekst bij te werken die wordt weergegeven in de invoervelden voor kaartbetalingen, kun je de optie placeholders config. Elke placeholder kan afzonderlijk worden bijgewerkt. Als je bijvoorbeeld liever geen placeholder hebt in de kaartinvoer, stel deze dan in als een lege tekenreeks:

placeholders : {
  'pan':'',
  'expirydate':'Expiry date',
  'securitycode':'Security code'
}
X3-EN.png stopSubmitFormOnEnter

Geef dit veld een waarde true om te voorkomen dat de klant het formulier indient door op de return toets van zijn toetsenbord te drukken. In plaats daarvan zouden zij op de knop Verzenden klikken.

Dit kan nodig zijn als uw systeem afhankelijk is van de klant die op de knop "Betalen" klikt om updates op uw server uit te voeren.
X3-EN.png styles

U kunt de st.Components invoer met behulp van stijlen. Voor een volledig scala aan styles opties kunt u verwijzen naar het volgende artikel.

Het is mogelijk om de standaard ID voor elk onderdeel te wijzigen. Bijvoorbeeld:

styles: {
 'background-color-input': '#e71b5a',
 'font-size-label': '18px',
 'color-input': '#fff'
}
X3-EN.png submitCallback Als u een callback moet uitvoeren nadat de betalingssessie is beëindigd, kunt u het volgende opgeven submitCallback. Hier geeft u een functie door om een reeks acties uit te voeren. De browser van de klant krijgt een object terug met de naam data die het resultaat van het laatste gateway-verzoek bevat. U moet het antwoord JWT verifiëren voordat u de data teruggestuurd.
X3-EN.png submitFields Wanneer de klant een betaling probeert uit te voeren, en het formulier wordt verzonden naar de URL die is opgegeven in de action attribuut worden de volgende velden in een JWT opgenomen:
  • baseamount
  • currencyiso3a
  • eci
  • enrolled
  • errorcode
  • errordata
  • errormessage
  • orderreference
  • settlestatus
  • status
  • transactionreference

Als u echter liever uw eigen lijst van te posten velden specificeert, kunt u het veld submitFields in uw formulier opnemen. Bijvoorbeeld:

submitFields: ['errorcode', 'transactionreference']

U kunt extra velden opgeven die buiten de bovenstaande lijst vallen. Wij documenteren alle ondersteunde velden op deze pagina.
X3-EN.png submitOnCancel

Als de klant de transactie annuleert voordat deze is voltooid, blijft hij standaard op dezelfde pagina, zodat hij het opnieuw kan proberen met een andere betaalmethode.

Als u wilt dat de browser van de klant wordt omgeleid naar de URL die in de actie van het formulier is opgegeven wanneer de klant annuleert, kunt u het formulier aanpassen door het volgende op te nemen submitOnCancel: true.

Opmerking: Bij deze alternatieve configuratie verschijnt er geen foutmelding op het betalingsformulier vóór de browseromleiding.
X3-EN.png submitOnError Als er een fout optreedt, blijft de klant standaard op dezelfde pagina, zodat hij het probleem kan corrigeren en het opnieuw kan proberen. Eventuele foutmeldingen worden weergegeven in de st-notification-frame div. (U hoeft het formulier niet aan te passen, want submitOnError: false wordt automatisch ingediend)

Als u wilt dat de browser van de klant wordt omgeleid naar de URL die in de actie van het formulier is opgegeven wanneer er een fout optreedt, kunt u het formulier aanpassen door het volgende op te nemen submitOnError: true.

Opmerking: Bij deze alternatieve configuratie verschijnt er geen foutmelding op het betalingsformulier vóór de browseromleiding.
X3-EN.png submitOnSuccess Standaard wordt de browser van de klant doorgestuurd naar de URL die in de formulieractie is gespecificeerd wanneer een succesvolle betaling is voltooid. (submitOnSuccess: true is de standaardconfiguratie)

Opmerking: Bij deze standaardconfiguratie wordt geen succesbericht weergegeven op het betalingsformulier vóór de browseromleiding.

Als u liever hebt dat de browser van de klant op dezelfde pagina blijft, toont u een succesbericht in de st-notification-frame div kun je het formulier bijwerken met submitOnSuccess: false.
X3-EN.png translations

U kunt de translations eigenschap om aangepaste tekst op te geven voor tekst die wordt weergegeven op de st.Components validatie en labels. Je kunt het ook gebruiken om meldingen bij te werken die worden weergegeven in de meldingscontainer. 

translations:{
  'An error occurred': 'INSERT YOUR CUSTOM PHRASE HERE'
}

Bekijk dit artikel voor een volledige referentie.

  Als u een fout ontvangt in het antwoord op init die lijkt op het volgende:

{“ErrorNumber”:1010,”Message”:”Invalid Signature. Your request contains an invalid signature.”}

Controleer of uw livestatus configuratie correct is. Als u een test gebruikt site referentiezorg ervoor dat livestatus wordt ingediend als 0 (of laat dit veld helemaal weg) en als u een live site referentie gebruikt, zorg ervoor dat dit in plaats daarvan wordt ingediend als 1.

 

 

Uw vooruitgang

Met de bovenstaande informatie kun je beginnen met het bouwen van je betaaloplossing. Vervolgens raden we je aan om te leren hoe je een JSON Web Token (JWT) genereert. Deze worden gebruikt om te verifiëren dat de verzonden gegevens niet zijn gewijzigd tijdens de betaalsessie.

Ga verder met stap 2   

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

 

Meer lezen over dit onderwerp

Zie meer