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

**URL:** <https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375>\
**Category:** Questions\
**Tags:** payments-api\
**Created:** [May 18, 2025, 9:42pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375 "2025-05-18T21:42:35Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [May 18, 2025, 9:42pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/1 "2025-05-18T21:42:35Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Square-Dev-AI](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/square-dev-ai/32/2513_2.png) [@Square-Dev-AI](https://developer.squareup.com/forums/u/Square-Dev-AI)\
**Post date:** [May 18, 2025, 9:42pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/2 "2025-05-18T21:42:46Z")

</div>

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

> **[React Native Plugin: In-App Payments SDK](https://developer.squareup.com/docs/in-app-payments-sdk/react-native)**
>
> The React Native plugin is an open source project that provides a JavaScript interface for calling native In-App Payments SDK implementations.

> **[Build a Payment Integration and Take Payments Online](https://developer.squareup.com/docs/online-payment-options)**
>
> Learn about Square online payment solutions, identify APIs and SDKs that best suit your development goals, and build a payment integration.

> **Additional Documentation**
>
> [In-App Payments SDK Quickstart](https://developer.squareup.com/docs/in-app-payments-sdk/quick-start)  
> [In-App Payments SDK Quickstart](https://developer.squareup.com/docs/in-app-payments-sdk/quick-start/start)  
> [Payment API: Process Online and In-Person Payments](https://developer.squareup.com/docs/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.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [May 19, 2025, 4:18pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/3 "2025-05-19T16:18:35Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [May 27, 2025, 1:08am UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/5 "2025-05-27T01:08:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [May 27, 2025, 4:20pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/6 "2025-05-27T16:20:24Z")

</div>

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? 🙂

---

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [June 2, 2025, 4:40pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/7 "2025-06-02T16:40:08Z")

</div>

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.

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [June 2, 2025, 5:12pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/8 "2025-06-02T17:12:43Z")

</div>

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` . 🙂

---

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [June 2, 2025, 6:08pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/9 "2025-06-02T18:08:22Z")

</div>

Thank you for responding.

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

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [June 2, 2025, 6:13pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/10 "2025-06-02T18:13:19Z")

</div>

Is this a mobile app or web application? 🙂

---

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [June 2, 2025, 6:14pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/11 "2025-06-02T18:14:45Z")

</div>

This is a Web Application.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [June 2, 2025, 6:18pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/12 "2025-06-02T18:18:23Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [June 2, 2025, 6:53pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/13 "2025-06-02T18:53:50Z")

</div>

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:

```auto
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.'
  }
]

```

```auto
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'
}

```

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [June 2, 2025, 8:30pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/14 "2025-06-02T20:30:17Z")

</div>

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`. 🙂

---

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [June 5, 2025, 8:31pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/15 "2025-06-05T20:31:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [June 5, 2025, 9:34pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/16 "2025-06-05T21:34:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [June 5, 2025, 10:54pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/17 "2025-06-05T22:54:43Z")

</div>

This is my application id: APP\_ID=sq0idp-r6HB\_yWt7zl5CqiLe7CDhQ

---

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [June 5, 2025, 11:18pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/18 "2025-06-05T23:18:08Z")

</div>

> [@Bryan-Square](#):
>
> [https://connect.squareup.com/v2/payments](https://connect.squareup.com/v2/payments)

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

```auto
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 };

```

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [June 5, 2025, 11:54pm UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/19 "2025-06-05T23:54:18Z")

</div>

When you change it to production does it work? 🙂

---

<div class="post-metadata">

**Author:** ![techienette](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@techienette](https://developer.squareup.com/forums/u/techienette)\
**Post date:** [June 6, 2025, 12:05am UTC](https://developer.squareup.com/forums/t/create-payment-link-is-not-opening-a-payment-page-version-25-04-16/22375/20 "2025-06-06T00:05:52Z")

</div>

Yes. When I forced production, it worked.