单击按钮PayPal后，我如何阻止PayPal模式，并尝试首先验证它，直到完成此操作

Question

我想在单击PayPal按钮时获得下一个工作流(无填充字段(它不必显示PayPal模式，而是获取API信息来验证数据。另一方面，如果填充正确。它可以继续使用PayPal模式。有什么想法吗。

更新：我更改了包，我正在尝试发送文本字段中填写的数据，当我点击Paypal按钮时。。。它什么也不发送，但当我点击一个正常按钮时，它会发送我在文本字段上写的内容。此外，我正在与变量newJudge1的条件作斗争。当它来自submitOrder方法时，我不知道如何在组件内部获取值。我使用useState和变量newJudge，但它不起作用。如何在submitOrder中获取newJudge的值？。SubmitOrder定义了文本字段是否已填充。

<button type="button" onClick={(e) => submitOrder( 'payonline')} className="btn btn-primary">paypal</button>

<PayPalScriptProvider   options={{ "client-id": "AWMf_5zpQPNAay2g4mLmFFldXbXycJKilI1utjKf2xm8ba3asdadasdasdasdasdxczxczxc" }}>
<PayPalButtons style={{ layout: "horizontal" }}
onClick={(data, actions) => {

submitOrder('payonline');
const newJudge1={newJudge };
if(newJudge1 === 2 ){
//console.log({newJudge})
return actions.reject();
}else{
return actions.resolve();
}
}}

createOrder={(data, actions) => {

return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});

}}

/>
</PayPalScriptProvider>

这是submitOrderconst[newJudge，setNewJudge]=使用状态(0(；

const submitOrder = (e, payment_mode) => {
var data = {
firstname: checkoutInput.firstname,
lastname: checkoutInput.lastname,
phone: checkoutInput.phone,
email: checkoutInput.email,
address: checkoutInput.address,
city: checkoutInput.city,
state: checkoutInput.state,
zipcode: checkoutInput.zipcode,
payment_mode: payment_mode,
payment_id: ''
}
axios.post('/api/place-order', data).then(res => {
console.log(data);
if (res.data.status === 200) {
setNewJudge(1);
//  swal("Success", res.data.message, "success");
setError([]);
// navigate('/thank-you');
} else if (res.data.status === 422) {
swal("All fields are mandatory", "", "error");
setNewJudge(2);
setError(res.data.errors);
}
});
}

Answer 1

我使用的是react-paypal-button-v2包。

这不是一个官方软件包，请考虑@paypal/areact paypal js而不是

在出现任何模态之前，您的问题似乎是关于验证的。这可以通过onInit和onClick回调函数的组合来实现。以下是HTML/JS示例，您可以对其进行调整以做出反应：

<p id="error" class="hidden">Please check the checkbox</p>
<label><input id="check" type="checkbox"> Check here to continue</label>
<script>
paypal.Buttons({
// onInit is called when the button first renders
onInit: function(data, actions) {
// Disable the buttons
actions.disable();
// Listen for changes to the checkbox
document.querySelector('#check')
.addEventListener('change', function(event) {
// Enable or disable the button when it is checked or unchecked
if (event.target.checked) {
actions.enable();
} else {
actions.disable();
}
});
},
// onClick is called when the button is clicked
onClick: function() {
// Show a validation error if the checkbox is not checked
if (!document.querySelector('#check').checked) {
document.querySelector('#error').classList.remove('hidden');
}
}
}).render('#paypal-button-container');
</script>