Issue with nonce/source_id while trying to store card to a customer

Hi everyone,

I just started digging around the Square API the other day and I am trying to get a very basic setup and understanding of how I can implement what I need into my existing website. I will try to go into as much detail as possible, but any help would be greatly appreciated.

I was able to create customers without any issues, but where I am really struggling is having a form where that customer can enter in their credit card numbers and then have it stored under their Square customer information. The issue that I am having definitely has to do with the nonce/source_id because when I use the sandbox “cnon:card-nonce-ok” the information gets loaded to the customers Square without any issues.

For testing I have been trying to keep all of the code in one page so I will include all of that below.

<script type="text/javascript" src=""></script>
<script type="text/javascript">    
document.addEventListener('DOMContentLoaded', async function() {
    const payments = Square.payments('xxxx', 'xxxx');
    const card = await payments.card();
    await card.attach('#card-container');

    document.getElementById('payment-form').addEventListener('submit', async function(event) {
        const tokenResult = await card.tokenize();
        if (tokenResult.status === 'OK') {
            console.log('Tokenization succeeded, nonce:', tokenResult.token);
            document.getElementById('nonce').value = tokenResult.token;
            this.submit(); // Submit the form with the nonce as part of the request
        } else {
            console.error('Tokenization failed with errors:', tokenResult.errors);
            alert('Failed to tokenize card. Please try again.');

<form id="payment-form" method="post">
    <div id="card-container"></div>
    <input type="text" id="nonce" name="nonce">
    <button id="submitCard" type="submit">Submit Card</button>
use Square\SquareClient;
use Square\Environment;
use Square\Models\CreateCustomerCardRequest;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['nonce'])) {
    $client = new SquareClient([
        'accessToken' => 'xxxx',
        'environment' => Environment::SANDBOX
    $cardNonce = $_POST['nonce'];
    $idempotencyKey = bin2hex(random_bytes(22)); 
    echo $cardNonce;
    echo '<br /><br />';
    $card = new \Square\Models\Card();
    $card->setCardholderName('John Doe');
    $body = new \Square\Models\CreateCardRequest(
    $api_response = $client->getCardsApi()->createCard($body);

    if ($api_response->isSuccess()) {
        $result = $api_response->getResult();
    } else {
        $errors = $api_response->getErrors();


If I submit the form as it is right now with that code then I receive the error below, but like I mentioned before if I replace $cardNonce with “cnon:card-nonce-ok” then everything works as intended.

Array ( [0] => Square\Models\Error Object ( [category:Square\Models\Error:private] => INVALID_REQUEST_ERROR [code:Square\Models\Error:private] => INVALID_CARD_DATA [detail:Square\Models\Error:private] => Invalid card data. [field:Square\Models\Error:private] => source_id ) )

I assume that I am doing something wrong when generating/making a token for the nonce, but I have spent days on this now and I am completely stumped at the moment. Hoping someone here is able to help point me in the right direction.

:wave: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

Card Payments
Create a Card on File from a Payment ID
Cards API Overview

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

The reason your getting the error is because you have the Web Payments SDK configured to look at production and your server is trying to call sandbox. You’ll need to change the configured JS library from to :slightly_smiling_face:

1 Like

Thank you! I figured it would be something simple that I was missing… lol