我正在构建一个自定义的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