datatrans-secureFields-integration.js

// WordPress

jQuery(document).ready(function ( $ ) {
    let payment = $('#your-button');

    // let secureFields = new SecureFields();
    let styles = {
        // your style goes here
        // Specific Style for Each Element
        cardNumber: "border: 1px solid #eaeaea; height: 40px; padding: 10px; " +
            "font-size: 18px; color: #818a91; background: #fafafa;",
        cvv: "border: 1px solid #eaeaea; height: 40px; padding: 10px; " +
            "font-size: 18px; color: #818a91; background: #fafafa;",
    };

     secureFields.init(datatrans.transactionId, {
         cardNumber: "cardNumberPlaceholder",
         cvv: "cvvPlaceholder",
     }, {
         styles: styles
     });

     secureFields.on("validate", function (data) {
          // something bad happened
          if (true == data.hasErrors) {
              $('.pe-datatrans-error').html('Please enter valid card information.');
          }
     });

    secureFields.on("success", function (data) {
        if (data.transactionId) {
            submitFormWithCoupon('no', data.cardInfo.brand, data.cardInfo.country);
        } else {
            $('.pe-datatrans-error').html(data);
        }
    });
  
    payment.on('click', '#go', function () {
       secureFields.submit({
            amount: 3000, // ask for the amount in your form
            expm: 12, // ask for the expm in your form
            expy: 21, // ask for the expy in your form
            currency: "EUR",
            returnUrl: 'https://domain.com/thank-you'  // 3D process return URL
       });
    });
  
});