Migratie van st.js van versie 1 naar versie 3 voor Apple Pay -. Trust Payments

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

Klik hier voor meer informatie over de voordelen van een migratie naar JavaScript Library versie 3.

Procesoverzicht van versie 3

Dit artikel geeft instructies voor het migreren van uw JavaScript versie 1 Apple Pay integratie naar een van onze ondersteunde flows voor versie 3. Er zijn twee flows:

Standaardstroom - De bibliotheek vangt het portemonneetoken op en dient het in voor autorisatie bij het TRU Connect platform. Klik hier om naar de relevante sectie te gaan.
Alternatieve stroom - Voor handelaren die liever de Apple wallettoken gegevens en stuur een API-verzoek om de AUTH zelf te verwerken, de eigenschap merchantUrl moet worden ingesteld in de st.js st.ApplePay method config. Klik hier om naar de betreffende sectie te gaan.

Standaard stroommigratie

Samenvatting van de wijzigingen van versie 1 naar versie 3 (Apple Pay)

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:

Nieuw <div> voor het afhandelen van berichten aan de klant (d.w.z. fout- en succesberichten).
Nieuw formulier-id voor het betalingsformulier.
Nieuw <div> tag om aan te geven waar de knop Apple Pay moet worden weergegeven
Wijzig het URL-pad zodat naar de nieuwe bibliotheek wordt verwezen vanuit onze CDN
Betalingsgegevens worden opgenomen in een ondertekend JWT (JSON Web Token) dat door onze handelaren aan hun serverzijde wordt gegenereerd met behulp van een gedeeld geheim. Elke ongeoorloofde wijziging van de JWT maakt de handtekening ongeldig en het verzoek wordt afgewezen door Trust Payments.
Met de invoering van JSON Web Tokens vereist Apple Pay niet langer een hash voor de beveiliging van de site.

Vergelijking van opmaak voor versie 1 en versie 3

De volgende documentatie is een samenvatting van de veranderingen bij het migreren van uw Apple Pay configuratie van JavaScript Library versie 1 naar versie 3, en u kunt dit volgen voor een basisintroductie.

U kunt ook hier klikken voor de volledige documentatie van de versie 3-oplossing.

Door een enkele instantie van de st.js v3 aan te maken, kunt u de methode st.ApplePay(), die wordt gebruikt om de knop Apple Pay weer te geven en het betalingsformulier te presenteren.

<html>
<head>
</head>
<body>
<div id="st-message"></div>
<form id="st-payment" action="https://www.example.com">
<div class="st-applepay-button"></div>
</form>
<script src="https://webservices.securetrading.net/js/st.js"></script>
<script>
new SecureTrading.ApplePay({
sitereference: "test_site12345",
paymentRequest:{
"total":{
"label":"Pay now",
"amount":"2.00"
},
"countryCode":"GB",
"currencyCode":"GBP",
"merchantCapabilities":["supports3DS", "supportsCredit", "supportsDebit"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress", "name", "phone", "email"],
supportedNetworks:["visa", "masterCard"]
},
"merchantId":"your.merchant.id",
"sitesecurity":"gABC123DEFABC"
});
</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-apple-pay"></div>
</form>
<script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
<script> 
(function() {
var st = SecureTrading({ 
jwt: 'INSERT YOUR JWT HERE',
submitOnSuccess:true,
submitOnError:false,
submitOnCancel:false, <!--Set true if you want to redirect on ApplePay wallet screen cancellations (3DS ACS cancel is N/A)-->
submitCallback: myCallback,
livestatus: 0 or 1 <!--defaults to 0 (testing) and should be set to 1 when live(production)-->
}); 
st.ApplePay({
  buttonStyle: 'white-outline',
  buttonText: 'pay',
  merchantId: 'your.merchant.id',
  paymentRequest: {
    countryCode: 'GB',
    currencyCode: 'GBP',
    merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
    supportedNetworks: ["visa","masterCard"],
    requiredBillingContactFields: ["postalAddress"],
    requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
    total: {
      label: 'Trust Payments Merchant',
      amount: '10.00'
    }
  },
  buttonPlacement: 'st-apple-pay'
});  
function myCallback(data) { <!--Perform task once payment request is completed -->};

})(); 
</script>
</body>
</html>

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>

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="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
</body>
</html>

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.

Een instantie van de bibliotheek aanmaken en configureren

Wanneer u JavaScript Library versie 3 gebruikt, wordt van u verwacht dat u een JWT (JSON Web Token) aan de instantie van de bibliotheek verstrekt. Het JWT payload zal de vereiste velden bevatten die nodig zijn om betalingen te verwerken.
De gegevens in het JWT zijn beschermd tegen wijziging door onbevoegde derden.
Klik hier om te leren hoe u het JWT kunt genereren.

Nadat u een instantie van de JavaScript Library hebt aangemaakt, kunt u een methode ApplePay aanroepen, waarbij u een configuratie moet doorgeven om de betaalknop en het betaalblad in te stellen.

Hier is een voorbeeld van een codefragment dat een JWT opneemt in de configuratie van de instantie en de betaalmethode ApplePay aanroept.

<html>
<body>
<script>
new SecureTrading.ApplePay({
<APPLE CONFIG>
});
</script>
</body>
</html>

<html>
<body>
<script> 
(function() {
var st = SecureTrading({ 
jwt: 'INSERT YOUR JWT HERE'
}); 
st.ApplePay({
<APPLE CONFIG>
}); 
})(); 
</script>
</body>
</html>

Alternatieve stromingsmigratie

Samenvatting van de wijzigingen van versie 1 naar versie 3 (Apple Pay)

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:

Nieuw <div> voor het afhandelen van berichten aan de klant (d.w.z. fout- en succesberichten).
Nieuw formulier-id voor het betalingsformulier.
Nieuw <div> tag om aan te geven waar de knop Apple Pay moet worden weergegeven
Wijzig het URL-pad zodat naar de nieuwe bibliotheek wordt verwezen vanuit onze CDN
Betalingsgegevens worden opgenomen in een ondertekend JWT (JSON Web Token) dat door onze handelaren aan hun serverzijde wordt gegenereerd met behulp van een gedeeld geheim. Elke ongeoorloofde wijziging van de JWT maakt de handtekening ongeldig en het verzoek wordt afgewezen door Trust Payments.
Met de invoering van JSON Web Tokens vereist Apple Pay niet langer een hash voor de beveiliging van de site.
De alternatieve stroom vereist een merchantUrl worden gespecificeerd in de st.ApplePay() configuratie.

Vergelijking van opmaak voor versie 1 en versie 3

U kunt ook hier klikken voor de volledige documentatie van de versie 3-oplossing.

Door een enkele instantie van de st.js v3 aan te maken, kunt u de methode st.ApplePay(), die wordt gebruikt om de knop Apple Pay weer te geven.

<html>
<head>
</head>
<body>
<div id="st-message"></div>
<form id="st-payment" action="https://www.example.com">
<div class="st-applepay-button"></div>
</form>
<script src="https://webservices.securetrading.net/js/st.js"></script>
<script>
new SecureTrading.ApplePay({
sitereference: "test_site12345",
paymentRequest:{
"total":{
"label":"Pay now",
"amount":"2.00"
},
"countryCode":"GB",
"currencyCode":"GBP",
"merchantCapabilities":["supports3DS", "supportsCredit", "supportsDebit"],
requiredBillingContactFields: ["postalAddress"],
requiredShippingContactFields: ["postalAddress", "name", "phone", "email"],
supportedNetworks:["visa", "masterCard"]
},
"merchantId":"your.merchant.id",
"sitesecurity":"gABC123DEFABC",
"merchantUrl":"<payment URL endpoint>"
});
</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-apple-pay"></div>
</form>
<script src="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
<script> 
(function() {
var st = SecureTrading({ 
jwt: 'INSERT YOUR JWT HERE',
submitOnSuccess:true,
submitOnError:false,
submitOnCancel:false, <!--Set true if you want to redirect on ApplePay wallet screen cancellations (3DS ACS cancel is N/A)-->
submitCallback: myCallback,
livestatus: 0 or 1 <!--defaults to 0 (testing) and should be set to 1 when live(production)-->
}); 
st.ApplePay({
  buttonStyle: 'white-outline',
  buttonText: 'pay',
  merchantId: 'your.merchant.id',
  paymentRequest: {
    countryCode: 'GB',
    currencyCode: 'GBP',
    merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
    supportedNetworks: ["visa","masterCard"],
    requiredBillingContactFields: ["postalAddress"],
    requiredShippingContactFields: ["postalAddress","name", "phone", "email"],
    total: {
      label: 'Trust Payments Merchant',
      amount: '10.00'
    }
  },
  buttonPlacement: 'st-apple-pay',
  merchantUrl:'<payment URL endpoint>'
});  
function myCallback(data) { <!--Perform task once payment request is completed -->};

})(); 
</script>
</body>
</html>

Berichten aan de klant afhandelen

<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>

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="https://cdn.eu.trustpayments.com/js/latest/st.js"></script>
</body>
</html>

Een instantie van de bibliotheek aanmaken en configureren

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

<html>
<body>
<script>
new SecureTrading.ApplePay({
<APPLE CONFIG>
});
</script>
</body>
</html>

<html>
<body>
<script> 
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE'
});
st.ApplePay({
<APPLE CONFIG>
});
})();
</script>
</body>
</html>

Migratie van st.js van versie 1 naar versie 3 voor Apple Pay

Meer lezen over dit onderwerp