Create a Square App from Square and get Application ID and Access Token.
Now download the square SDK from Square SDK
Pay with a Credit Card form with test card information:
Card Number: 4532759734545858
CVV: any three non-consecutive numbers
Expiration Date: any month and year in the future
Postal Code: 94103
Let's Start Code Integration In PHP
Here, we’ll need following files to integrate Square Payment Gateway
- index.html
- sqpaymentform.js
- sqpaymentform-basic.css
- payment-process.php
index.html
<html>
<head>
<title>Square Payment Gateway</title>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- link to the SqPaymentForm library -->
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform">
</script>
<!-- link to the local SqPaymentForm initialization -->
<script type="text/javascript" src="sqpaymentform.js">
</script>
<!-- link to the custom styles for SqPaymentForm -->
<link rel="stylesheet" type="text/css" href="sqpaymentform-basic.css">
<script>
document.addEventListener("DOMContentLoaded", function(event) {
if (SqPaymentForm.isSupportedBrowser()) {
paymentForm.build();
paymentForm.recalculateSize();
}
});
</script>
</head>
<body>
<div id="form-container">
<div id="sq-ccbox">
<!--
Be sure to replace the action attribute of the form with the path of
the Transaction API charge endpoint URL you want to POST the nonce to
(for example, "/process-card")
-->
<form id="nonce-form" novalidate action="payment-process.php" method="post">
<fieldset>
<span class="label">Card Number</span>
<div id="sq-card-number"></div>
<div class="third">
<span class="label">Expiration</span>
<div id="sq-expiration-date"></div>
</div>
<div class="third">
<span class="label">CVV</span>
<div id="sq-cvv"></div>
</div>
<div class="third">
<span class="label">Postal</span>
<div id="sq-postal-code"></div>
</div>
</fieldset>
<button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">Pay $1.00</button>
<div id="error"></div>
<!--
After a nonce is generated it will be assigned to this hidden input field.
-->
<input type="hidden" id="amount" name="amount" value="100">
<input type="hidden" id="card-nonce" name="nonce">
</form>
</div> <!-- end #sq-ccbox -->
</div> <!-- end #form-container -->
</body>
</html>
sqpaymentform.js
// Set the application ID
var applicationId = "APPLICATION-ID";
// Set the location ID
var locationId = "LOCATION-ID";
function buildForm(form) {
if (SqPaymentForm.isSupportedBrowser()) {
form.build();
form.recalculateSize();
}
}
function buildForm1() {
if (SqPaymentForm.isSupportedBrowser()) {
var paymentDiv = document.getElementById("form-container");
if (paymentDiv.style.display === "none") {
paymentDiv.style.display = "block";
}
paymentform.build();
paymentform.recalculateSize();
} else {
// Show a "Browser is not supported" message to your buyer
}
}
/*
* function: requestCardNonce
*
* requestCardNonce is triggered when the "Pay with credit card" button is
* clicked
*
* Modifying this function is not required, but can be customized if you
* wish to take additional action when the form button is clicked.
*/
function requestCardNonce(event) {
// Don't submit the form until SqPaymentForm returns with a nonce
event.preventDefault();
// Request a nonce from the SqPaymentForm object
paymentForm.requestCardNonce();
}
// Create and initialize a payment form object
var paymentForm = new SqPaymentForm({
// Initialize the payment form elements
applicationId: applicationId,
locationId: locationId,
inputClass: 'sq-input',
autoBuild: false,
// Customize the CSS for SqPaymentForm iframe elements
inputStyles: [{
fontSize: '16px',
fontFamily: 'Helvetica Neue',
padding: '16px',
color: '#373F4A',
backgroundColor: 'transparent',
lineHeight: '24px',
placeholderColor: '#CCC',
_webkitFontSmoothing: 'antialiased',
_mozOsxFontSmoothing: 'grayscale'
}],
// Initialize Apple Pay placeholder ID
applePay: false,
// Initialize Masterpass placeholder ID
masterpass: false,
// Initialize the credit card placeholders
cardNumber: {
elementId: 'sq-card-number',
placeholder: 'XXXX XXXX XXXX XXXX'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: '12345'
},
// SqPaymentForm callback functions
callbacks: {
/*
* callback function: createPaymentRequest
* Triggered when: a digital wallet payment button is clicked.
* Replace the JSON object declaration with a function that creates
* a JSON object with Digital Wallet payment details
*/
createPaymentRequest: function () {
return {
requestShippingAddress: false,
requestBillingInfo: true,
currencyCode: "USD",
countryCode: "US",
total: {
label: "MERCHANT NAME",
amount: "100",
pending: false
},
lineItems: [
{
label: "Subtotal",
amount: "100",
pending: false
}
]
}
},
/*
* callback function: cardNonceResponseReceived
* Triggered when: SqPaymentForm completes a card nonce request
*/
cardNonceResponseReceived: function (errors, nonce, cardData) {
if (errors) {
// Log errors from nonce generation to the Javascript console
console.log("Encountered errors:");
errors.forEach(function (error) {
console.log(' er= ' + error.message);
alert(error.message);
});
return;
}
// Assign the nonce value to the hidden form field
document.getElementById('card-nonce').value = nonce;
// POST the nonce form to the payment processing page
document.getElementById('nonce-form').submit();
},
/*
* callback function: unsupportedBrowserDetected
* Triggered when: the page loads and an unsupported browser is detected
*/
unsupportedBrowserDetected: function () {
/* PROVIDE FEEDBACK TO SITE VISITORS */
},
/*
* callback function: inputEventReceived
* Triggered when: visitors interact with SqPaymentForm iframe elements.
*/
inputEventReceived: function (inputEvent) {
switch (inputEvent.eventType) {
case 'focusClassAdded':
/* HANDLE AS DESIRED */
break;
case 'focusClassRemoved':
/* HANDLE AS DESIRED */
break;
case 'errorClassAdded':
document.getElementById("error").innerHTML = "Please fix card information errors before continuing.";
break;
case 'errorClassRemoved':
/* HANDLE AS DESIRED */
document.getElementById("error").style.display = "none";
break;
case 'cardBrandChanged':
/* HANDLE AS DESIRED */
break;
case 'postalCodeChanged':
/* HANDLE AS DESIRED */
break;
}
},
/*
* callback function: paymentFormLoaded
* Triggered when: SqPaymentForm is fully loaded
*/
paymentFormLoaded: function () {
/* HANDLE AS DESIRED */
console.log("The form loaded!");
}
}
});
sqpaymentform-basic.css
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body, html {
color: #373F4A;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
}
iframe {
margin: 0;
padding: 0;
border: 0;
}
button {
border: 0;
}
hr {
height: 1px;
border: 0;
background-color: #CCC;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
#form-container {
position: relative;
width: 380px;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
.label {
font-size: 14px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.5;
text-transform: uppercase;
}
.third {
float: left;
width: calc((100% - 32px) / 3);
padding: 0;
margin: 0 16px 16px 0;
}
.third:last-of-type {
margin-right: 0;
}
/* Define how SqPaymentForm iframes should look */
.sq-input {
box-sizing: border-box;
border: 1px solid #E0E2E3;
border-radius: 4px;
outline-offset: -2px;
display: inline-block;
-webkit-transition: border-color .2s ease-in-out, background .2s ease-in-out;
-moz-transition: border-color .2s ease-in-out, background .2s ease-in-out;
-ms-transition: border-color .2s ease-in-out, background .2s ease-in-out;
transition: border-color .2s ease-in-out, background .2s ease-in-out;
}
/* Define how SqPaymentForm iframes should look when they have focus */
.sq-input--focus {
border: 1px solid #4A90E2;
background-color: rgba(74,144,226,0.02);
}
/* Define how SqPaymentForm iframes should look when they contain invalid values */
.sq-input--error {
border: 1px solid #E02F2F;
background-color: rgba(244,47,47,0.02);
}
#sq-card-number {
margin-bottom: 16px;
}
/* Customize the "Pay with Credit Card" button */
.button-credit-card {
width: 100%;
height: 56px;
margin-top: 10px;
background: #4A90E2;
border-radius: 4px;
cursor: pointer;
display: block;
color: #FFFFFF;
font-size: 16px;
line-height: 24px;
font-weight: 700;
letter-spacing: 0;
text-align: center;
-webkit-transition: background .2s ease-in-out;
-moz-transition: background .2s ease-in-out;
-ms-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
}
.button-credit-card:hover {
background-color: #4281CB;
}
#error {
width: 100%;
margin-top: 16px;
font-size: 14px;
color: red;
font-weight: 500;
text-align: center;
opacity: 0.8;
}
payment-process.php
require 'connect-php-sdk-master/vendor/autoload.php';
$access_token = 'ACCESS-TOKEN';
# setup authorization
\SquareConnect\Configuration::getDefaultConfiguration()->setAccessToken($access_token);
# create an instance of the Transaction API class
$transactions_api = new \SquareConnect\Api\TransactionsApi();
$location_id = 'LOCATION-ID';
$nonce = $_POST['nonce'];
$request_body = array (
"card_nonce" => $nonce,
# Monetary amounts are specified in the smallest unit of the applicable currency.
# This amount is in cents. It's also hard-coded for $1.00, which isn't very useful.
"amount_money" => array (
"amount" => (int) $_POST['amount'],
"currency" => "USD"
),
# Every payment you process with the SDK must have a unique idempotency key.
# If you're unsure whether a particular payment succeeded, you can reattempt
# it with the same idempotency key without worrying about double charging
# the buyer.
"idempotency_key" => uniqid()
);
try {
$result = $transactions_api->charge($location_id, $request_body);
// print_r($result);
// echo '
';
if($result['transaction']['id']){
echo 'Payment success!
';
echo "";
}
} catch (\SquareConnect\ApiException $e) {
echo "Exception when calling TransactionApi->charge:";
var_dump($e->getResponseBody());
}
?>