JavaScript Library Gebeurtenissen bijhouden

Voor een optimale gebruikerservaring biedt JavaScript Library mogelijkheden voor event-detectie. Met deze mogelijkheden kun je verschillende stadia van het betalingsproces volgen, waaronder de initialisatie en voltooiing van de betaling. In dit artikel bespreken we de gebeurtenissen die kunnen worden gevolgd tijdens een standaardkaartbetaling en voor transacties die worden uitgevoerd met Apple Pay en Google Pay.

 

Hoe het werkt

Begin met het maken van een instantie van SecureTradingzoals uitgelegd in onze Bibliotheekconfiguratie artikel. Hier is een voorbeeld:

<script>
(function() {
var st = SecureTrading({
jwt,
});
st.Components(); <!-- Card Payment -->
})();
</script>

 

Door de st.on() functie kun je een eventName als eerste argument om de gebeurtenis aan te geven die moet worden vastgelegd. De st.on() De functie ondersteunt de volgende gebeurtenissen, die kunnen worden gebruikt voor elke betaalmethode die je klant kiest:

eventName

 Beschrijving

paymentPreCheck Wordt aangeroepen nadat op de betaalknop is geklikt, maar voordat de betaling wordt gestart.
paymentInitStarted Wordt aangeroepen wanneer de initialisatie van de betaling is gestart.
paymentInitCompleted Wordt aangeroepen wanneer de initialisatie van de betaling met succes is voltooid.
paymentInitFailed Wordt aangeroepen als er een fout is opgetreden bij de initialisatie van de betaling.
paymentStarted Wordt aangeroepen wanneer het betalingsproces is gestart.
paymentCompleted Wordt aangeroepen wanneer de betaling de gateway heeft bereikt.
paymentFailed Wordt aangeroepen als de betaling mislukt is.
paymentCanceled Wordt aangeroepen als de gebruiker de betaling heeft geannuleerd voordat deze de gateway heeft bereikt.
  De eventName waarden zijn hoofdlettergevoelig.
  Meervoudig st.on() oproepen op dezelfde eventName worden niet ondersteund. De meest recente st.on() oproep zal de enige zijn die wordt gebruikt, d.w.z. st.on("paymentPreCheck") mag niet meer dan één keer worden aangeroepen per bibliotheekinstelling.

Hier is een voorbeeld van hoe je kunt controleren of de initialisatie van de betaling is voltooid en of de gekozen betaalmethode Apple Pay is:

st.on('paymentInitCompleted', (data) => {
if (data.name === 'ApplePay') {
<!-- Apple Pay initialized successfully -->
}
});

De data object in de event callback bevat de name eigenschap, die kan worden gebruikt om de geselecteerde betalingsmethode te verifiëren. De momenteel ondersteunde name waarden zijn:

  • ApplePay
  • GooglePay
  • CARD

 

De paymentPreCheck evenement en disabledAutoPaymentStart

Standaard start de bibliotheek het betalingsproces automatisch wanneer je klant op de betaalknop heeft geklikt, maar je kunt ook de knop disabledAutoPaymentStart config-optie om dit gedrag op te heffen en te bepalen wanneer de betaling begint (Meer informatie hierover is te vinden in de Bibliotheekconfiguratie artikel). Wanneer disabledAutoPaymentStart is geactiveerd voor een Betalingstype, de paymentPreCheckDe gebeurtenisgegevens bevatten een nieuwe callback genaamd paymentStart() die, wanneer aangeroepen, het betalingsproces zal starten.

Als je bijvoorbeeld een Apple Pay transactie uitvoert, wil je misschien extra controles en processen uitvoeren voordat je het hoofdbetalingsproces start, zoals hieronder wordt weergegeven:

<script>
(function() {
var st = SecureTrading({
jwt,
disabledAutoPaymentStart: ['APPLEPAY'],
});
st.Components();
st.ApplePay();

st.on('paymentPreCheck', (data) => {
const paymentMethod = data.name;
const paymentStart = data.paymentStart;

if (paymentMethod === 'ApplePay') {
var isFormValid = validateForm();
if (isFormValid){
paymentStart();
} else {
<!-- Alert customer to input required fields -->
}
}
});
})();
</script>
Was dit artikel nuttig?
1 van 1 vond dit nuttig
Hebt u meer vragen? Dien een verzoek in