Wix intergration. No npm install available. Please help me get started

Questions
1

Simply. How do I specify client.checkoutApi. The npm doesn’t work with wix so have to do it another way. Honestly, I don’t know where to start.

2

Not sure how to help here. We have a Wix partner integration. Are you using that or are you trying to build a customer integration? Also any additional details on what your trying to accomplish will help me better assist. :slightly_smiling_face:

3

So I already use Square as the payment gateway for product purchases using the wix pay api. But basically I want to be able to send links to pay for unique items. For example, I’m taking an order over the telephone or chatting with someone via WhatsApp. I want a quick way to send a pre populated quick pay link. That will have their order number, a description of the product they’re ordering along with their names and address etc already filled in. Stream lining the payment process for them and us. Using your api explorer this looks very easily achievable I just don’t know how to get it to fire. I can pass the variables from the front end to the back end but not sure how I go about defining the client info. I think that’s the first hurdle.

Thanks. I hope you can help me.

Dan

4

Interesting use case to use the API Explorer to generate links to send from mobile or phone orders. Honestly you could do this if you have the Explorer configured correctly. Otherwise you would need to build out the client side input to make the call to the backend with our Checkout API. :slightly_smiling_face:

5

Are you able to guide me on configuring the
Client side api call?
I can’t find any reference material for any way to integrate it with wix code.

6

I can help with anything Square related which is mostly the backend calls with this API. Also I’m not very familiar what Wix allows for development. Normally client side would be HTML JavaScrip or TypeScript to collect the information to make the backend API call. :slightly_smiling_face:

7

Can you tell me what info “client” requires in html?

8

The client configuration is entirely up to you. From what I gather from this thread you just want it to be a form that the information input into and then when the form submits it will POST the information to the API call. :slightly_smiling_face:

9

I’m not explaining myself very well. And I don’t know how to better explain. This is all new to me. I’m not sure how to start the api call. Presumably somewhere ‘client’ needs to know the secret and location to identify who is sending the request?
Using the api explorer on square website it’s all set up. I just need to know how to get my info to an endpoint. And also what is the url for that endpoint?
Like I said. I can’t find any documentation to get me started. Do really appreciate your replies!

10

The credentials your referring are:

  1. Go to your Developer Dashboard.
  2. Click on + New Application.
  3. Name the application and click on Create Application.

We’ll auto-generate the information needed for integration. The Location ID(s) for your Square account can be found in the Locations tab of your Developer Dashboard.

Please note that you may need to switch between “Sandbox” and “Production” with the toggle at the top of the page, depending on the context and your credentials are different for each environment.

As for the URL production is https://connect.squareup.com/v2/online-checkout/payment-links :slightly_smiling_face:

11

I was rather hoping you could help me with the html code. Like below but to then be able to send a quick payment link?

<head>
  <link rel="stylesheet" href="/reference/sdks/web/static/styles/code-preview.css" preload>
  <script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
</head>
<body>
<div id="payment-form">
  <div id="payment-status-container"></div>
  <div id="card-container"></div>
  <button id="card-button" type="button">Pay</button>
</div>
  <script type="module">
    const payments = Square.payments('sandbox-sq0idb-RT3u-HhCpNdbMiGg5aXuVg', 'TC4Z3ZEBKRXRH');
    const card = await payments.card();
    await card.attach('#card-container');

    const cardButton = document.getElementById('card-button');
    cardButton.addEventListener('click', async () => {
      const statusContainer = document.getElementById('payment-status-container');

      try {
        const result = await card.tokenize();
        if (result.status === 'OK') {
          console.log(`Payment token is ${result.token}`);
          statusContainer.innerHTML = "Payment Successful";
        } else {
          let errorMessage = `Tokenization failed with status: ${result.status}`;
          if (result.errors) {
            errorMessage += ` and errors: ${JSON.stringify(
              result.errors
            )}`;
          }

          throw new Error(errorMessage);
        }
      } catch (e) {
        console.error(e);
        statusContainer.innerHTML = "Payment Failed";
      }
    });
  </script>
</body>
12

Unfortunately coding a custom example is outside the scope of our support. That’s something that you’ll need to do or have a developer build. The example you provided is our Web Payments SDK which is a different developer product. That form is for embedding our form field in your own site so customers can checkout without leaving the site. It points to our maintained libraries for PCI compliance. :slightly_smiling_face:

13

Yes I found that one whilst browsing this forum and can make that work. Hoped there’d be something similar for my use case of the quick payment link. I suspect for someone that knows what they’re doing it’s a simple task.
Don’t suppose you could point me towards any further help?

14

Yeah, I can. You can reach out to a Square Specialist for help with your custom integration. :slightly_smiling_face: