Code doesn't work anymore

luenib1 — Wed, 19 Aug 2020 02:47:18 GMT

Hi,

In September 2019 my code to create a credit card and link it to a client was working very well. Now it's not. It looks like Square changed more than a few thing on their end. What do i do now?

Thanks

Re: Code doesn't work anymore

isabelle — Wed, 19 Aug 2020 15:22:58 GMT

Hey @luenib1

Not quite sure what you mean. Please reply with a bit more information so we can look into this for you.

Re: Code doesn't work anymore

luenib — Wed, 19 Aug 2020 23:51:01 GMT

Thank, Isabelle_, for your reply.

This is more or less the relevant code I'm using:

THE FORM

<html>
   <head>
      <script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
      <script type="text/javascript" src="../square/sqform.js"></script>
      <link rel="stylesheet" type="text/css" href="../square/sqpaymentform.css">
   </head>
   <body>
      <div id="container">
         <div id="sq-ccbox">
            <form method="post" id="nonce-form" name="theform" novalidate action="add-card.php">
               <p class="form-header">CREDIT CARD</p>
               <table class="registration-table">
                  <tbody>
                     <tr>
                        <th>Credit card number:</th>
                        <td>
                           <input type="hidden" name="id" value="<?php echo $_GET['id'] ?>"/>
                           <div id="sq-card-number"></div>
                           <p style="font-weight: normal">Last four: <?php echo substr($row_ccinfo->creditcard_number, -4); ?></p>
                        </td>
                     </tr>
                     <tr>
                        <th>Name on Card:</th>
                        <td>
                           <input type="text" name="creditcard_nameoncard"
                              value="<?php echo $row_ccinfo->creditcard_nameoncard ?>">
                        </td>
                     </tr>
                     <tr>
                        <th>CC identification number:</th>
                        <td>
                           <div id="sq-cvv"></div>
                        </td>
                     </tr>
                     <tr>
                        <th>Expiration:</th>
                        <td>
                           <div id="sq-expiration-date"></div>
                        </td>
                     </tr>
                     <tr>
                        <th>Billing Address Line1:</th>
                        <td>
                           <input type="text" name="billing_address1"
                              value="<?php echo $row_billingaddress->billing_address1 ?>">
                        </td>
                     </tr>
                     <tr>
                        <th>Billing Address Line2:</th>
                        <td>
                           <input type="text" name="billing_address2"
                              value="<?php echo $row_billingaddress->billing_address2 ?>">
                        </td>
                     </tr>
                     <tr>
                        <th>City:</th>
                        <td>
                           <input type="text" name="billing_city"
                              value="<?php echo $row_billingaddress->billing_city ?>">
                        </td>
                     </tr>
                     <tr>
                        <th>Zip Code:</th>
                        <td>
                           <div id="sq-postal-code"></div>
                        </td>
                     </tr>
                     <tr>
                        <td colspan="2">
                           <button name="updatecard" id="sq-creditcard" class="btn toright"
                              onclick="requestCardNonce(event)">
                           Update Card
                           </button>
                        </td>
                     </tr>
                  </tbody>
               </table>
               <input type="hidden" id="card-nonce" name="nonce">
            </form>
         </div>
      </div>
   </body>
</html>

add-card.php

<?php
   // Configure OAuth2 access token for authorization: oauth2
   $accessToken = 'production-token-here';
   
   $nonce = $_POST['nonce'];
   
   \SquareConnect\Configuration::getDefaultConfiguration()->setAccessToken($accessToken);
   $customersApi = new \SquareConnect\Api\CustomersApi();
   $cardholderName = $_POST['creditcard_nameoncard'];
   $squareCustomerId = getSquareCustomerId($link, $accountId);
   
   $companyId = 'company-id';
   
   
   $body = new \SquareConnect\Model\CreateCustomerCardRequest();
   $body->setCardNonce($nonce);
   
   if (is_null($nonce)) {
       echo "Invalid card data";
       http_response_code(422);
       return;
   }
   
   try {
       $result = $customersApi->createCustomerCard(
           $squareCustomerId,
           array(
               "card_nonce" => $nonce,
               "cardholder_name" => $cardholderName
           )
       );
       $customerCard = $result->getCard();
   
   } catch (Exception $e) {
       echo "<pre>";
       echo "Customer Id : $squareCustomerId<br>";
       echo "Exception when calling CustomersApi->createCustomerCard: ", $e->getMessage(), PHP_EOL;
       echo "</pre>";
   }
   
   ?>
<html>
   <head>
      <script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
      <script type="text/javascript" src="../square/sqform.js"></script>
   </head>
   <body>
      <div id="container">
         <div id="content">
            <p class="form-header">THE CREDIT CARD HAS BEED REGISTRATED</p>
            <table class="registration-table">
               <tbody>
                  <tr>
                     <th>Credit card number:</th>
                     <td>
                        <p>**** **** **** <?php echo $creditCardInfo['creditcard_number']; ?></p>
                     </td>
                  </tr>
                  <tr>
                     <th>Name on Card:</th>
                     <td>
                        <p><?php echo $_POST['creditcard_nameoncard']; ?></p>
                     </td>
                  </tr>
                  <tr>
                     <th>Card type:</th>
                     <td>
                        <p><?php echo $creditCardInfo['creditcard_type']; ?></p>
                     </td>
                  </tr>
                  <tr>
                     <th>Expiration:</th>
                     <td>
                        <p><?php echo $creditCardInfo['creditcard_expmonth'] ?>
                           /<?php echo $creditCardInfo['creditcard_expyear'] ?>
                        </p>
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      </div>
   </body>
</html>

sqform.js

// Set the application ID
let applicationId = "production-application-id";

// Set the location ID
let locationId = "production-location-id";

// 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
let paymentForm = new SqPaymentForm({
	// Initialize the payment form elements
	applicationId: applicationId,
	locationId: locationId,
	inputClass: 'sq-input',

	// Initialize the credit card placeholders
	cardNumber: {
		elementId: 'sq-card-number',
		placeholder: '**** **** **** ****'
	},
	cvv: {
		elementId: 'sq-cvv',
		placeholder: 'CVV'
	},
	expirationDate: {
		elementId: 'sq-expiration-date',
		placeholder: 'MM/YY'
	},
	postalCode: {
		elementId: 'sq-postal-code'
	},

	// SqPaymentForm callback functions
	callbacks: {
		// callback function: cardNonceResponseReceived
		// Triggered when: SqPaymentForm completes a card nonce request
		cardNonceResponseReceived: function (errors, nonce, cardData) {
			if (nonce) {
				// 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':
					/* HANDLE AS DESIRED */
					break;
				case 'errorClassRemoved':
					/* HANDLE AS DESIRED */
					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 */
		}
	}
});

I think that's it.

I coded all these about a year ago and worked very well until a few days ago. I haven't changed anything since then.

I appreciate any help provided.

Re: Code doesn't work anymore

ashc — Thu, 20 Aug 2020 11:32:26 GMT

Hey @luenib,

This is a more in depth question that would probably need to be asked to our API team directly.

You can request to email them here from our Contact Page.

The thread will remain open if there's other developers who can answer it but this is too in-depth for us folks on the Community who don't have API knowledge.

Re: Code doesn't work anymore

luenib1 — Sat, 22 Aug 2020 02:59:17 GMT

Thanks.

This is all the code I had to change to make it work:

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(); },

thread Re: Code doesn't work anymore in Archived Discussions (Read Only)

Code doesn't work anymore

Re: Code doesn't work anymore

Re: Code doesn't work anymore

Re: Code doesn't work anymore

Re: Code doesn't work anymore