Are you looking to enhance your business's online payment capabilities? In today's digital age, a secure and efficient payment gateway is crucial for businesses to process online transactions seamlessly.
One powerful solution is the integration of Square Payment API with Mendix, a low-code development platform. This integration enables businesses to accept credit card payments, leverage various payment methods, and ensure a secure payment processing experience for their customers.
In this blog, we'll be able to explore the benefits of Square Payment gateway integration with Mendix and guide you through the steps to implement it successfully.
What is a Payment gateway?
Businesses need payment gateways to securely process and accept online payments from customers. Payment gateways provide a secure way for businesses to collect payments electronically, including credit card and debit card transactions, as well as other forms of digital payments such as e-wallets, mobile payments, and bank transfers.
Without a payment gateway, businesses would have to process payments, which can be time-consuming and error-prone manually. Moreover, without a secure payment gateway, there is a risk of fraud and data breaches, which can damage the business's reputation and put customers' sensitive information at risk.
Businesses can benefit from secure payment processing, fraud detection and prevention, multiple payment options, and seamless integration with their website or mobile app by using a payment gateway. This enables businesses to provide a better customer experience, increase sales, and grow their revenue while ensuring the security and privacy of their customer's data.
What is a Square?
Square is a financial services platform developed by Block, Inc. It is aimed at small and medium-sized businesses, allowing them to accept credit card payments and use phones or tablets as payment registers for a point-of-sale system. Square payment offers different payment methods, such as digital invoices, checkout links, or manually entered card information.
Why Square payment gateway integration with Mendix?
A Square Payment Gateway integration with Mendix can allow users to make payments using credit or debit cards. This integration would typically integrate with the Square API to handle the payment processing, including the authorization, capture, and refund of payments. Users can enter their payment details directly into the Mendix application, which securely transmits the payment information to Square for processing.
What do we need?
In this blog, I will explain the steps of integrating Square with the Mendix app to achieve Square payments. These simple steps help you to achieve easier.
Step 1: Create Square Sandbox Account:
1. Create a new Square Sandbox account using the below link; sign signing signingSign up for Square (squareup.com).
2. After entering all the details on the signup page, click on confirm button.
3. Enter any business name for your square sandbox account.
4. Create a new application to work with a square sandbox account, select all the business needs shown on the page, and click continue.
5. Finally, select the application preference as Myself on the page. Then you will get the Sandbox access token and default Location ID on the developer dashboard page.
6. Open the link Developer APIs: Payments, Orders, Customers - Square (squareup.com) and sign in to the Square developer dashboard with your credentials.
7. Click on the Open Button in your application to see the sandbox access token and location id as the page looks like below.
8. Save the Sandbox access token and location id for future reference.
Step 2: How can this be implemented in POSTMAN?
1. Open the following link Postman (squareup.com) to get the Postman collection of Square API.
2. Click on the Run in Postman button. It will redirect the Postman browser; here, we can import the Postman collection of squares.
3. Set up the Postman environment using the steps shown in the Postman (squareup.com).
Test With Postman:
Create Customer:
Location: https://connect.squareupsandbox.com/v2/customers
Content-Type: ‘text/plain.’
Authorization: Bearer {Access Token}
4. After setup the environment, call an API Create Customer POST method as shown below,
5. Clicking the Send Button will create a new customer for the Square sandbox account; the response body looks like the one below.
Note: As shown in the above process, you can also create orders, make payments for the orders, create invoices, and create checkout payments using the square mail carrier collection.
Step 3: Implementing Square Payment APIs Using Mendix:
1. Create an entity in the Configuration domain model with the attributes Access token and Location id in your Mendix application.
2. Create a configuration page using the Configuration entity, as shown below.
3. Add this page to the navigation menu list by creating an object using the configuration entity.
4. Run the application, open the configuration page, and save the sandbox access token and location id.
5. After saving the access token and location id page looks like as shown below.
3.1. Create a Customer Using Mendix:
1. For creating a new customer, first, we need to create a JSON Structure in the application. Copy the JSON body from the following URL, https://drive.google.com/file/d/15vaU2MJe90wxDD5VENs5UOP5dc2_AdPy/view?usp=share_link
2. Create a JSON Structure and named as JSON_CreateCustomer.
3. After creating a JSON Structure, we need to create an import mapping by using the JSON Structure.
4. Create a customer edit page to enter the customer details manually.
5. Add a Create customer button in the customer edit page and call a microflow for that button to create a customer by creating a call REST activity for the POST method as follows.
6. Add the Retrieve object activity to retrieve configuration details and pass these details in HTTP headers in the POST method.
7. The entire Create Customer microflow looks like the below.
8. The Implementation of the call REST activity POST method for Creating customers is shown below steps.
General:
HTTP Headers:
Request:
9. Copy the request body from the following URL, https://drive.google.com/file/d/15vaU2MJe90wxDD5VENs5UOP5dc2_AdPy/view?usp=share_link and paste it in the request body.
Response:
10. After setup the call REST activity, create a customer overview page to show the customer details and add a show page activity in the microflow to show the customer details.
3.2. Create a Catalog Menu Items:
1. Copy the JSON structure from the following URL: https://drive.google.com/file/d/15vaU2MJe90wxDD5VENs5UOP5dc2_AdPy/view?usp=share_link
2. Create a JSON Structure and name it JSON_UpsertCatalogObject in your application; after creating a JSON structure, create an import mapping for the JSON Structure.
3. Create a page as shown below to enter the catalog menu items using the Menuitemdata entity.
4. Add a Create Catalog button on the page and call a microflow for this button to create catalog menu items by passing the call REST activity POST method.
5. Then create a microflow to create catalog menu items like the one below.
6. In the call REST activity, you must pass an idempotency key in the request body, so create an idempotency key using the random () function shown in the above microflow.
7. The implementation of the call REST activity POST method for creating catalog items is shown below.
General:
HTTP Headers:
Request:
8. Copy the Request Body from the following URL, https://drive.google.com/file/d/15vaU2MJe90wxDD5VENs5UOP5dc2_AdPy/view?usp=share_link, and past it in the request body.
Response:
9. After creating the call REST activity, call this microflow for the Create catalog button in the catalog menu item data creation page.
10. Clicking the Create catalog button will create menu item data in the square sandbox.
11. Create a Catalog menu item data page to show the menu items and create orders for the menu items.
12. Add a list view on the page and select the data source as Microflow.
13. Create a microflow to get the catalog menu item data stored in the square sandbox account using the call REST activity.
14. Retrieving the Catalog menu items microflow looks like the picture below.
15. Set up the call REST Activity POST method as shown in the pictures below.
General:
HTTP Headers:
Request:
Response:
16. Copy the JSON structure to retrieve catalog menu items from the following URL, https://drive.google.com/file/d/15vaU2MJe90wxDD5VENs5UOP5dc2_AdPy/view?usp=share_link
17. Add an import mapping for JSON structure to the response body.
18. Using this, you can get the catalog menu data from the square sandbox.
19. Add Data view in the Catalog menu item data page, select data source as listen to the widget, and select the list view.
20. Create a show page button named Create Order to create an order, see the order details, and name the page Orders_overview.
21. Design the page as it looks in the following picture to create orders for the catalog items.
22. Run the application and see the catalog menu item page. It looks like the below picture.
23. Now, You can Create orders for the catalog menu items.
3.3. Create Orders for the catalog menu items:
1. Create an order overview page as looked at below.
2. The confirm order page looks like the below picture in the browser.
3. On the above page, call a microflow for confirm order button to create the order for catalog menu items using the call REST activity POST method.
4. Copy the JSON structure from the following link, https://drive.google.com/file/d/15vaU2MJe90wxDD5VENs5UOP5dc2_AdPy/view?usp=share_link
5. Create a new JSON structure named JSON_CreateOrder and create an import mapping named IMM_CreateOrder for the JSON Structure.
6. Create a microflow for the Confirm Order button as looked at below,
7. The Implementation of the call REST activity POST method is shown in the below steps.
General:
HTTP Headers:
Request:
8. Copy the request body from the following URL, https://drive.google.com/file/d/15vaU2MJe90wxDD5VENs5UOP5dc2_AdPy/view?usp=share_link, and paste it into the Request body of the POST method.
Response:
9. After completing the microflow, call this microflow for Confirm Order Button,
10. Then, it will create an order for the menu items.
11. Design a page showing order details as below and create a payment for the order.
12. After creating the order, you need to make a payment for the order. Add the above page in the Confirm order microflow to see the confirm order details.
13. Once the order is created, it will go to the payment page to make the payment for the order; in the browser, the payment page looks like in the below picture.
3.4. Create Payment for the Orders:
1. Copy the JSON structure from the following URL, https://drive.google.com/file/d/15vaU2MJe90wxDD5VENs5UOP5dc2_AdPy/view?usp=share_link
2. Create a JSON Structure JSON_CreatePayment and create an Import mapping for the JSON Structure.
3. Create a microflow for the Payment Button to do the orders' payment and named it ACT_CreatePayment.
4. The payment microflow looks like the below.
5. Implement the call REST activity by referring to the following pictures.
General:
HTTP Headers:
Request Body:
6. Copy the Request Body from the following URL, https://drive.google.com/file/d/15vaU2MJe90wxDD5VENs5UOP5dc2_AdPy/view?usp=share_link, and paste it into the Request body of the POST method.
Response:
7. Design a payment confirmation page and add it to the show page activity at the end of the current microflow ACT_CreatePayment.
8. The payment confirmation page looks like the below picture.
9. The payment successful confirmation page looks like the below picture in the browser.
10. Goto the square dashboard (squareupsandbox.com) and the transactions tab to see all the payment details.
11. If you have any queries regarding implementing pages and microflows, download the marketplace module https://marketplace.mendix.com/link/component/209734 square payment gateway.
“To explore more features about the square integration with Mendix Goto, the marketplace module."
"Mendix Marketplace - Square Payment Gateway”
A Square Payment Gateway module can allow users to make payments using credit or debit cards. The module would typically integrate with the Square API to handle the payment processing, including the authorization, capture, and refund of payments. Users can enter their payment details directly into the Mendix application, and the module would securely transmit the payment information to Square for processing.
That’s 'it; you’re done.
I hope it's helpful. If you have any questions or a better idea, please leave them in the comment section. Thanks!
Read More:
To Know more about square payment APIs, refer to the doc Square Developer Documentation (squareup.com)
Consume a REST service:
To learn more about How to consume REST service in Mendix, refer to the doc.
Consume a REST Service | Mendix Documentation
Postman API Platform:
Goto Postman API Platform to learn more about how to work with Postman.
Discover how to revolutionize your payment processing with Square Payment API in Mendix. Dive into the integration steps and unlock the potential of seamless, secure transactions. Read more on our Mendix Marketplace module: https://marketplace.mendix.com/link/component/209734. If you have any questions or ideas to share, please leave them in the comments section. Take advantage of this opportunity to enhance your business's payment capabilities. Get started today!