API key and Encryption key problem with Visa Direct

Solved! Go to solution
limgw1
Regular Visitor

API key and Encryption key problem with Visa Direct

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(paymenterror){
        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>
</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 

. I am not sure what I am doing wrong.

 
 

Untitled.png

5 REPLIES 5
SLi
Visa Developer Support Specialist
Visa Developer Support Specialist

Re: API key and Encryption key problem with Visa Direct

Hi @limgw1,

 

Visa Checkout

You will need to work with a partner in order to integrate Visa Checkout into your project. You can find the list of Partners here:

Partners to integrate with Visa Checkout: https://globalcheckout.visa.com/visacheckoutPartners 

Please note, partners handle integrations on their end and will be able to help you with any technical questions you have, due to the fact that, that they manage a different integration with our API and the Visa Developer Portal. 

 

Visa Direct

Below are some useful tools/resources that you can use to test out your project credentials and connect to the APIs on VDP.

 

Configure Two-way SSL with openSSL and Test on Postman

https://community.developer.visa.com/t5/Webinars/Configure-Two-way-SSL-with-openSSL-and-Test-on-Post...

 

How to run the Hello World API with Mutual SSL on Postman:

https://community.developer.visa.com/t5/Two-way-SSL-X-Pay-Token/How-to-run-the-Hello-World-API-with-...

 

How to run a Visa Direct transaction using Python:

https://community.developer.visa.com/t5/Webinars/Run-a-Visa-Direct-Transaction-Using-Python-in-1-hr-...


Best,
Stacey

Was your question answered? Don't forget to click on "Accept as Solution" to help other devs find the answer to the same question.
limgw1
Regular Visitor

Re: API key and Encryption key problem with Visa Direct

So does that mean, there is no way for me to get a success message unless I work with one of them, EVEN if it is just a test project?

I have already tested the "Hello World" API and it returns successfully. Does that mean my credentials are correct?

Thank you for the clarification, I am new to handling with APIs so this is all confusing to me

SLi
Visa Developer Support Specialist
Visa Developer Support Specialist

Re: API key and Encryption key problem with Visa Direct

Hi @limgw1,

 

For Visa Checkout, you can try to integrate on your own for testing purposes. If you have any questions, please do reach out to the integration partners. 

If you are able to connect to the Hello World API successfully with your project credentials, then your credentials are correct.

 


Best,
Stacey

Was your question answered? Don't forget to click on "Accept as Solution" to help other devs find the answer to the same question.
kh-dlacar
Community Manager

Re: API key and Encryption key problem with Visa Direct

good to know
kh-dlacar
Community Manager

Re: API key and Encryption key problem with Visa Direct

Same here.