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

Questions
,
1

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:

<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

I started my work by using the code from this square tutorial: 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!

2 Likes
2

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 file. If you change that CreatePayment call to a call to CreateCard call you’ll then save the card without charging the customers card. :slightly_smiling_face:

3

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.

4

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. :slightly_smiling_face:

5

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.

1 Like
6

Whats your application ID? :slightly_smiling_face:

7

sq0idp-4whj71PjA5fpJAtceOApUQ

8

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

9

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.

10

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

11

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

12

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. :slightly_smiling_face:

1 Like
13

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.

1 Like