How to Integrate Square APIs in DhiWise?

Are you planning to scale your business to newer heights using the mobile/web application you previously envisioned? If yes, we believe that skilled and functional integrations could easily do the trick from a development perspective.

Imagine this: you create a web application to get your hands on some resourceful third-party APIs for implementing better marketing moves. With DhiWise x Square, it can be your new reality.

But first, here is a quick refresher:

What is DhiWise?

DhiWise is a programming platform helping developers convert their designs into developer-friendly code for mobile and web apps. DhiWise automates the application development lifecycle and instantly generates readable, modular, and reusable code.

What is Square, and why is it being referred to?

Square — the Jack Dorsey-owned FinTech firm — is a payment solution provider for mobile clients. What makes it essential is its diverse range of developer-focused API offerings.

Square provides collections of APIs that work together to solve various business problems. Developers can build solutions using the Square platform to meet the business needs of Square sellers. In addition, it’s a developer platform that has tools to support App Marketplace.

Now that the premise is set, here is how an Order Management Portal makes sense.

What’s an Order Management Portal?

• Order Management Portal is a system that holds all the orders.
• You can filter orders based on the item name, quantity, and price.
• You can also generate multiple order information in PDF and excel format, which can be downloaded and shared further.

• Orders are already created by Square APIs.
• Order Management System deals with the created orders.
• Once the user logs in, it lists all the orders. These orders are fetched using Batch retrieve API from the Square API consortium.

Why DhiWise?

DhiWise makes it extremely easy and quick to develop this application. The application could have taken a week but was developed in a day with DhiWise. Wonderful, right?

Let’s get into it!

1. Import Figma

(i) The Figma I used is

https://www.figma.com/file/Qkxdm8NRDE1C2dnccxVRo0/Order-Management-Portal?node-id=0%3A1

2. Quick Navigations

(i) To navigate from the login screen to the dashboard, I have set up navigation on the success of the login’s API call.

3. Integrate APIs

API’s used to create Order Management Portal

(i) Login API.

(ii)Square API for order creation.

(iii)Square API for retrieving orders.

4. Build Application

(i) Once all the APIs were integrated, I built the application to get the generated code.

(ii) The generated code is readable and easy to modify and scale.

5. Push it to GitHub

(i) Once the code is generated, push it to GitHub or download it.

6. Running the application source code on the local machine

I cloned the Git repository and started working with the generated code on my local device.

API Integration from the Tech eye:

1. Login

(i) About the API

• The Login API that I used is the API provided by DhiWise. I built the request in the DhiWise API Runner.
• The POST request goes this way: “https://nodedemo.dhiwise.co/device/auth/login.”
• The header contains “Content-Type”:” application/json”.
• The body requires a username and password that should match the login time.
• There are three ways to add an API in DhiWise.

-Import Postman Collection.

-Importing a cURL

-Create requests

I built the request in the API runner, and it looked like this:

(ii) Integration in DhiWise

Click on the log-in button from the view to integrate the API. To integrate API on the click event, select “Create Action” -> “API Integration.”

Step 1:

-Step 1 involves selecting the API to integrate and handling the request. Select the login API.

-To provide the request body with the input value, select the key username and password to be bound to the username and password present in the view.

- Once done, select “View” from the dropdown.

- This opens with the view, which allows the view selection to bind. Next, click on the username input field from it.

-Repeat the same steps for the password.

STEP 2:

-Step 2 is all about handling the API response.

-This API does not require handling any response; let’s move further toward handling the actions performed on Success and Failure.

STEP 3:

-Step 3 is managing the actions performed on success and failure events.

-To navigate to the Dashboard page on successful login, select navigation from the dropdown and select the Dashboard page to navigate.

-To display an alert message to the user onFailure, select Show Alert from the dropdown, select Alert Dialog and enter the error message.

That’s it !! My logIn API is successfully integrated with DhiWise in just 2 minutes!

2. Square APIs:

Square’s developer documentation provides a list of open APIs, extremely easy to integrate. For example, I made use of the following Square APIs:

• API for order creation.
• API for location creation.
• API for batch retrieval of orders.

API for order creation and location creation.
(i) About the API

• API: “https://developer.squareup.com/explorer/square/orders-api/create-order.” I tested the API in the playground provided by Square.
• The request type is “POST.” The headers are as shown below.
• Generate an access token by Signing In. After that, under Applications, one needs to create a new application. Then, open the newly created application and use the Sandbox access token as an access token in the playground.
• After that, generate an idempotency key.
• Now, the location field is compulsory here. Therefore, I generated a unique location Id and Customer ID (Not required compulsorily).
• Generating location is accessible from Square’s playground. I generated an access token and entered a valid address.
• This generated location ID from the response is used in order creation API.
• Similarly, I created customers.
• After adding the required fields, my request would look like this:

• This request was built using cURL by DhiWise API Runner.

API for batch retrieval of orders.

(i) About the API

• I used the “ bulk retrieval of orders “https://developer.squareup.com/explorer/square_2022-07-20/orders-api/batch-retrieve-orders” API.
• The request type is “POST.” The headers are as shown below.
• Just generate a token, as mentioned above, enter the created order ids and location ID and test the API in the API Runner of DhiWise by importing the cURL.
• The response returned by this API is as shown below
• Here “orders” is an array of objects containing individual order details.
• In DhiWise, the supported response types are object, the object of an object, an array of objects, an array of strings, and an array of integers. Therefore, the response returned by this API can be easily integrated with DhiWise.
• Also, DhiWise supports one-level nesting while integration, meaning orders as an array of objects can be bound to the list. Still, at the same time, line_items contained in it cannot be attached. Therefore, I did manual coding to wrap it once my code was generated.

(ii) Integration in DhiWise

• As I require to display the data on a successful Login, this API is required to be integrated with the Lifecycle method OnMount(). To do the same, follow the steps mentioned below:

STEP 1:

- Select your API from this list.

- Since this API does not require handling requests, switch to handle the response of the API.

- Since the key that I want to bind is in an array of objects format. I must ensure that the component I am binding needs to be a list/grid/slider.

-My component was a list component as per my requirement.

STEP 2:

To bind the response to the view, select the response key and bind that to the View.

- Since this, the keys that I want to bind are in the format of an array of objects. Therefore, I must ensure that the component I am binding needs to be a list/grid/slider.

-My component was a list component as per my requirement.

-Select the key to bind the response to the view.

-Here, the key that I want to bind with the view is “id,” which is present in Orders.

-Select View from the dropdown. This opens up the brilliant editor to select the view to bind.

STEP 3:

It’s not a compulsion in DhiWise to handle actions on success and failure; therefore, I skipped it.

For generating PDF, I have used the jsPDF package provided by npm (Node Package Manager).

I am done with the Dashboard with just a few lines of manual code.

The task that could have taken almost a week to develop from scratch was done in a day using DhiWise! So switch to “Smart Development” today!

More Insights:

GitHub Code: https://github.com/DhiWise/Order-Management-Portal.git

Conclusion:

That’s a wrap. Suppose you followed the steps mentioned above. You should be able to get an order management app up and running in no time. Also, it’s not just about Order Management; you can also create sales, inventory, and staff management utilities using the DhiWise-Square integration.

Till then, you can keep following me for more such insights.

About Me:

I’m a Software Developer from DhiWise👩‍💻. It’s a pro-code dev tool that generates production-ready code for trending technologies/frameworks. Sign up for free!🤘You can find me on LinkedIn to stay updated with the latest tech updates of DhiWise. 😃