Square Payment Gateway Integration in Laravel 12 (2026) Step-by-Step Guide

  • 17-03-2026
  • 91
  • Laravel 11
  • Haresh Chauhan

Square Payment Gateway Integration in Laravel; In this post, we will integrate Square payment gateway in our Laravel application. Square is a popular payment processing platform widely used in the USA that allows businesses to accept payments online and offline securely.

To integrate Square payment gateway into a Laravel application, you need to create a Square Developer account and obtain Application ID, Access Token, and Location ID from the Square dashboard.

Square provides powerful APIs that allow developers to process payments, manage customers, and handle transactions efficiently. Integrating Square into Laravel enables secure and scalable payment solutions.

Below, I will explain step-by-step how to integrate Square Payment Gateway into a Laravel 12 application:

Step 1. Install Square SDK

Install Square PHP SDK in your Laravel project using Composer:

composer require square/square

Step 2. Configure Square Credentials

Add Square API credentials to your .env file:

SQUARE_APP_ID=your_app_id
SQUARE_ACCESS_TOKEN=your_access_token
SQUARE_LOCATION_ID=your_location_id

Step 3. Make Routes

Create routes in your web.php file:

use App\Http\Controllers\SquareController;

Route::get('square', [SquareController::class, 'index']);
Route::post('square-payment', [SquareController::class, 'payment'])->name('square.payment');

Step 4. Create Controller

Create SquareController using artisan command:

php artisan make:controller SquareController

Add the following code in your controller:

app\Http\Controllers\SquareController.php 
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Square\SquareClient;
use Square\Environment;
use Square\Models\CreatePaymentRequest;
use Ramsey\Uuid\Uuid;

class SquareController extends Controller
{
    public function index()
    {
        return view('square');
    }

    public function payment(Request $request)
    {
        $client = new SquareClient([
            'accessToken' => env('SQUARE_ACCESS_TOKEN'),
            'environment' => Environment::SANDBOX,
        ]);

        $payments_api = $client->getPaymentsApi();

        $request_body = new CreatePaymentRequest(
            $request->nonce,
            uniqid(),
            [
                'amount_money' => [
                    'amount' => 1000,
                    'currency' => 'USD'
                ]
            ]
        );

        try {
            $result = $payments_api->createPayment($request_body);

            if ($result->isSuccess()) {
                return redirect()->back()->with('success', 'Payment Successful');
            } else {
                return redirect()->back()->with('error', 'Payment Failed');
            }

        } catch (Exception $e) {
            return redirect()->back()->with('error', $e->getMessage());
        }
    }
}

Step 5. Create Blade File (Card + Cash App Payment)

resources/views/square.blade.php 
<!DOCTYPE html>
<html>
<head>
    <title>Square Payment</title>
    <script src="https://sandbox.web.squarecdn.com/v1/square.js"></script>
</head>

<body>

<h3>Pay with Card / Cash App</h3>

<form id="payment-form" method="POST" action="{{ route('square.payment') }}">
    @csrf

    <div id="card-container"></div>

    <div id="cash-app-pay"></div>

    <input type="hidden" name="nonce" id="nonce">

    <button id="card-button" type="button">Pay with Card</button>
</form>

@if(session('success'))
    <p style="color:green">{{ session('success') }}</p>
@endif

@if(session('error'))
    <p style="color:red">{{ session('error') }}</p>
@endif


<script>
const appId = "{{ env('SQUARE_APP_ID') }}";
const locationId = "{{ env('SQUARE_LOCATION_ID') }}";

async function initializeSquare() {
    const payments = Square.payments(appId, locationId);

    // CARD PAYMENT
    const card = await payments.card();
    await card.attach('#card-container');

    document.getElementById('card-button').addEventListener('click', async () => {
        const result = await card.tokenize();

        if (result.status === 'OK') {
            document.getElementById('nonce').value = result.token;
            document.getElementById('payment-form').submit();
        } else {
            alert('Card payment failed');
        }
    });

    // CASH APP PAYMENT
    const cashAppPay = await payments.cashAppPay({
        redirectURL: window.location.href,
    });

    await cashAppPay.attach('#cash-app-pay');
}

initializeSquare();
</script>

</body>
</html>

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :