Re: Invalid API Key

johnkanady

I have integrated the following code for Visa Checkout in my project:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

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

SyedSa

Hi @johnkanady, Thank you for reaching out. An agent will get back to you as soon as possible. Until then, if any community member has information that may be helpful, feel free to reply in this thread.

johnkanady

How to generate API KEY ?

Can you please provide me the step by step guide, I am not able to generate.

DianaVisaPM

Hey @johnkanady,

To address your issue with the invalid API key for Visa Checkout integration, let's go through the steps to properly generate and use an API key in the Visa Developer Platform sandbox environment.

Steps to Generate an API Key

1. Sign Up or Log In to Visa Developer Portal:
- Go to the Visa Developer Portal at https://developer.visa.com.
- If you don't have an account, sign up for one. If you already have an account, log in.

2. Create a New Project:
- Once logged in, navigate to the "Dashboard".
- Click on "Create a New Project".
- Enter the project name, description, and select the APIs you want to use (e.g., Visa Checkout).

3. Generate API Key:
- After creating the project, go to the project details page.
- Under the "Credentials" tab, you will find your API key.
- Copy the API key provided.

4. Use the API Key in Your Code:
- Replace the placeholder `apikey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx"` in your code with the actual API key you copied from the Visa Developer Portal.

Example Integration Code

Here is the corrected code with instructions on where to place your API key:

```html

<!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>Visa Checkout Integration</title>
</head>

<body>

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>

```

Common Issues and Troubleshooting

1. Invalid API Key:
- Make sure you are using the API key from the sandbox environment if you are testing. The API key should match the environment you are working in (sandbox or production).

2. API Key Not Working:
- Ensure there are no extra spaces or characters when you copy the API key.
- Verify that the API key is correctly pasted into the `apikey` field in your code.

3. API Key Permissions:
- Check that the API key has the necessary permissions for the Visa Checkout service.

4. Environment Mismatch:
- Ensure that you are using the sandbox URLs and keys for testing purposes. Production URLs and keys will differ.

Thanks,

Diana

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

johnkanady

Dear Visa Developer Support Team,

I hope this message finds you well. I am reaching out to inquire about the availability of the Visa Checkout API service on the Visa Developer platform.

While creating a project, I noticed that there is no option to select the Visa Checkout API under the "Select APIs" section. I would like to confirm if this service has been renamed, rebranded, or replaced with another offering. If so, could you kindly guide me on how to enable this feature or suggest an alternative API that provides similar functionality?

Additionally, I would appreciate any documentation or support materials to assist with integrating this solution into my project.

Thank you for your assistance, and I look forward to your response.

DianaVisaPM

Hey @johnkanady,

Please refer to Visa Click to Pay.