I have integrated the following code for Visa Checkout in my project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img alt="Visa Checkout" class="v-button" role="button" src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png?cardBrands=VISA,MASTERCAR..." />
<script type="text/javascript" src="https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"></script>
<script type="text/javascript">
function onVisaCheckoutReady() {
V.init({
apikey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
settings: {
locale: "en_US",
countryCode: "US",
displayName: "Your Store",
payment: {
cardBrands: ["VISA", "MASTERCARD"]
}
},
paymentRequest: {
currencyCode: "USD",
subtotal: "10.00"
}
});
V.on("payment.success", function(payment) {
fetch('/visa/process-payment', {
method: 'POST',
body: JSON.stringify(payment),
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => console.log('Payment processed on server:', data))
.catch(
error => console.error('Error:', error)
);
});
V.on("payment.error", function(payment, error) {
console.log(error);
});
V.on("payment.cancel", function(payment) {
// Handle payment cancellation
});
}
</script>
</body>
</html>
but i was get invalid api key why ?
i was use this api key and my api in Sanbox
