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:

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>