Hi, I am trying to build a prototype for a Visa Checkout button on an invoice on Django. The invoice.html code looks like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice {{ invoice_data.pk }}</title>
<script type="text/javascript">
function onVisaCheckoutReady(){
price = "{{invoice_data.get_display_price|safe}}";
V.init({
apikey: "55I07RTVJRI8CX9XUAUE21Fv326FPc9GFEIaqRYiH4D8I-4oM",
encryptionKey: "2a11dc5d-c69d-4f5e-8740-a8eab140c335",
paymentRequest: {
currencyCode: "MYR",
subtotal: price,
}
});
V.on("payment.success", function(payment){
document.write("payment.success: \n" + JSON.stringify(payment));
});
V.on("payment.cancel", function(payment){
document.write("payment.cancel: \n" + JSON.stringify(payment));
});
V.on("payment.error", function(payment, error){
document.write("payment.error: \n" + JSON.stringify(payment) + "\n" + JSON.stringify(error));
});
}
</script>
</head>
<body>
<h1>From: {{invoice_data.billing_company}}</h1>
<h2>{{invoice_data.billing_company.address1}}</h2>
<h2>{{invoice_data.billing_company.address2}}</h2>
<h2>{{invoice_data.billing_company.email}}</h2>
<hr>
<h1>To: {{invoice_data.customer_company}}</h1>
<h2>{{invoice_data.customer_company.address1}}</h2>
<h2>{{invoice_data.customer_company.address2}}</h2>
<h2>{{invoice_data.billing_company.email}}</h2>
<hr>
<h1>Amount : RM {{ invoice_data.get_display_price }}</h1>
<section>
<div class="invoice">
<div class="description">
<h3>Invoice #{{invoice_data.invoice_number}}</h3>
</div>
</div>
<button type="button" id="checkout-button">Checkout</button>
</section>
{% csrf_token %}
<img alt="Visa Checkout" class="v-button" role="button" src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png"/>
<script type="text/javascript" src="https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js">
</script>
</body>
<script>
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
</script>
</html>
However, when I try to load the webiste, it loads the html for a second, then immediately I get redirected to an error message saying
payment.error: {"vInitRequest":{}} {"code":401,"message":"Invalid API Key"}
Upon checking console, I see
config:1450 GET https://sandbox.secure.checkout.visa.com/wallet-services-web/merchant?profileOwner=&profileName=&cou... 401.
My apikey is my X-pay token ID, and my encryption key is my encryption/decryption key ID as shown in the images below
However, when I try to load the webiste, it loads the html for a second, then immediately I get redirected to an error message saying
payment.error: {"vInitRequest":{}} {"code":401,"message":"Invalid API Key"}
Upon checking console, I see
config:1450 GET https://sandbox.secure.checkout.visa.com/wallet-services-web/merchant?profileOwner=&profileName=&cou... 401.
My apikey is my X-pay token ID, and my encryption key is my encryption/decryption key ID as shown in the images below
. I am not sure what I am doing wrong.
