# Create card on file without charging the customer via web payment sdk and cards api

**URL:** <https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242>\
**Category:** Questions\
**Tags:** web-payments-sdk, cards-api\
**Created:** [January 17, 2023, 3:31pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242 "2023-01-17T15:31:13Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![snow-scholars-dev](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@snow-scholars-dev](https://developer.squareup.com/forums/u/snow-scholars-dev)\
**Post date:** [January 17, 2023, 3:31pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/1 "2023-01-17T15:31:13Z")

</div>

My goal is to add a card on file to an existing customer, and not charge the card in question in the process.

I’m currently working with the web-payments-sdk embedded into a wix website.

Here’s my code for the card input:

```auto
<head>
<style>
  // all of my styling params, not relevant for this question
</style>
<script src="https://web.squarecdn.com/v1/square.js"></script>
</head>
<body>
  <form id="payment-form">
    <div id="payment-status-container"></div>
    <div id="card-container"></div>
    <button id="card-button" type="button">Submit Payment Information</button>
  </form>

  <script type="text/javascript">
    async function main() {
      const payments = Square.payments('{my-application-id}', '{my-location-id}');
      const card = await payments.card();
      await card.attach('#card-container');

      async function eventHandler(event) {
        event.preventDefault();
        const statusContainer = document.getElementById('payment-status-container');

        try {
          const result = await card.tokenize();
          if (result.status === 'OK') {
            window.parent.postMessage(`${result.token}`, "*");
            statusContainer.innerHTML = "Information Successfully Submitted.";
          } else {
            statusContainer.innerHTML = "Information Submission Failed.";
          }
        } catch (e) {
          console.error(e);
          statusContainer.innerHTML = "Information Submission Failed.";
        }
      };

      const cardButton = document.getElementById('card-button');
      cardButton.addEventListener('click', eventHandler);
    }

    main();
  </script>
</body>

```

Then, I create a card for an existing customer using this endpoint :[https://connect.squareup.com/v2/cards](https://connect.squareup.com/v2/cards)

I started my work by using the code from this square tutorial: [https://developer.squareup.com/reference/sdks/web/payments](https://developer.squareup.com/reference/sdks/web/payments)

At the moment, whenever I submit a valid credit card to my payment form, it is charged one dollar. Any help would greatly be appreciated.

Thanks!

---

<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:** [January 17, 2023, 6:50pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/2 "2023-01-17T18:50:21Z")

</div>

That example generates a `source_id` and then sends it to the backend to process the payment with the Payments API. That code lives in the [server.js](https://github.com/square/web-payments-quickstart/blob/main/server.js) file. If you change that `CreatePayment` call to a call to `CreateCard` call you’ll then save the card without charging the customers card. 🙂

---

<div class="post-metadata">

**Author:** ![snow-scholars-dev](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@snow-scholars-dev](https://developer.squareup.com/forums/u/snow-scholars-dev)\
**Post date:** [January 17, 2023, 7:58pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/3 "2023-01-17T19:58:49Z")

</div>

Hi Bryan,

Thanks for the prompt response. Are you suggesting that I change code in the server.js file? I don’t see a `CreatePayment` call in my original script.

Unfortunately, because I’m just using the html shown above for my credit card information form in wix, I’m not directly connected to the web payment sdk repository – I’m just using this tag to get the relevant tools: `<script src="https://web.squarecdn.com/v1/square.js"></script>`, as seen on line 5 above.

Given this information, I’m wondering if your suggestion is still applicable?

Also, as a side note, when I manually create a customer and add a card on file in my square dashboard, the same thing happens – that card gets charged $1. So I’m wondering if this is just something that happens every time a card on file is created?

Thanks for your help, again.

---

<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:** [January 17, 2023, 8:11pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/4 "2023-01-17T20:11:19Z")

</div>

Are you using the official Square Wix integration? If so modifying it to save a card on file would be something that Wix would have to add since that’s the server side functions.

What you are working with is the client side component that’s used to tokenize the card information. That client side JS is the Web Payments SDK. It takes the card information and tokenizes it. With the token that’s returned from the form you then make server side calls to either store the card on file or process the payments. 🙂

---

<div class="post-metadata">

**Author:** ![snow-scholars-dev](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@snow-scholars-dev](https://developer.squareup.com/forums/u/snow-scholars-dev)\
**Post date:** [January 17, 2023, 8:21pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/5 "2023-01-17T20:21:52Z")

</div>

Hi Bryan,

Thanks again for the prompt response. I’m not using the official square Wix integration, because I realize the functionality that I’m requiring goes beyond what Wix offers.

I’m successfully acquiring the card information via the Web Payments SDK, then storing the card via the cards api with the `source_id` set to that card’s token, but that seems to be when I’m incurring the $1 charge on the customer’s card.

Based on my conversations with the general square support team, it seems as though when a new card is added on file for a customer, that $1 charge is submitted, however, once the card is verified, that $1 is refunded to the customer. Is this something that you might be able to verify as well?

Thanks again for your help.

---

<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:** [January 17, 2023, 8:26pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/6 "2023-01-17T20:26:30Z")

</div>

Whats your application ID? 🙂

---

<div class="post-metadata">

**Author:** ![snow-scholars-dev](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@snow-scholars-dev](https://developer.squareup.com/forums/u/snow-scholars-dev)\
**Post date:** [January 17, 2023, 8:28pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/7 "2023-01-17T20:28:08Z")

</div>

sq0idp-4whj71PjA5fpJAtceOApUQ

---

<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:** [January 17, 2023, 8:32pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/8 "2023-01-17T20:32:37Z")

</div>

I don’t see any calls to the Payments API. Do you have a `payment_id` for one of the payments? 🙂

---

<div class="post-metadata">

**Author:** ![snow-scholars-dev](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@snow-scholars-dev](https://developer.squareup.com/forums/u/snow-scholars-dev)\
**Post date:** [January 17, 2023, 8:36pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/9 "2023-01-17T20:36:57Z")

</div>

Correct. I’m not making any calls to the payments API. Just to customers (to create the original customer), then to the cards api to assign the card to the created customer via the `source_id` generated by the `await card.tokenize()` line seen above in my html code block (well, really the script section).

Again, as a summary – I’m not calling the payment API, but the card added to a customer is still being charged $1. The customer that I currently have in my customers database (me) has a card assigned (mine) - I’ve tried doing this through the cards api and directly through the square dashboard, and it’s charged $1 either way.

The customer support team at square suggested that this charge will be refunded. Thoughts?

Thanks for your help.

---

<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:** [January 17, 2023, 8:39pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/10 "2023-01-17T20:39:17Z")

</div>

Are you seeing pending charge on the card statement? If it’s not showing in the Dashboard it’s not a completed payment.

---

<div class="post-metadata">

**Author:** ![snow-scholars-dev](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@snow-scholars-dev](https://developer.squareup.com/forums/u/snow-scholars-dev)\
**Post date:** [January 17, 2023, 8:40pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/11 "2023-01-17T20:40:19Z")

</div>

Correct. I’m seeing a pending charge. I don’t see it in the dashboard.

---

<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:** [January 17, 2023, 8:47pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/12 "2023-01-17T20:47:45Z")

</div>

Okay, that’s on the card company then. Were not actually charging the card but the bank thinks its a pending charge. There isn’t anything that we can do on the Square side to avoid this unfortunately. 🙂

---

<div class="post-metadata">

**Author:** ![snow-scholars-dev](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@snow-scholars-dev](https://developer.squareup.com/forums/u/snow-scholars-dev)\
**Post date:** [January 17, 2023, 9:03pm UTC](https://developer.squareup.com/forums/t/create-card-on-file-without-charging-the-customer-via-web-payment-sdk-and-cards-api/8242/13 "2023-01-17T21:03:13Z")

</div>

Hi Bryan,

Thanks for all of your responses. That makes sense. I’ll monitor the charges and I assume I’ll get a refund.

Your assistance has been very helpful.