Visa Developer Community

Highlighted
Helper

VISA Checkout Library Initialization

We are building this mobile web-based (non-native) application as an affordable alternative to fast food restaurant owners using the MEAN Stack. We are starting to include VISA Checkout as the first payment method option.

 

iPhone8_02.pngConfirm/Load ScriptsiPhone8_03.pngError

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

The front-end is an Angular application. In our current design, we dynamically load the initialization handler and the sdk.js script into the Angular view upon confirmation from the customer that VISA Checkout will be the payment method.

Shortly after loading, the Visa Checkout button briefly appears and then we receive the following error:

 

payment.error: {"vInitRequest":{}} {"code":401,"message":"Invalid API Key"}

 

One of our problems is that we have not found within the Visa Checkout Merchant documentation an obvious and clear statement specifying exactly which of the API and/or Shared Secret values are to be placed in the apikey and encryptionKey fields of the V.init  function at the initialization handler.

We have the following values:

  1. API Key and associated SharedSecred from Credentials/Inbound and Authentication Keys
  2. API Key and associated SharedSecred created within VISA CHECKOUT CONFIGURATION for encryption purposes.

 

function onVisaCheckoutReady() {

  V.init( {

    apikey: "...",

    encryptionKey: "...",

    paymentRequest: {

      currencyCode: "USD",

      subtotal: "10.00"

    }

  });

  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));

  });

}

 

The question is which one goes where? We have tried virtually every possible combination without success.

Your help will be appreciated.

 

Regards,

Freddie A. García

6 REPLIES 6
Visa Dev Moderator

Re: VISA Checkout Library Initialization

Hey @Freddie,

 

I'll take a look and get back to you soon!

 

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

Thanks,
Diana

Helper

Re: VISA Checkout Library Initialization

The way I understand it is that the values to be placed on the V.init are as follows:
function onVisaCheckoutReady() {
V.init( {
  apikey: "API Key value from the Credentials section",
  encryptionKey: "API Key value from the Configuration section with Usage Type = Encryption",
   ...
});
   ...
}

However, this has not worked either. I even created a new project and the error messages is the same.
Visa Dev Moderator

Re: VISA Checkout Library Initialization

Hey @Freddie,

 

To generate API Keys for your Visa Checkout project, please follow the instructions below:

Inbound and Authentication Keys:
1. Log in to the Visa Developer Center.
2. Click on the Project Name of your Visa Checkout project.
3. Click “Credentials” in the navigation menu on the left side of the page.
4. On the right side of the page, click “Create New Inbound Keys” to generate a new key or click on your existing API Key to expand the menu and view your existing API and Shared Secret Keys.

Outbound and Encryption Keys:
1. Log in to the Visa Developer Center.
2. Click on the Project Name of your Visa Checkout project.
3. Click “Configuration” in the navigation menu on the left side of the page.
4. Click “Visa Checkout,” then select “Outbound and Encryption Keys.”
5. Click the blue “Create New” button, enter an API Key Label, select the appropriate usage type, and then click “Save.”

 

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

Thanks,
Diana

Helper

Re: VISA Checkout Library Initialization

I have done that many times.

I believe that the payment.error message is from your end.

payment.error: {"vInitRequest":{}} {"code":401,"message":"Invalid API Key"}

Helper

Re: VISA Checkout Library Initialization

This problem continues without resolution or proper support.

I feel absolutely alone trying to solve this. In the process I found that the Chrome browser developer console reports the following:

config:1313 GET https://secure.checkout.visa.com/wallet-services-web/merchant?profileOwner=&profileName= 401 (Unauthorized)
(anonymous) @ config:1313
(anonymous) @ config:1314

 

I would like to know why does the sdk triggers a call to the wallet services with empty profileOwner and profileName parameters.
Maybe the source of the problem is related to that.

Visa Dev Moderator

Re: VISA Checkout Library Initialization

Hey @Freddie,

 

Please provide us with your API key, merchant name or email address used to create the account. Then we can investigate what issues you are running into with the API key creation.

 

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

Thanks,
Diana