I m trying Square payment gateway using the API code found in the below URL
[http://significanttechno.com/square-payment-gateway-integration-using-php]
However, although i have replicated and tried to test the same code in my server, nothing seems to work.
The form doesn’t allow me to input card details, and even if i add input tags to it and try to submit the form it doesn’t redirect to action page..
The code goes as:
Index.php
<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!");
}
}
});
payment-process.php
<?php
require 'vendor/autoload.php';
$access_token = 'ACCESS-TOKEN';
# setup authorization
SquareConnectConfiguration::getDefaultConfiguration()->setAccessToken($access_token);
# create an instance of the Transaction API class
$transactions_api = new SquareConnectApiTransactionsApi();
$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 "Transation ID: ".$result['transaction']['id']."";
}
} catch (SquareConnectApiException $e) {
echo "Exception when calling TransactionApi->charge:";
var_dump($e->getResponseBody());
}
?>
Please note that i have download the “Square SDK” as mentioned and added location ID and Access token from Square account.
Any help is greatly appreciated..
Advertisement
Answer
My Apologies to Every One who banged their heads at this issue and wasted their valuable time on this.,
Turns out the reason for this silly issue is not having the site secured (i.e., Absence of SSL certification)
I came to know about this after going through square-up documentation..
Anyway, Thanks to all.