Web Payments SDK won't display payment form

Questions
,
1

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

2

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

3

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

Thanks

4

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

6

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

7

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

8

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>
9

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>
10

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

11

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!

Screenshot_20220526_224956
Screenshot_20220526_224956972×560 10 KB

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

12

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

13

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!

14

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. :slightly_smiling_face:

15

We got there! Thanks!

16

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.

17

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

  1. 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.
  2. 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.
  3. 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.
  4. 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. :slightly_smiling_face: