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?
- De klant gaat akkoord met een betaling bij het afrekenen.
- 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.
- 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
Samenvatting van noodzakelijke veranderingen in ontwikkeling
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.
- Je moet contact opnemen met ons ondersteuningsteam om een nieuwe gebruiker aan te maken met de rol "Webservices JWT".
- Nieuw <div> voor het afhandelen van antwoordberichten (d.w.z. succes- en afwijzingsberichten).
- 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 worden opgenomen in een ondertekend JWT (JSON Web Token) gegenereerd door onze handelaren op hun server met behulp van een gedeeld geheim verstrekt door Trust Payments. Elke ongeautoriseerde wijziging aan 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.
<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>
<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="<CDN_DOMAIN>"></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
submitOnSuccess:true,
submitOnError:false,
submitCallback: myCallback,
livestatus: 0 or 1 <!--defaults to 0 (testing) and should be set to 1 when live(production)-->
});
st.Components();
function myCallback(data) { <!--Perform task once payment request is completed -->};
})();
</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.
<html>
<body>
<div id="st-message"></div>
</body>
</html>
<html>
<body>
<div id="st-notification-frame"></div>
</body>
</html>
Referentie nieuw formulier id
U moet het oude formulier id vervangen "st-payment" met "st-form", zoals hieronder getoond.
<html>
<body>
<form id="st-payment" action="https://www.example.com">
</form>
</body>
</html>
<html>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
</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.
<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>
<html>
<body>
<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>
</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.
<html>
<body>
<form id="st-payment" action="https://www.example.com">
<input type="submit" name="mybtn" />
</form>
</body>
</html>
<html>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
<button type="submit">Pay securely</button>
</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:
<html>
<body>
<script src="https://webservices.securetrading.net/js/st.js"></script>
</body>
</html>
<html>
<body>
<script src="<CDN_DOMAIN>"></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:
<html>
<body>
<script>
new SecureTrading.Standard({
sitereference: "test_site12345", locale: "en_gb"
});
</script>
</body>
</html>
<html>
<body>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE'
});
st.Components();
})();
</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.
<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>
<html>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
<input type="text" name="title" data-st-name="billingprefixname">Mr</input>
<input type="text" name="forename" data-st-name="billingfirstname">Joe</input>
<input type="text" name="surname" data-st-name="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.
