I am trying to create a payment form that allows a child care center to accept payments that the customer specifies by typing in a number. I have gotten the basic form to work with the basic setup found on their Github, so I am setup and running correctly. My problem is that I am a front end designer and cannot figure out how to get other fields to push through with the card info. I have all of the required files to run the Square Connect API. Here is the relevant code I have so far...
My Form (in payment.php):
<script>
var sqPaymentForm = new SqPaymentForm({
// Replace this value with your application's ID (available from the merchant dashboard).
// If you're just testing things out, replace this with your _Sandbox_ application ID,
// which is also available there.
applicationId: 'MY-APPLICATION-ID',
inputClass: 'sq-input',
cardNumber: {
elementId: 'sq-card-number',
placeholder: "0000 0000 0000 0000"
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: 'Postal Code'
},
// inputStyles: [
// // Because this object provides no value for mediaMaxWidth or mediaMinWidth,
// // these styles apply for screens of all sizes, unless overridden by another
// // input style below.
// {
// fontSize: '14px',
// padding: '3px'
// },
// // These styles are applied to inputs ONLY when the screen width is 400px
// // or smaller. Note that because it doesn't specify a value for padding,
// // the padding value in the previous object is preserved.
// {
// mediaMaxWidth: '400px',
// fontSize: '18px',
// }
// ],
callbacks: {
cardNonceResponseReceived: function(errors, nonce, cardData) {
if (errors) {
var errorDiv = document.getElementById('errors');
errorDiv.innerHTML = "";
errors.forEach(function(error) {
var p = document.createElement('p');
p.innerHTML = error.message;
errorDiv.appendChild(p);
});
} else {
// This alert is for debugging purposes only.
alert('Nonce received! ' + nonce + ' ' + JSON.stringify(cardData));
// Assign the value of the nonce to a hidden form element
var nonceField = document.getElementById('card-nonce');
nonceField.value = nonce;
// Submit the form
document.getElementById('form').submit();
}
},
unsupportedBrowserDetected: function() {
// Alert the buyer that their browser is not supported
}
}
});
function submitButtonClick(event) {
event.preventDefault();
sqPaymentForm.requestCardNonce();
}
</script>
<form class="uk-form billing-form uk-flex uk-flex-wrap" id="form" novalidate action="/payment-portal/process-card.php" method="post">
<div class="personal-info uk-flex uk-flex-column">
<div class="billing-form-group uk-flex uk-flex-space-between">
<input type="text" placeholder="First Name" id="given_name" class="uk-form-large" style="margin-bottom: 1rem;">
<input type="text" placeholder="Last Name" id="family_name" class="uk-form-large">
</div>
<input type="text" placeholder="Billing Address" class="uk-form-large">
<input type="text" placeholder="City" class="uk-form-large">
<select class="uk-form-large">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<input type="text" placeholder="Zip Code" id="sq-postal-code" class="uk-form-large">
</div>
<div class="card-info uk-flex uk-flex-column">
<input type="text" placeholder="Phone Number" class="uk-form-large">
<input type="email" placeholder="Email" class="uk-form-large">
<div class="billing-form-group uk-flex uk-flex-space-between">
<input type="text" placeholder="Amount" class="uk-form-large">
<select class="uk-form-large">
<option>Visa</option>
<option>Mastercard</option>
<option>Discover</option>
<option>American Express</option>
</select>
</div>
<input type="text" placeholder="Card Number" id="sq-card-number" class="uk-form-large">
<div class="exp-cvv-group uk-flex uk-flex-space-between">
<input type="text" placeholder="MM/YY" id="sq-expiration-date" class="uk-form-large">
<input type="text" placeholder="CVV" id="sq-cvv" class="uk-form-large uk-form-width-mini">
</div>
</div>
<input type="hidden" id="card-nonce" name="nonce">
<div class="billing-button-container">
<input type="submit" onclick="submitButtonClick(event)" id="card-nonce-submit" class="button mid-blue-button billing-button"></div>
</div>
</form>
<div id="errors"></div>
My Processor (in process-card.php):
<?php
require 'vendor/autoload.php';
# Replace these values. You probably want to start with your Sandbox credentials
# to start: https://docs.connect.squareup.com/articles/using-sandbox/
# The ID of the business location to associate processed payments with.
# If you're testing things out, use a sandbox location ID.
#
# See [Retrieve your business's locations](https://docs.connect.squareup.com/articles/getting-started/#retrievemerchantprofile)
# for an easy way to get your business's location IDs. If the php page is not rendering, make sure
# that error reporting is turned on. If you get an error that says, "Fatal error: Uncaught
# exception 'SquareConnect\ApiException' with message 'API call to
# https://connect.squareup.com/v2/locations failed, but for an unknown reason." This is most likely
# caused by blocked outgoing ports in the web server. Contact host provider for resolution.
$location_id = 'MY-LOCATION-ID';
# The access token to use in all Connect API requests. Use your *sandbox* access
# token if you're just testing things out.
$access_token = 'MY-ACCESS-TOKEN';
# Helps ensure this code has been reached via form submission
if ($_SERVER['REQUEST_METHOD'] != 'POST') {
error_log("Received a non-POST request");
echo "Request not allowed";
http_response_code(405);
return;
}
# Fail if the card form didn't send a value for `nonce` to the server
$nonce = $_POST['nonce'];
if (is_null($nonce)) {
echo "Invalid card data";
http_response_code(422);
return;
}
$transaction_api = new \SquareConnect\Api\TransactionApi();
$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" => 100,
"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()
);
# The SDK throws an exception if a Connect endpoint responds with anything besides
# a 200-level HTTP code. This block catches any exceptions that occur from the request.
try {
$result = $transaction_api->charge($access_token, $location_id, $request_body);
echo "<pre>";
print_r($result);
echo "</pre>";
} catch (\SquareConnect\ApiException $e) {
echo "Caught exception!<br/>";
print_r("<strong>Response body:</strong><br/>");
echo "<pre>"; var_dump($e->getResponseBody()); echo "</pre>";
echo "<br/><strong>Response headers:</strong><br/>";
echo "<pre>"; var_dump($e->getResponseHeaders()); echo "</pre>";
}
Please note that I have replaced all references to MY-anything to the correct values for my application. (As I said, I have the basic form working.)
I am not looking for anyone to write all of the code per se, but can someone point me in the direction of how to get started. I need to get the customer information to push through with the payment with maybe a note to list the child(ren). I know that I will have to add the form field to incorporate the note, but I don't even know how to make the name work, so I need to get that down first, then I can figure out the rest. My other thing is I need to know how to add the amount field that the parent can put in how much they want to pay. I can see the part in process-card.php here:
"amount_money" => array (
"amount" => 100,
"currency" => "USD"
),
I am not sure if that is just saying what the minimum amount to charge is, but it looks like it is only charging $1.00 every time no matter what. I know it is not connected to the form field, but I am not sure how to connect it.
I have read the documentation here and here, but most of this is Greek to me. If someone could help me get the custom amount working, I think I could figure out the rest. Let me know if I need to provide any additional information.
A couple things
In your process-card.php
it might be easier to get your locations from the API each time instead of hard coding them in (if you only plan on having one location)
$location_api = new \SquareConnect\Api\LocationApi();
$location_id = $location_api->listLocations($access_token)->getLocations()[0]->getId();
At a high level, the credit card nonce is passed in a form along with all the other named variables in the form. I've edited your code to pass through more information and display it on the other side.
`
<script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
<script>
var sqPaymentForm = new SqPaymentForm({
// Replace this value with your application's ID (available from the merchant dashboard).
// If you're just testing things out, replace this with your _Sandbox_ application ID,
// which is also available there.
applicationId: 'XXXXX',
inputClass: 'sq-input',
cardNumber: {
elementId: 'sq-card-number',
placeholder: "0000 0000 0000 0000"
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: 'Postal Code'
},
// inputStyles: [
// // Because this object provides no value for mediaMaxWidth or mediaMinWidth,
// // these styles apply for screens of all sizes, unless overridden by another
// // input style below.
// {
// fontSize: '14px',
// padding: '3px'
// },
// // These styles are applied to inputs ONLY when the screen width is 400px
// // or smaller. Note that because it doesn't specify a value for padding,
// // the padding value in the previous object is preserved.
// {
// mediaMaxWidth: '400px',
// fontSize: '18px',
// }
// ],
callbacks: {
cardNonceResponseReceived: function(errors, nonce, cardData) {
if (errors) {
var errorDiv = document.getElementById('errors');
errorDiv.innerHTML = "";
errors.forEach(function(error) {
var p = document.createElement('p');
p.innerHTML = error.message;
errorDiv.appendChild(p);
});
} else {
// This alert is for debugging purposes only.
alert('Nonce received! ' + nonce + ' ' + JSON.stringify(cardData));
// Assign the value of the nonce to a hidden form element
var nonceField = document.getElementById('card-nonce');
nonceField.value = nonce;
// Submit the form
document.getElementById('form').submit();
}
},
unsupportedBrowserDetected: function() {
// Alert the buyer that their browser is not supported
}
}
});
function submitButtonClick(event) {
event.preventDefault();
sqPaymentForm.requestCardNonce();
}
</script>
<form class="uk-form billing-form uk-flex uk-flex-wrap" id="form" novalidate action="/payment-portal/process-card.php" method="post">
<div class="personal-info uk-flex uk-flex-column">
<div class="billing-form-group uk-flex uk-flex-space-between">
<input type="text" placeholder="First Name" id="given_name" class="uk-form-large" style="margin-bottom: 1rem;">
<input type="text" placeholder="Last Name" id="family_name" class="uk-form-large">
</div>
<input type="text" placeholder="Billing Address" class="uk-form-large">
<input type="text" placeholder="City" class="uk-form-large">
<select class="uk-form-large">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<input type="text" placeholder="Zip Code" id="sq-postal-code" class="uk-form-large">
</div>
<div class="card-info uk-flex uk-flex-column">
<input name="phone" type="text" placeholder="Phone Number" class="uk-form-large">
<input name="email" type="email" placeholder="Email" class="uk-form-large">
<div class="billing-form-group uk-flex uk-flex-space-between">
<input name="amount" type="text" placeholder="Amount" class="uk-form-large">
<select class="uk-form-large">
<option>Visa</option>
<option>Mastercard</option>
<option>Discover</option>
<option>American Express</option>
</select>
</div>
<input type="text" placeholder="Card Number" id="sq-card-number" value="4111111111111111" class="uk-form-large">
<div class="exp-cvv-group uk-flex uk-flex-space-between">
<input type="text" placeholder="MM/YY" value="0121" id="sq-expiration-date" class="uk-form-large">
<input type="text" placeholder="CVV" id="sq-cvv" class="uk-form-large uk-form-width-mini">
</div>
</div>
<input type="hidden" id="card-nonce" name="nonce">
<div class="billing-button-container">
<input type="submit" onclick="submitButtonClick(event)" id="card-nonce-submit" class="button mid-blue-button billing-button">
</div>
</div>
</form>
<div id="errors"></div>
<?php
include 'vendor/autoload.php';
$access_token = 'XXXXXX';
echo'<pre>';
var_dump($_POST);
echo '</pre>';
$location_api = new \SquareConnect\Api\LocationApi();
$location_id = $location_api->listLocations($access_token)->getLocations()[0]->getId();
# Helps ensure this code has been reached via form submission
if ($_SERVER['REQUEST_METHOD'] != 'POST') {
error_log("Received a non-POST request");
echo "Request not allowed";
http_response_code(405);
return;
}
# Fail if the card form didn't send a value for `nonce` to the server
$nonce = $_POST['nonce'];
if (is_null($nonce)) {
echo "Invalid card data";
http_response_code(422);
return;
}
$transaction_api = new \SquareConnect\Api\TransactionApi();
$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" => $_POST['amount']*100,
"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()
);
# The SDK throws an exception if a Connect endpoint responds with anything besides
# a 200-level HTTP code. This block catches any exceptions that occur from the request.
try {
$result = $transaction_api->charge($access_token, $location_id, $request_body);
echo "<pre>";
print_r($result);
echo "</pre>";
} catch (\SquareConnect\ApiException $e) {
echo "Caught exception!<br/>";
print_r("<strong>Response body:</strong><br/>");
echo "<pre>"; var_dump($e->getResponseBody()); echo "</pre>";
echo "<br/><strong>Response headers:</strong><br/>";
echo "<pre>"; var_dump($e->getResponseHeaders()); echo "</pre>";
}