Lovable and Square integration: Step-by-Step Guide 2025

 

Adding Square Dependency to package.json

 

Since Lovable doesn’t have a terminal, you need to manually add the Square SDK dependency in your project's package.json file. Open your package.json file and add the following dependency inside the "dependencies" section. Replace ^VERSION with the appropriate version number you intend to use.

{
  "dependencies": {
    "@square/square": "^VERSION"
    // ...other dependencies
  }
}

 

Creating a Square Integration File

 

Next, create a new TypeScript file in your project called squareIntegration.ts. This file will initialize the Square client with your API key and environment. Add the following code into squareIntegration.ts:

import { Client, Environment } from '@square/square';

const squareClient = new Client({
  environment: Environment.Sandbox, // Change to Environment.Production for live usage.
  accessToken: 'YOURSQUAREACCESS_TOKEN'
});

export default squareClient;

Replace YOURSQUAREACCESS_TOKEN with your actual Square access token.

 

Creating a Configuration File for Environment Variables

 

To avoid hardcoding sensitive data, create a new file named config.ts in your project. This file will store your Square configuration and other environment variables. Add the following code:

export const SQUAREACCESSTOKEN = 'YOURSQUAREACCESS_TOKEN';
export const SQUARE_ENVIRONMENT = 'sandbox'; // Use 'production' when ready for live transactions.

Now update your squareIntegration.ts file to use values from the configuration file. Replace its content with:

import { Client, Environment } from '@square/square';
import { SQUAREACCESSTOKEN, SQUARE_ENVIRONMENT } from './config';

const squareClient = new Client({
  environment: SQUARE_ENVIRONMENT === 'production' ? Environment.Production : Environment.Sandbox,
  accessToken: SQUAREACCESSTOKEN,
});

export default squareClient;

 

Implementing a Payment Processing Function

 

Create a new function in your project to process payments using Square. You can place this function in an appropriate file where you handle payments (for example, in a file named paymentService.ts). Insert the following code:

import squareClient from './squareIntegration';

async function processSquarePayment(amount: number, sourceId: string): Promise {
  try {
    const response = await squareClient.paymentsApi.createPayment({
      sourceId: sourceId,
      idempotencyKey: new Date().getTime().toString(), // Replace this with a proper idempotency key generator for production.
      amountMoney: {
        amount: amount, // amount in smallest currency unit (e.g., cents)
        currency: 'USD'
      }
    });
    return response;
  } catch (error) {
    console.error('Square Payment Error:', error);
    throw error;
  }
}

export { processSquarePayment };

 

Integrating the Payment Function in Your Application

 

Identify the part of your Lovable project that handles payment requests or API calls. In that file or module (for example, paymentRoute.ts if you use a routing structure), import the processSquarePayment function and add a new endpoint to handle payment requests. Insert the following code snippet:

import express from 'express';
import { processSquarePayment } from './paymentService';

const router = express.Router();

router.post('/pay', async (req, res) => {
  const { amount, sourceId } = req.body;
  try {
    const paymentResponse = await processSquarePayment(amount, sourceId);
    res.json(paymentResponse);
  } catch (error) {
    res.status(500).json({ error: 'Square payment processing failed.' });
  }
});

export default router;

Ensure that this route is properly imported and used in your main application file so that payment requests are routed to this handler.

 

Testing the Square Integration

 

After integrating the code, simulate a payment by sending a POST request to the /pay endpoint with a JSON body containing amount (as an integer representing cents) and sourceId (tokenized payment source). For example, if your Lovable project allows you to trigger test actions, use that feature to simulate the payment flow. Check the application logs and responses for any errors.

 

Final Review and Deployment

 

Review all the changes you have made:

• Ensure that the dependency for the Square SDK is correctly listed in your package.json.
• Confirm that the configuration file (config.ts) contains the correct API token and environment setting.
• Verify that the Square integration code in squareIntegration.ts is imported and used in your payment processing function.
• Double-check that your payment endpoint (e.g., /pay) is properly hooked into your application’s routing system.

Once complete, your Lovable project is integrated with Square and can process payments using the provided functions.