1

I'm building a custom woocommerce payment gateway and the following code is running on the woocommerce checkout page, and I'm trying to prevent the user from submitting the order till he writes his credit card details in the Tap payment gateway (card js) form.

if the user wrote his card details correctly a request will be sent to Tap to get a payment token and set it inside a hidden field that will be sent and processed on the server-side.

if the user wrote invalid card details I have to prevent him from submitting the order until he corrects his card details.

the problem I'm facing is I cannot get the result after Tap (card js) validates user inputs to make my condition to stop checkout_place_order event execution or continue with the valid data

is there is another way to stop woocommerce jQuery checkout_place_order event?


var tap = Tapjsli('pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'); //public API key
var elements = tap.elements({});
var style = {
    base: {
        color: '#535353',
        lineHeight: '18px',
        fontFamily: 'sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
            color: 'rgba(0, 0, 0, 0.26)',
            fontSize: '15px'
        }
    },
    invalid: {
        color: 'red'
    }
};

// input labels/placeholders
var labels = {
    cardNumber: "Card Number",
    expirationDate: "MM/YY",
    cvv: "CVV",
    cardHolder: "Card Holder Name"
};

//payment options
var paymentOptions = {
    currencyCode: ["SAR"],
    labels: labels,
    TextDirection: 'rtl'
}

//create element, pass style and payment options
var card = elements.create('card', {style: style}, paymentOptions);

(function ($) {
    $(document).one('updated_checkout', function () {
        card.mount('#element-container');//mount element
        //card change event listener
        card.addEventListener('change', function (event) {
            var displayError = $('#error-handler');
            if (event.error) {
                displayError.html(event.error.message);
            } else {
                displayError.html('');
            }
        });
    });

    function tapTokenHandler(token) {
        $('#tap-form-container').append('<input type="hidden" name="tapToken" id="tapToken" value="' + token.id + '">');
    }

    $('form.woocommerce-checkout').on('checkout_place_order', function (e) {
        tap.createToken(card).then(function (result) {
            // console.log(result);
            if (result.error) {
                console.log(result.error);
                // Inform the user if there was an error
                $('#error-handler').html(result.error.message);
                return false; //here I'm trying to stop the event
            }
            // Send the token to your server
            $('#success').css('display', 'block');
            $('#token').html(result.id);
            tapTokenHandler(token);
        });
    });

})(jQuery);



reference to card js docs here

0

Add this as a validation in the checkout

Something like this:

add_action( 'woocommerce_after_checkout_validation', 'my_validation', 9999, 2);

function my_validation( $fields, $errors ){

    if([your validation]){
        return;
    }else{
        $errors->add( 'stock', 'your error message' );
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.