Web Payments SDK won't display payment form

jonny · May 24, 2022, 5:48pm

Hi,

I’m using the SDK Web Payments Quick Start Guide.
I have went through every step but cannot get the payment form to display.

Any help would be appreciated

Bryan-Square · May 24, 2022, 6:00pm

How far through the walkthrough did you get and are you using localhost or an environment that’s HTTPS?

jonny · May 24, 2022, 6:10pm

I’ve got to the end of step 4,
I’m using a localhost environment, http connection

Thanks

Bryan-Square · May 24, 2022, 6:37pm

That should be working then. Could you provide the code you’re using for the card element?

jonny · May 24, 2022, 6:45pm

Here is my code for the card element

<script>
  const appId = sandbox-st0idb-z6PBhbQprcEf2sRGSh7n7w;
  const locationId = L9BZDWDH00DR3;

  async function initializeCard(payments) {
     const card = await payments.card();
     await card.attach('#card-container');
     return card;
   }

  document.addEventListener('DOMContentLoaded', async function () {
    if (!window.Square) {
      throw new Error('Square.js failed to load properly');
    }
    const payments = window.Square.payments(appId, locationId);
    let card;
    try {
      card = await initializeCard(payments);
    } catch (e) {
      console.error('Initializing Card failed', e);
      return;
    }

If it is of any further help to you I ran the server.test.js file using AVA test runner and got the following output

Error: Bad Request
at createError (/home/user/web-payments-quickstart/node_modules/micro/lib/index.js:20:14)
at createPayment (/home/user/web-payments-quickstart/server.js:27:11)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Error: Bad Request
at createError (/home/user/web-payments-quickstart/node_modules/micro/lib/index.js:20:14)
at storeCard (/home/user/web-payments-quickstart/server.js:96:11)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
serves /

server.test.js:25

24: const body = await res.text();
25: t.regex(body, re);
26:

Value must match expression:

“index.html contents”

Regular expression:

/Quickstart/

server.test.js:25:7

─

1 test failed

jonny · May 26, 2022, 8:12pm

Can you please help me here I have tried everything and still can’t get it going

Bryan-Square · May 26, 2022, 8:26pm

Do you have the script with the JS library configured? For example:

<!DOCTYPE html>
<html lange="en">
<head>
  <script
  type="text/javascript"
  src="https://sandbox.web.squarecdn.com/v1/square.js"
  ></script>
  
  <script>
  
  const appId = 'APPLICATION_ID';
  const locationId = 'LOCATION_ID';
  
  async function initializeCard(payments) {
    const card = await payments.card();
    await card.attach('#card-container');
    return card;
  }
  
  document.addEventListener('DOMContentLoaded', async function () {
    if (!window.Square) {
      throw new Error('Square.js failed to load properly');
    }
    const payments = window.Square.payments(appId, locationId);
    let card;
    try {
      card = await initializeCard(payments);
    } catch (e) {
      console.error('Initializing Card failed', e);
      return;
    }
    
    // Step 5.2: create card payment
  });
  
  
</script>

<meta charset="utf-8" />
<title>Square Web Payments Quickstart</title>
<link href="app.css" rel="stylesheet" />
</head>

<body>
  
  <form id="payment-form">
    <div id="card-container"></div>
    <button id="card-button" type="button">Pay $1.00</button>
  </form>
  <div id="payment-status-container"></div>
  
</body>
</html>

jonny · May 26, 2022, 9:08pm

Yes, I even copied your code example in just now using my own appId and locationId and still the payment form will not render on the browser.

<!DOCTYPE html>
<html lange="en">
<head>
  <script
  type="text/javascript"
  src="https://sandbox.web.squarecdn.com/v1/square.js"
  ></script>

  <script>


  const appId = 'sandbox-sq0idb-fSGnX-auZx3NE0xxxxxx';
  const locationId = 'L9BZDWDH00DR3';


  async function initializeCard(payments) {
    const card = await payments.card();
    await card.attach('#card-container');
    return card;
  }

  document.addEventListener('DOMContentLoaded', async function () {
    if (!window.Square) {
      throw new Error('Square.js failed to load properly');
    }
    const payments = window.Square.payments(appId, locationId);
    let card;
    try {
      card = await initializeCard(payments);
    } catch (e) {
      console.error('Initializing Card failed', e);
      return;
    }

    // Step 5.2: create card payment
  });


</script>

<meta charset="utf-8" />
<title>Square Web Payments Quickstart</title>
<link href="app.css" rel="stylesheet" />
</head>

<body>

  <form id="payment-form">
    <div id="card-container"></div>
    <button id="card-button" type="button">Pay $1.00</button>
  </form>
  <div id="payment-status-container"></div>

</body>
</html>

Bryan-Square · May 26, 2022, 9:14pm

You’re using the Quickstart with the server running and it’s still not working?

jonny · May 26, 2022, 9:26pm

Yeah server is running by using either

npm run dev

npm run start:sandbox

node --version
v16.15.0

grep 'SQUARE' .env.sandbox
SQUARE_ACCESS_TOKEN=EAAAEHLO8yqWKhjg79v7_7AHAbX4_VevTGxxxxxxxxxxxxx

It turns out the output from the ava test runner on server.test.js is normal

Debugging 127.0.0.1:3000 in firefox shows the following error

Uncaught (in promise) WebSdkEmbedError: Web Payments SDK can only be embedded on sites that use HTTPS
    ln https://sandbox.web.squarecdn.com/v1/square.js:1
    Si https://sandbox.web.squarecdn.com/v1/square.js:1
    payments https://sandbox.web.squarecdn.com/v1/square.js:1
    <anonymous> http://127.0.0.1:3000/:26
    EventListener.handleEvent* http://127.0.0.1:3000/:22
square.js:1:88994
    <anonymous> http://127.0.0.1:3000/:36
    (Async: EventListener.handleEvent)
    <anonymous> http://127.0.0.1:3000/:22

So I ran the Quickstart code on my apache https enabled server and it works!

I still don’t understand why it isn’t working with my local host http connection?

Bryan-Square · May 27, 2022, 3:59pm

Is your localhost environment a custom environment or are you actually a localhost like: [Preformatted text](http://localhost:3000/)?

jonny · May 27, 2022, 5:07pm

All along I have been putting the address in my browser as

http://127.0.0.1:3000

And it does not render the card payment form

It does indeed render when I use your suggested

http://localhost:3000

It is now working and payments are showing up on my Default Test Account Dash

Thanks for all your help @Bryan-Square You can consider this issue solved!

Bryan-Square · May 27, 2022, 5:15pm

Ah, yes the local network address won’t work and I can see how that’s confusing. Glad to hear it’s working as expected.

jonny · May 27, 2022, 5:19pm

We got there! Thanks!

djamara · June 28, 2022, 4:56pm

Hi, I have an issue with the card form, in my case the form is not displaying when I use the production app ID. But when I keep the sandbox it works well. I want to know how to fix it because we cannot further without this.

Bryan-Square · June 28, 2022, 6:00pm

When you configured the form to production did you complete all the deployment tasks? Deployment tasks include:

Get production application credentials. In the “Get Sandbox application credentials” section, you obtained Sandbox credentials. Follow the steps to open the Developer Dashboard, but this time choose Production mode and copy the production application ID and access token.
Update script references. In the ADD SCRIPT REFERENCES section, you added script references in index.html. Update the domain string in the JavaScript reference from sandbox.web.squarecdn.com/v1/square.js to web.squarecdn.com/v1/square.js.
Provide your production application ID. The Web Payments SDK requires a valid application ID to return a payment token. In the “Provide your application ID” section, you provided a Sandbox application ID. Update the code by providing your production application ID.
Configure your backend server to use a production access token. In the “Configure the backend with your access token” section, you provided a Sandbox access token. Replace it with the production access token.

If you want to test the application in a production environment (squareup.com), you must use an actual payment card. Note that Square actually charges payment cards in production. Therefore, if you must test in production, charge minimum amounts.

sarath_unrelax · November 21, 2024, 12:17pm

For me

Im serving my application like

http://localhost:8888/square/index.html

Its not showing any error.
Only button is showing and card inputs fields are not coming up why ?

Bryan-Square · November 21, 2024, 4:58pm

Are there any console errors?

Topic		Replies	Views
Having problems going live Questions web-payments-sdk	3	646	December 6, 2022
Web Payments Migration from spPaymentForm Questions payment-form , web-payments-sdk	7	662	August 30, 2023
From quickstart project template to my app integration Questions sandbox	10	779	September 8, 2022
Payments SDK displaying Success or Failure details in the DOM Questions	5	1667	May 23, 2022
Web payment SDK integration (Angular) Questions web-payments-sdk	6	26	November 9, 2024

Web Payments SDK won't display payment form

Related topics