Hello,
I’m trying to migrate from SqPaymentForm to Web Payments, but we want to keep the processing within PHP.
My frontend script looks like this:
const appId = "<?php echo $square_api[$square_mode]['application']; ?>";
const locationId = "<?php echo $square_api[$square_mode]['location']; ?>";
async function initializeCard(payments) {
const card = await payments.card();
await card.attach('#card-container');
return card;
}
async function tokenize(paymentMethod) {
const tokenResult = await paymentMethod.tokenize();
if(tokenResult.status === 'OK') {
return tokenResult.token;
} else {
let errorMessage = 'Tokenization failed with status: ' + $tokenResult.status;
if(tokenResult.errors) {
errorMessage += ' and errors: ' + $JSON.stringify(tokenResult.errors);
}
throw new Error(errorMessage);
}
}
document.addEventListener('DOMContentLoaded', async function () {
if(!window.Square) {
throw new Error('Square.js failed to load properly');
}
let payments;
try {
payments = window.Square.payments(appId, locationId);
} catch {
const statusContainer = document.getElementById(
'payment-status-container'
);
statusContainer.className = 'missing-credentials';
statusContainer.style.visibility = 'visible';
return;
}
let card;
try {
card = await initializeCard(payments);
} catch (e) {
console.error('Initializing Card failed', e);
return;
}
// Checkpoint 2.
async function handlePaymentMethodSubmission(event, paymentMethod) {
event.preventDefault();
try {
// disable the submit button as we await tokenization and make a payment request.
cardButton.disabled = true;
const token = await tokenize(paymentMethod);
**document.getElementById('payment-form').submit();**
} catch (e) {
cardButton.disabled = false;
}
}
const cardButton = document.getElementById('card-button');
cardButton.addEventListener('click', async function(event) {
await handlePaymentMethodSubmission(event, card);
});
});
I’ve taken this from the quickstart example found here: web-payments-quickstart/card.html at main · square/web-payments-quickstart · GitHub
I modified it to remove the actual processing of the payment, but keep the rendering of the credit card fields and tokenization, and added the line in BOLD to submit the form once that has taken place. Afterward, it goes to a PHP processing file that looks like this:
require('../square-php-sdk/vendor/autoload.php');
require($_SERVER['DOCUMENT_ROOT'] . '/include/config-square.php');
use Square\Environment;
use Square\SquareClient;
use Square\Models\Money;
use Square\Models\CreatePaymentRequest;
use Square\Exceptions\ApiException;
use Ramsey\Uuid\Uuid;
if($_POST) {
if($_SERVER['REQUEST_METHOD'] != 'POST') {
error_log('Received a non-POST request');
echo 'Request not allowed';
http_response_code(405);
return;
}
$json = file_get_contents('php://input');
$data = json_decode($json);
$token = $data->token;
$square_client = new SquareClient([
'environment' => $square_mode,
'accessToken' => $square_api[$square_mode]['access'],
'userAgentDetail' => 'sample_php_payment'
]);
$payments_api = $square_client->getPaymentsApi();
$money = new Money();
$money->setAmount(100);
$money->setCurrency($location_info->getCurrency());
try {
$create_payment_request = new CreatePaymentRequest($token, Uuid::uuid4(), $money);
$create_payment_request->setLocationId($location_info->getId());
$response = $payments_api->createPayment($create_payment_request);
if($response->isSuccess()) {
echo json_encode($response->getResult());
} else {
echo json_encode(array('errors' => $response->getErrors()));
}
} catch(ApiException $e) {
echo json_encode(array('errors' => $e));
}
}
The reason we want to keep it in PHP is because we also want to do other things during processing, such as saving data in a database/emailing people/etc… The process appears to work to a point, and it fails at the lines where it attempts to get the token data.
What’s happening is, instead of getting the “token”, I’m instead getting a value in POST that looks like this:
Array ( [nds-pmd] => {"jvqtrgQngn":{"oq":"1920:965:1936:1066:1920:1050","wfi":"flap-153472","oc":"2501pp0s72219oop","fe":"1080k1920 24","qvqgm":"300","jxe":359086,"syi":"snyfr","si":"si,btt,zc4,jroz","sn":"sn,zcrt,btt,jni","us":"s5p1ssn7p6p5189","cy":"Jva32","sg":"{\"zgc\":0,\"gf\":snyfr,\"gr\":snyfr}","sp":"{\"gp\":gehr,\"ap\":gehr}","sf":"gehr","jt":"598oop52s2oo35qp","sz":"87008s68s4196559","vce":"apvc,0,636q5s3r,2,1;fg,0,,0;zz,4p,66,27,svefg_anzr;zzf,3rn,0,n,16q 116,r97 1o09,orq,or6,-9sp6,13654,-130;zzf,3r8,3r8,n,54n 4o4,253o 36sn,9s5,9s8,-25134,297sp,p02;zzf,3rq,3rq,n,68 1ps,6rn 12s6,34n,357,-p9q6,n797,-p6r;zzf,3s7,3s7,n,ABC;zz,103,106,16r,;zzf,2s3,3s6,n,30 55,36q 394p,9n5,9p3,-20o1q,2384q,46q;zzf,3ro,3ro,n,q2 oo,662 33p5,554,56r,-1sn72,1s49q,-38;zzf,3rq,3rq,n,ABC;zzf,3ro,3rn,n,34 o7,r0n 1r05,n09,n0o,-o392,1318p,s3;zp,osp,3r,qp,pneq-ohggba;zz,76,415,32,;zzf,2s0,s63,n,9o 5p,p629 3n3o,271p,29o5,-3ssss,81164,6427;zzf,3rn,3r9,n,ABC;zz,11s4,18q,11r,;gf,0,44so;zzf,152o,2720,32,1oo 2r,911 217p,33n,205r,-6473,noo8,-r;zz,456,27p,o0,;zp,28op,37,q6,pneq-ohggba;gf,0,8738;","ns":"","qvg":"","vp":"","ji":""},"jg":"1.j-669810.1.2.so9leRzhf7PipbuDy780Dt,,.vKLmRdhrVrwdLyx-R_Hp1C5pI3Q-4Tsl6Sa_ysXbrQHNqT-zbysBMscEulxTr68-kSJKCmN-ujOp3ufqYxWaw7A25gcFKk8ivXf7DKcZbEPQ16XBNvtECp2XVJkzhAcaKSTn8czgHpA9MVnFArvGLEhKh8848YXkedaO9nb8ZrrBJFU2X2iVugYV0uDBuf9xIn-Qan5GyGbhfTExbo3-u2vUp33mnusvSrlEiTCmI3HiZKKmCrL1UFIYXsBpvjfp"} )
Given what I’m looking to accomplish here, am I going about it entirely the wrong way? Or, is there a way to get the token out of that “nds-pmd” field? I shyould mention that there is very little documentation related to what I’m trying to do, and this whole process has been very confusing and a little frustrating when it should be such an easy thing to do - I’ve searched around Google and these forums, as well as other places, but nothing seems to be quite what I’m looking for. I’ve already read through the quickstart and PHP SDK documentation and also didn’t find much beyond what I already have in place.
Is there anyone that can assist me? We have donation forms that have gone down since SqPaymentForm was deactivated, and we need to find a solution to get them back up and running.
