Migratie van st.js van versie 1 naar versie 3 voor kaarttransacties

Wij hebben een nieuwe versie van de JavaScript Library geïntroduceerd, die wij st.js v3 noemen.

 

Procesoverzicht van versie 3

Wat ziet de klant tijdens de betaling?

  1. De klant gaat akkoord met een betaling bij het afrekenen.
  2. Als de klant zich inschrijft op 3-D Secure, verschijnt in de browser van de klant een overlay, waarin hem kan worden gevraagd een aantal basishandelingen te verrichten om zijn identiteit te verifiëren.

  Aanvullende gegevens over de betalingssessie en het apparaat van de klant worden gedeeld met de kaartuitgever, waardoor op risico gebaseerde beslissingen kunnen worden genomen zonder dat de klant altijd om aanvullende vormen van authenticatie hoeft te vragen. Het is dus mogelijk dat de klant niet verplicht is zich te authenticeren. In dat geval wordt de overlay niet weergegeven en wordt de autorisatie zonder interactie verwerkt.

Hierna volgt een voorbeeld van een overlay die de klant ter authentificatie kan worden getoond voordat een betaling wordt voltooid. Het uiterlijk van de overlay en de aard van de vereiste authenticatie worden bepaald door de uitgever van de kaart van de klant. Bijvoorbeeld:

  • Voer een code in die via SMS naar een mobiel nummer wordt gestuurd.
  • Biometrische beveiliging, zoals vingerafdruk / gezicht / stem herkenning.
  • Voer een pincode of wachtwoord in.

CP14-EN.png

  1. Na eventuele controles en verificatie door de kaartuitgever van de klant, wordt de overlay automatisch gesloten en de betaling verwerkt. Hierna zal de kassa een succesbericht aan de klant tonen.

Als de verificatie mislukt, zal uw kassa een foutmelding geven en de klant de mogelijkheid bieden om een nieuwe betaling met een andere kaart uit te voeren.

 

Achter de schermen

CQ2-NL.svg

 

  Samenvatting van de wijzigingen van versie 1 naar versie 3 (Kaartbetalingen)

De wijzigingen die nodig zijn om uw oplossing te upgraden van versie 1 naar versie 3 van de JavaScript Library kunnen als volgt worden samengevat:

  • Uw systeem hoeft niet langer betalingsverzoeken inclusief de cachetoken via onze Webservices API.
  • U moet neem contact op met ons Support Team om de volgende stappen uit te voeren:
    • Maak een nieuwe gebruiker aan met de rol "Webservices JWT".
    • Als u nog geen 3-D Secure versie 1 transacties verwerkt met Trust Payments, moet u ons Support Team vragen de nodige 3-D Secure versie 2 provider details toe te voegen op uw test en live sitereferenties.
    • Als u al transacties van versie 1 van 3-D Secure verwerkt met Trust Payments, met behulp van uw test en live sitereferenties: Om ervoor te zorgen dat uw bestaande oplossing blijft functioneren, raden wij u aan nieuwe sitereferenties te registreren met de nodige referenties om transacties te verwerken met 3-D Secure versie 2 (naast uw bestaande sitereferenties).
  • Uw systeem hoeft de browser van de klant niet langer om te leiden naar de ACS-server voor verificatie.
  • (Standaard is de v3 st.js geconfigureerd om bovenstaande stappen automatisch af te handelen)
  • Nieuw <div> voor het afhandelen van berichten aan de klant (d.w.z. fout- en succesberichten).
  • Nieuw formulier-id voor het betalingsformulier.
  • Nieuw <div> tags voor het invoeren van kaartgegevens op het formulier.
  • Nieuwe opmaak voor de verzendknop op het formulier.
  • Wijzig het URL-pad zodat naar de nieuwe bibliotheek wordt verwezen vanuit onze CDN
  • Betalingsgegevens zijn opgenomen in een ondertekend JWT (JSON Web Token) dat door onze handelaren op hun server wordt gegenereerd met behulp van een gedeeld geheim dat door Trust Payments wordt verstrekt. Elke ongeoorloofde wijziging van de JWT maakt de handtekening ongeldig en het verzoek wordt afgewezen door Trust Payments.

 

Vergelijking van opmaak voor versie 1 en versie 3

Door een enkele instantie van de st.js v3 aan te maken, kunt u de methode st.Components(), die wordt gebruikt om het kaartbetalingsformulier weer te geven.

Het configureren van de "st"-instantie zal de stroom van elke betalingsmethode beïnvloeden. Door bijvoorbeeld submitOnSuccess waar is, leidt dit de klant door naar de formulieractie url na voltooiing van een succesvolle kaartbetaling.

Bekijk de onderstaande voorbeelden om u te helpen bij de migratie van uw kaartoplossing.

Voor een meer diepgaande handleiding van alle configuratiemogelijkheden die onze st.js v3 bibliotheek te bieden heeft, zie dit artikel.

st.js v1 st.js v3
<html>

<head>
<style>
#st-payment input.st-error {
background-color: #ffc6c7;
border: 2px solid #ffb5b5;
}
#st-message .st-error {
background: #ffcdcd;
border: 2px solid #ffb5b5;
padding: 4px 4px 4px 28px !important;
}
</style>
</head>

<body>
<div id="st-message"></div>
<form id="st-payment" action="https://www.example.com">
Pan:
<input type="text" data-st-field="pan" autocomplete="off" /></br>
Expiry Month:
<input type="text" data-st-field="expirymonth" autocomplete="off" /></br>
Expiry Year:
<input type="text" data-st-field="expiryyear" autocomplete="off" /></br>
Security Code:
<input type="text" data-st-field="securitycode" autocomplete="off" /></br>
<input type="submit" name="mybtn" />
</form>
<script src="https://webservices.securetrading.net/js/st.js"></script>
<script>
new SecureTrading.Standard({
sitereference: "test_site12345", locale: "en_gb"
});
</script>
</body>
</html>

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

 

Berichten aan de klant afhandelen

Er is een nieuwe <div> voor het afhandelen van berichten aan de klant (d.w.z. fout- en succesberichten). U moet de oude mark-up die hieronder wordt getoond vervangen door de nieuwe mark-up in het tabblad versie 3.

st.js v1 st.js v3
<html>
<body>
<div id="st-message"></div>
</body>
</html>

 

Referentie nieuw formulier id

U moet het oude formulier id vervangen "st-payment" met "st-form", zoals hieronder getoond.

st.js v1 st.js v3
<html>
<body>
<form id="st-payment" action="https://www.example.com">
</form>
</body>
</html>

 

Veilig kaartgegevens invoeren

De <input> tags in het formulier zijn vervangen door <div> tags met verschillende id's voor elk kaartgegevensveld. Uw server rendert het betalingsformulier met unieke <div> tags, die elk een iframe bevatten, gehost door de Trust Payments servers, die een ander kaartinvoerveld bevat. U moet de oude mark-up die hieronder staat, vervangen door de nieuwe mark-up in het tabblad versie 3.

st.js v1 st.js v3
<html>
<body>
<form id="st-payment" action="https://www.example.com">
Pan:
<input type="text" data-st-field="pan" autocomplete="off" /></br>
Expiry Month:
<input type="text" data-st-field="expirymonth" autocomplete="off" /></br>
Expiry Year:
<input type="text" data-st-field="expiryyear" autocomplete="off" /></br>
Security Code:
<input type="text" data-st-field="securitycode" autocomplete="off" /></br>
</form>
</body>
</html>

 

Betaalknop

De betaalknop wordt nu weergegeven vanuit een <button> tag (in plaats van een <input> tag). In het tabblad versie 3 moet u de oude opmaak die hieronder staat, vervangen door de nieuwe opmaak.

st.js v1 st.js v3
<html>
<body>
<form id="st-payment" action="https://www.example.com">
<input type="submit" name="mybtn" />
</form>
</body>
</html>

 

Verwijs naar de nieuwe JavaScript Library

De versie 3 bibliotheek heeft een nieuwe URL om naar te verwijzen. De URL hangt af van het platform waarop u aanvragen verwerkt:

st.js v1 st.js v3
<html>
<body>
<script src="https://webservices.securetrading.net/js/st.js"></script>
</body>
</html>

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

  Wanneer u overgaat op het gebruik van de Content Delivery Network (CDN) in plaats van webservices 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.

 

Andere gegevens verwerken

Om versie 3 te gebruiken, moet u bepaalde gegevens in een JWT (JSON Web Token) indienen.
Gegevens in het JWT kunnen niet door onbevoegde derden worden gewijzigd.
Klik hier om te leren hoe u het JWT kunt genereren.

Hier is een voorbeeld van een codefragment dat een JWT bevat:

st.js v1 st.js v3
<html>
<body>
<script>
new SecureTrading.Standard({
sitereference: "test_site12345", locale: "en_gb"
});
</script>
</body>
</html>

Optioneel kunnen gegevens die de klant naar verwachting zal wijzigen bij het afrekenen, nadat het formulier in zijn browser is weergegeven (bv. zijn factuurnamen), worden opgenomen in de mark-up met behulp van <input> tags zoals in onderstaand voorbeeld.

Belangrijk: Om ervoor te zorgen dat deze velden veilig naar de Trust Payments servers worden gepost, moet u het attribuut data-st-name met de veldnaam waarnaar de gegevens in ons systeem verwijzen. U kunt informatie vinden over velden die kunnen worden ingediend bij het verwerken van betalingen op deze pagina.

st.js v1 st.js v3
<html>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
<input type="text" name="title" data-st-field="billingprefixname">Mr</input>
<input type="text" name="forename" data-st-field="billingfirstname">Joe</input>
<input type="text" name="surname" data-st-field="billinglastname">Bloggs</input>
</body>
</html>

 

Test uw oplossing

Het is noodzakelijk dat u deze wijzigingen test met behulp van een test site referentie voordat u live betalingen verwerkt.
Klik hier voor betalingsgegevens die u kunt gebruiken om verschillende reacties van ons systeem te simuleren.

Was dit artikel nuttig?
0 van de 0 vonden dit nuttig
Hebt u meer vragen? Dien een verzoek in