Payments quick start guide returning "payment failed" every time

Questions
1

https://mccroskeyonline.com/public/examples/card-payment.html

No matter what I enter, I always receive a “payment failed” message. I have followed the tutorial from the quick start guide, but it’s just not working. In my code, on this line: async function initializeCard(payments) {

I am in sandbox mode.

I am receiving an error. This is in Dreamweaver, so the error isn’t being displayed, only that there is an error with that line of code.

I have verified my my app id, location id, and my SQUARE_ACCESS_TOKEN is entered in my .env.example file.

I’m not sure where to go at this point.

Thank you.

2

:wave: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

Take a Credit Card Payment
Make your First API Call
Square Developer

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

3

I see that the location that’s configured isn’t the sandbox default test account. Did you configure the correct access token for that account? To get the access token for that account you’ll have to click on the name of the location in Sandbox Test Account section of the Developer Dashboard. :slightly_smiling_face:

4

I changed the location ID to reflect the location in the Default Test Account but it’s still giving me failed. When I’m in my Credentials area, I only see one application ID and access token. But there are 2 sites in the Locations area: 1) Default Test Account, and, 2) MVQS. I should be using the location ID from the Default Test Account?

Thank you.

5

If this is the quickstart I’m not seeing a call to CreatePayment in the API Logs. The card is tokenizing correctly but it’s not bing passed to the server to process the payment. Did you alter the quickstart at all? :slightly_smiling_face:

6

I just deleted the hard-coded stuff, city, address, etc. If you can provide the link to the quick start again, I will re-add it to my code intact, and upload it again.

***UPDATE: I did find the quick start guide, and copied everything over. The only changes I made were to the app id and location id. I’m still getting payment failed. The location ID that I’m using is the default test account location ID.

Thank you.

7

You cloned the quickstart and did all the steps in the README.md? :slightly_smiling_face:

8

To the best of my knowledge, yes. I was confused about installing node.js, but I did install it on my local PC. However, I have no idea what’ so the server. Also, I can’t browse anything at this URL: http://localhost:3000/

Error: This site can’t be reached

localhost refused to connect.

Try:

ERR_CONNECTION_REFUSED

When I browse the file locally, on my ColdFusion server, I do get an error message. That message is: applicationID and/or locationID is incorrect.

On the live site, on the server, I do not get any errors except after I I click the Pay $1.00 button.

Also, I do not have a eslint.config.js file in my directory.

Turns out I had the wrong locationID in my card-payment.html file. I corrected that, click the submit button, and still get Payment Failed when running it locally. I think I am confused about what files I actually have to install on my PC in order to get this to work.

9

Are you able to run Node.js? Thats what the quickstart is. :slightly_smiling_face:

10

Okay, running this code, and using my sandbox credentials, I was finally able to get a successful payment.

The code example on this page:

11

Now, I do have another question about using the payment results returned from SQUARE to update a SQL Server database. Can I continue with this thread, or should I start a new support thread?

Or, is there a way to redirect based on successful payment or payment declined? I could just put special code on those pages to update the database as needed.

Thank you!

12

Glad to hear that you got it to work! :tada:

You can totally continue to ask questions on this thread. Any redirect based on payment results would be custom logic for your application that you would need to add based on what you want the customer experience to be. :slightly_smiling_face:

13

I can write the code and the logic, but I’m not sure what the best way to do that is. How would I include a redirect if the returned statement is:
statusContainer.innerHTML = “Payment Successful”;

Where could I include a redirect? Again, I can write the code, I just don’t know what to call in an IF statement.

Are there some examples of including a redirect based on success or failure?

Hope that makes sense. Thank you!

14

There aren’t any examples with a redirect. Ideally you should be basing the IF statement on the CreatePayment response. If a payment is returned and status is COMPLETED redirect. :slightly_smiling_face:

15

So, maybe put a redirect after this line?

statusContainer.innerHTML = “Payment Successful”;

16

Yeah, you can put it there. :slightly_smiling_face:

17

Thank you. I’ll come back to this thread if things aren’t working as planned. Thank you for your help! :slightly_smiling_face:

18

I just noticed that this code does not include a payment amount! Where do I add the amount to charge?

Thank you.

19

You’ll include the amount in the CreatePayment API call. :slightly_smiling_face:

20

Where is that inserted into the script that I’m using? Can you point me in the right direction and show an example to me?

Is this what you’re referring to?

try {
const response = await client.paymentsApi.createPayment({
sourceId: ‘cnon:card-nonce-ok’,
idempotencyKey: ‘{UNIQUE_KEY}’,
amountMoney: {
amount: 100,
currency: ‘USD’
}
});

console.log(response.result);
} catch(error) {
console.log(error);
}

Thank you.