# Issue with nonce/source\_id while trying to store card to a customer

**URL:** <https://developer.squareup.com/forums/t/issue-with-nonce-source-id-while-trying-to-store-card-to-a-customer/17146>\
**Category:** Questions\
**Tags:** customers-api, cards-api\
**Created:** [June 11, 2024, 7:58am UTC](https://developer.squareup.com/forums/t/issue-with-nonce-source-id-while-trying-to-store-card-to-a-customer/17146 "2024-06-11T07:58:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ph4nt0m](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/ph4nt0m/32/6519_2.png) [@ph4nt0m](https://developer.squareup.com/forums/u/ph4nt0m)\
**Post date:** [June 11, 2024, 7:58am UTC](https://developer.squareup.com/forums/t/issue-with-nonce-source-id-while-trying-to-store-card-to-a-customer/17146/1 "2024-06-11T07:58:47Z")

</div>

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.

```auto
<script type="text/javascript" src="https://web.squarecdn.com/v1/square.js"></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) {
        event.preventDefault();
        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.');
        }
    });
});
</script>

                    
<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>
</form>
                    
                    
                    
<?php
                    
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');
    $card->setCustomerId('Q59NEW831WS7HJVC1KMRWJP9V0');
                    
  
    $body = new \Square\Models\CreateCardRequest(
    $idempotencyKey,
    $cardNonce,
    $card
);
    
    $api_response = $client->getCardsApi()->createCard($body);

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

}
                    
                    
?> 

```

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![Square-Dev-AI](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/square-dev-ai/32/2513_2.png) [@Square-Dev-AI](https://developer.squareup.com/forums/u/Square-Dev-AI)\
**Post date:** [June 11, 2024, 7:59am UTC](https://developer.squareup.com/forums/t/issue-with-nonce-source-id-while-trying-to-store-card-to-a-customer/17146/2 "2024-06-11T07:59:10Z")

</div>

👋 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:

> **[Sandbox Payments](https://developer.squareup.com/docs/devtools/sandbox/payments)**
>
> A quick reference of test credit card numbers and payment tokens you can use to make test payments with the Square Sandbox.

> **[Cards API Overview](https://developer.squareup.com/docs/cards-api)**
>
> Use the Cards API to save a credit or debit card for a customer.

> **Additional Documentation**
>
> [Card Payments](https://developer.squareup.com/docs/payments-api/take-payments/card-payments)  
> [Create a Card on File from a Payment ID](https://developer.squareup.com/docs/cards-api/walkthrough/card-from-payment-id)  
> [Cards API Overview](https://developer.squareup.com/docs/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.

---

<div class="post-metadata">

**Author:** ![Bryan-Square](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/bryan-square/32/38_2.png) [@Bryan-Square](https://developer.squareup.com/forums/u/Bryan-Square)\
**Post date:** [June 11, 2024, 4:14pm UTC](https://developer.squareup.com/forums/t/issue-with-nonce-source-id-while-trying-to-store-card-to-a-customer/17146/3 "2024-06-11T16:14:25Z")

</div>

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 `https://web.squarecdn.com/v1/square.js` to `https://sandbox.web.squarecdn.com/v1/square.js`. 🙂

---

<div class="post-metadata">

**Author:** ![ph4nt0m](https://sea1.discourse-cdn.com/square/forums/user_avatar/developer.squareup.com/ph4nt0m/32/6519_2.png) [@ph4nt0m](https://developer.squareup.com/forums/u/ph4nt0m)\
**Post date:** [June 11, 2024, 9:17pm UTC](https://developer.squareup.com/forums/t/issue-with-nonce-source-id-while-trying-to-store-card-to-a-customer/17146/4 "2024-06-11T21:17:06Z")

</div>

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