php - PayPal checkout - failed to load resource (error 400) only when trying to pay with card?

one text

I have a PayPal checkout implemented in my website, which is live and fully working, but only when you click the button to pay with PayPal.

If you click on the ???debit or credit card??? button, the page just shows a continually spinning loading icon, and the browser console says ???Failed to load resource: the server responded with a status of 400???.

I find this odd when the rest of the checkout process is fully working when using PayPal, and I can take payments that way fine.

Anyone with any ideas why this should error on card payments only, and how I can resolve this?

The issue happens in both test mode and live mode.

My code is:

<div id="paypal-button-container"></div>

And script:

<script src="https://www.paypal.com/sdk/js?client-id=XXXXXXXX&currency=GBP&commit=true"></script>

<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
intent: 'CAPTURE',
payer: {
name: {
given_name: "XXX",
surname: "XXX"
},
address: {
address_line_1: "XXX",
address_line_2: "XXX",
country_code: "UK",
postal_code: "XXX",
},
email_address: "XXX",
phone: {
phone_number: {
national_number: "XXX"
}
}
},
purchase_units: [{
amount: {
value: "XXX"
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
orderID = orderData.purchase_units[0].payments.captures[0].id;
status = orderData.status;
actions.redirect("XXX");

}); }, onCancel: function(data) { alert("PayPal payment cancelled."); }, onError: function(err) { alert(err); } }).render('#paypal-button-container');

Because the issue exists with my client ID and also with "test", I assume it is not an account issue.

Returned console messages include:

Status: 400 Bad Request
Version: HTTP/2
Transferred: 2.28 kB (11 B size)
Referrer Policy: strict-origin-when-cross-origin