如何根据API请求结果停止WooCommerce结账活动?

时间:2020-08-13 作者:Ahmad Wael

我正在构建一个自定义的woocommerce支付网关,以下代码正在woocommerce结账页面上运行,我试图阻止用户提交订单,直到他在Tap支付网关(card js)表单中写入信用卡详细信息。

如果用户正确写入了卡的详细信息,将向Tap发送请求,以获取支付令牌,并将其设置在隐藏字段中,该字段将在服务器端发送和处理。

如果用户写了无效的卡详细信息,我必须阻止他提交订单,直到他更正卡详细信息。

我面临的问题是,在Tap(card js)验证用户输入以使我的条件停止后,我无法获得结果checkout_place_order 事件执行或继续使用有效数据

有没有其他方法可以阻止woocommerce jQuerycheckout_place_order 事件


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



卡片js文档参考here

1 个回复
SO网友:drcrow

将此添加为签出中的验证

类似这样:

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\' );
    }
}

相关推荐

在WordPress插件开发中通过Vanilla JavaScript调用AJAX

我是WordPress插件开发的新手,我在主插件页面上有一些HTML表单,可以从登录的管理员那里获取数据,还有一个背面页面,我在PHP中有一些不同的功能,比如从数据库中获取信息等。要详细解释,这里是代码。。。Main Plugin File:<?php /* Plugin Name: WP Testing Plugin Plugin URI: http://www.wordpress.org/WP-Testing-Plugin Description: A Detai