JavaScript Library Ereignisverfolgung

Um eine optimale Benutzererfahrung zu gewährleisten, bietet die JavaScript Library Funktionen zur Ereigniserkennung. Mit diesen Funktionen können Sie verschiedene Phasen des Zahlungsprozesses verfolgen, einschließlich der Initialisierung und des Abschlusses der Zahlung. In diesem Artikel werden wir die Ereignisse besprechen, die während einer normalen Kartenzahlung sowie bei Transaktionen mit Apple Pay und Google Pay verfolgt werden können.

Wie es funktioniert

Beginnen Sie mit der Erstellung einer Instanz von SecureTradingwie in unserem Konfiguration der Bibliothek Artikel. Hier ist ein Beispiel:

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

Durch die Verwendung des st.on() Funktion, können Sie eine eventName als erstes Argument, um das zu erfassende Ereignis anzugeben. Die Adresse st.on() unterstützt die folgenden Ereignisse, die für jede von Ihrem Kunden gewählte Zahlungsmethode verwendet werden können:

Hier ein Beispiel, wie Sie überprüfen können, ob die Zahlungsinitialisierung abgeschlossen ist und ob die gewählte Zahlungsmethode Apple Pay ist:

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

Die data Objekt, das im Ereignis-Callback bereitgestellt wird, enthält die name die verwendet werden kann, um die ausgewählte Zahlungsmethode zu überprüfen. Die derzeit unterstützten name Werte sind:

• ApplePay
• GooglePay
• CARD

Die paymentPreCheck Veranstaltung und disabledAutoPaymentStart

Standardmäßig startet die Bibliothek den Bezahlvorgang automatisch, wenn Ihr Kunde auf die Schaltfläche "Bezahlen" geklickt hat, aber alternativ können Sie die disabledAutoPaymentStart um dieses Verhalten außer Kraft zu setzen und festzulegen, wann die Zahlung beginnt (Weitere Informationen hierzu finden Sie in der Konfiguration der Bibliothek Artikel). Wenn disabledAutoPaymentStart für eine Zahlungsart aktiviert ist, wird die paymentPreCheckDie Ereignisdaten enthalten einen neuen Callback namens paymentStart() die, wenn sie aufgerufen wird, den Hauptzahlungsvorgang startet.

Wenn Sie beispielsweise eine Apple Pay Transaktion durchführen, möchten Sie vielleicht zusätzliche Prüfungen und Prozesse durchführen, bevor Sie den Hauptzahlungsprozess starten, wie unten dargestellt:

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