Create Payment Link is not opening a payment page - Version 25-04-16

Questions
1

The payment link is opening a new window in my react app but not opening a square secure payment page.

Do I need to create a component to handle the payment?

2

:waving_hand: 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

In-App Payments SDK Quickstart
In-App Payments SDK Quickstart
Payment API: Process Online and In-Person Payments

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

When you say that it’s not a secure payment page what exactly do you mean? Payment links are supposed to open an HTTPS page with our secure iframe on it for the customer to enter the card details. :slight_smile:

5

I created a React Store App and created a shopping cart component to handle the payments. The Square Card form is loading correctly now. I opened a ticket because I am getting a 500 unauthorized error now.

6

An unauthorized shouldn’t be returning a 5xx error. Also a unauthorized error means that something isn’t configured correctly. Is this with sandbox or production? :slight_smile:

7

This is production. I sent my code to support last week but I did not receive a response.

I am using Web Payment SDK for node.js - This is a react application. Everything is working except the payment.

import React, { useEffect, useRef } from 'react';
import { toast } from 'react-toastify';

const SquareCardForm = React.memo(({ onCardReady }) => {
  const containerRef = useRef(null);
  const initializedRef = useRef(false);

  useEffect(() => {
    const containerElement = containerRef.current;

    async function initializeSquare() {
      if (initializedRef.current || !containerElement) return;

      try {
        const payments = await window.Square.payments(
          'AppID',
          'Location'
        );
        const card = await payments.card();
        await card.attach(containerElement);

        initializedRef.current = true;
        if (onCardReady) onCardReady(card);
        console.log('Square Card form initialized.');
      } catch (err) {
        console.error('Failed to load card form:', err);
        toast.error('Failed to initialize Square card form.');
      }
    }

    initializeSquare();

    return () => {
      if (containerElement) {
        containerElement.innerHTML = '';
      }
    };
  }, [onCardReady]);

  return <div ref={containerRef} id="square-card-container" className="mt-3" />;
});

export default SquareCardForm;
8

What domain string in the JavaScript reference are you using? If your in sandbox you’ll use: sandbox.web.squarecdn.com/v1/square.js otherwise production is: web.squarecdn.com/v1/square.js . :slight_smile:

9

Thank you for responding.

I have the public square.js in my public index html.

10

Is this a mobile app or web application? :slight_smile:

11

This is a Web Application.

12

Okay, what are the errors that your getting? The Web Payments won’t trigger a new page opening. There’s just a form field where the customer enters their card information. :slight_smile:

13

That is correct. First I was trying the payment link code but when I could get it to work with my react app, switch to using the SDK for Web payments.

I have a serverless react web application. The lambda function holds the credentials in environment variables for processing. I was trying to share my shopping cart code here but the form is not being friendly. This is my error:

2025-05-29T20:58:19.276Z	bd6a6e3a-e5b0-4510-b5c4-6acd82d0a3dd	ERROR	Square API Error: [
  [Object: null prototype] {
    category: 'AUTHENTICATION_ERROR',
    code: 'UNAUTHORIZED',
    detail: 'This request could not be authorized.'
  }
]

2025-05-29T20:58:18.513Z	bd6a6e3a-e5b0-4510-b5c4-6acd82d0a3dd	INFO	Received payload at /process-payment: {
  sourceId: 'cnon:CA4SEGSTtrRn_sGmS4bDXa1PjcoYASgB',
  idempotencyKey: '50e6d3b9-6545-4241-adba-32eff0661087',
  locationId: 'LocationID',
  amount: 2803,
  currency: 'USD'
}
14

Okay, an AUTHENTICATION_ERROR means that something isn’t configured correctly. Are you in production or sandbox? If production have you confirmed that the CreatePayment request has the correct base path URL https://connect.squareup.com/v2/payments. :slight_smile:

15

I don’t see where the url you provided should be in my code. This is not in the documentation. I tried adding the payment code here but I get a 403 error.

16

That would be in the header of your request. What’s your application ID? :slight_smile:

17

This is my application id: APP_ID=sq0idp-r6HB_yWt7zl5CqiLe7CDhQ

18

I add lines for debugging and see that it is still set as sandbox.

const { Client, Environment, ApiError } = require('square');

const { isProduction, REACT_APP_SQUARE_ACCESS_TOKEN } = require('./config');

// Add logs for debugging

console.log('Square Client Init:');

console.log('Environment:', isProduction ? 'Production' : 'Sandbox');

console.log('Token Prefix:', REACT_APP_SQUARE_ACCESS_TOKEN?.substring(0, 10));

const client = new Client({

accessToken: process.env.REACT_APP_SQUARE_ACCESS_TOKEN,

environment: Environment.Production // Force production

});

module.exports = { ApiError, client };
19

When you change it to production does it work? :slight_smile:

20

Yes. When I forced production, it worked.