Dynamic Price set on ecommerce checkout page

I’m trying to put a dynamic price on my ecommerce store.

Question 1:
Do I need a (square) custom input for the amount (I mean does the input have to have specific ID or class)? Or is it actually in the PHP file where the price stuff is being handled?

Question 2:
Do ALL payments I receive be orders? What if I just want to take a payment from a customer on my website and not actually turn it in to an “order”?
Just don’t see why the benefits of all payments I receive being turned in to an “order”

Question 3:
I’m trying to in production mode charge my creditcard to see if it works but I’m getting below error code. Any idea what it means?
Array
(
[0] => Square\Models\Error Object
(
[category:Square\Models\Error:private] => INVALID_REQUEST_ERROR
[code:Square\Models\Error:private] => VALUE_EMPTY
[detail:Square\Models\Error:private] => Field must not be blank
[field:Square\Models\Error:private] => source_id
)
)

The PHP code I have to process the payment is:
require ‘vendorsrc/autoload.php’;

use Square\SquareClient;
use Square\LocationsApi;
use Square\Exceptions\ApiException;
use Square\Http\ApiResponse;
use Square\Models\ListLocationsResponse;
use Square\Environment;

use Square\Models\Money;
use Square\Models\CreatePaymentRequest;

$client = new SquareClient([
    'accessToken' => 'my tokeeeeeeeen',
    'environment' => Environment::PRODUCTION,
]);





$nonce = $_POST['nonce'];

$payments_api = $client->getPaymentsApi();

$money = new Money();
$money->setAmount(5.01);
$money->setCurrency('USD');
$create_payment_request = new CreatePaymentRequest($nonce, uniqid(), $money);



try {
    $locationsApi = $client->getLocationsApi();
//    $apiResponse = $locationsApi->listLocations();
    $apiResponse = $payments_api->createPayment($create_payment_request);

    if ($apiResponse->isSuccess()) {
    	echo "<h1>success</h1>";
        $listLocationsResponse = $apiResponse->getResult();
        $locationsList = $listLocationsResponse->getLocations();
        foreach ($locationsList as $location) {
        print_r($location);
        }
    } else {
        print_r($apiResponse->getErrors());
    }
} catch (ApiException $e) {
    print_r("Recieved error while calling Square: " . $e->getMessage());
}
  1. No; you can see in your code that you set this via $money->setAmount(5.01);, so this can be set at any point in your code (in the PHP backend).
  2. No. Orders essentially allows you to include itemization (items, taxes, discounts, etc). If you simply want a price, but not know what the customer paid for, you do not need to create an order.
  3. source_id needs to be filled. This is typically a nonce from the Square Payment Form that is generated after a customer enters their card information.
1 Like

I truly appreciate your help you really should be labeled as employee of the year.
Is there a way I can send my compliments to your manager or anything??

QUESTION 1:
All my payments are products purchased. I’m worried that if I take a payment and I don’t classify it as an “order”, if customer for some reasons files a dispute with bank, I will have more chances of LOOSING the dispute. Is this true ? or it makes no difference?

QUESTION 2:
Can I apply a tracking number to a payment received by customer that is not classified as an “order”?
I know with paypal, if you do not assign a tracking number to a payment received and customer files a dispute, we will have much more chances of losing the dispute

QUESTION 3:
The nonce is not generating for some reason. Here is part of the html form:

  • button id=“sq-creditcard” class=“sq-button” onclick=“onGetCardNonce(event)”>*
  • input type=“hidden” id=“card-nonce” name=“nonce”>*

And in the PHP:

  • nonce = _POST[‘nonce’];*
  • $payments_api = $client->getPaymentsApi();*
  • $money = new Money();*
  • $money->setAmount(5.01);*
  • $money->setCurrency(‘USD’);*
  • $create_payment_request = new CreatePaymentRequest($nonce, uniqid(), $money);*

I don’t see the word “onGetCardNonce” being referenced in ANY of the JS files. Where is this function supposed to be ?
I do see in my “sqpaymentform.js” file a function that has:

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

But this function name is “requestCardNonce”, and not “onGetCardNonce”. When I replace the function name with “onGetCardNonce” I get javascript error message:
“sqpaymentform.js: Request not authorized”
I seriously do not understand what the world I’m missing here :S

  1. I’m not an expert when it comes to disputes, but I would say the more information you (the merchant) has, the better; so in this case, creating an order may be beneficial since you can say what they actually paid for.
  2. Hm, what is a tracking number? Are you meaning for shipping? If so, you can put a tracking_number inside the CreateOrder request (under fulfillmentsshipping_detailstracking_number).
  3. The onGetCardNonce is a function you would have created. In this case, it appears you’ve named it requestCardNonce, so you can either rename the onclick function parameter to be requestCardNonce, or rename the function itself to onGetCardNonce. As for the “Request not authorized” error, most likely you are not supplying your Square application id, which is required so we know who is wanting to create the nonce.
1 Like

k I’ll try to figure out how to convert the payment in to an order later on. Thank for the advice :slight_smile:

I am 1000% that I use the correct (production) location ID and application ID.
Do you see ANYthing wrong i a ny shape form with this code (sqpaymentform.js) below? :confused:
(I replaced the last 5 characters with stars)

PS: I’m pretty curious to when I’m supposed to use “Production Application Secret”. I have not used this in ANY of my codes.

var paymentForm = new SqPaymentForm({
  applicationId: "sq0idp-vgCGDav9Nw5b5ghGV*****",
  locationId: "LZC6Y0W4*****",
  inputClass: 'sq-input',
  inputStyles: [{
      fontSize: '.9em'
  }],
  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'
  },
  callbacks: {
    /*
     * 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) {
			alert('error: sqpaymentform.js:  ' + 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();
    }
  }
});
/*
 *  -----------------------------------------------------------
 * 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) {		// removed this for now

function onGetCardNonce(event) {

  // Don't submit the form until SqPaymentForm returns with a nonce
  event.preventDefault();

  // Request a nonce from the SqPaymentForm object
  paymentForm.requestCardNonce();
}

Nothing offhand, no. Are you linking the Square Payment Form’s production JS, and not sandbox? Ie using this:

<script type="text/javascript" src="https://js.squareup.com/v2/paymentform">
</script>

(without “sandbox” in the url)?

As for the “Production Application Secret”, that would only come into play if you intended on using OAuth, which is mainly for onboarding other Square merchants to use your application (so that you can make API requests on their behalf).

1 Like

No I’m using production values and want to charge my own credit card as a REAL transaction to test this out properly.

So if you see nothing wrong with the JS code, and it can’t be the HTML right? then what in the world could it be :S
I am 100% sure I am entering the correct production values

Hmmm, yeah that seems really strange. Could you share your full application id here (it’s not a secret, so it’s OK to share :slight_smile: ). I can see if I’m seeing anything in our logs that might give us a clue.

1 Like

Sure Stephen. Sure my Production application id is:
sq0idp-vgCGDav9Nw5b5ghGVt90xQ

Does my html code need any jquery included to work by any chance?

Let me know if there’s ANYTHING else you need :slight_smile:

Nope, JQuery is not needed. Also unfortunately I’m not seeing anything in our logs with this application about the payment form, so somehow the application id is just incorrect. I actually was wrong, it can’t be null or else the payment form wouldn’t load at all, so something else is wrong about it. I can only make it happen if I pass in a sandbox application id but using production (or vice-versa), or if the application id is just flat out incorrect.

In the browser console, are you seeing errors from https://pci-connect...? If so, does it say squareupsandbox or squareup?

1 Like

I tried “https://js.squareup.com/v2/paymentform” and it worked by it totally charged incorrectly :S
You’re awesome sweetie!

I just need to figure out how to collect payment as an order.
I’ll create a new ticket for that…
Thank you so much !!!