Take a Gift Card Payment

Applies to: Web Payments SDK | Gift Cards API

Learn how to take gift card payments in a web client with the Web Payments SDK.

Link to section


You can add a payment method to the application you built using the quickstart project sample in Web Payments SDK Quickstart to integrate the Web Payments SDK into your application.

The following steps add code to the application you created from the quickstart project sample. If you haven't created an application using the quickstart, you need to do so before completing these steps.

A graphic showing the gift card payment method for the Web Payments SDK rendered on a web page.

You can find the complete quickstart example on GitHub.

The following video demonstrates how to build an end-to-end payment flow with the gift card payment method, and shows the code you use to build the flow. For an optimal viewing experience, expand the video window to a desired size or watch the video on YouTube. For a detailed overview of Square gift cards, see the following sections in this topic.

Link to section

1. Attach the GiftCard payment method to the page

The following code attaches the GiftCard method to the page:

  1. Add the following gift card HTML elements to the prerequisite walkthrough form:

    <form id="payment-form"> <!-- Add the below 2 elements --> <div id="gift-card-container"></div> <button id="gift-card-button" type="button">Pay with Gift Card</button> <div id="card-container"></div> <button id="card-button" type="button">Pay $1.00</button> </form> <div id="payment-status-container"></div>
  2. Add an initializeGiftCard function below the initializeCard function in the <script> tag.

    async function initializeGiftCard(payments) { const giftCard = await payments.giftCard(); await giftCard.attach('#gift-card-container'); return giftCard; }
  3. In the DOMContentLoaded eventListener, add the following code after you initialize the GiftCard payment method:

    document.addEventListener('DOMContentLoaded', async function () { // initialize Square.payments and Card payment method. let giftCard; try { giftCard = await initializeGiftCard(payments); } catch (e) { console.error('Initializing Gift Card failed', e); return; } // code for handling tokenization and payments // Checkpoint 2 });

Test the application

  1. Navigate to http://localhost:3000/ in your browser.

    A graphic showing a typical gift card input layout for Web Payments SDK integrations.


    You see the gift card form rendered on your page.

Link to section

2. Get the payment token from the GiftCard payment method

  1. Add the following code after the // Checkpoint 2 in the DOMContentLoaded eventListener function:

    const giftCardButton = document.getElementById('gift-card-button'); giftCardButton.addEventListener('click', async function (event) { await handlePaymentMethodSubmission(event, giftCard); });
  2. Update the handlePaymentMethodSubmission function to disable the giftCardButton when tokenizing and re-enable on a failed payment.

    async function handlePaymentMethodSubmission(event, paymentMethod) { event.preventDefault(); try { // disable the submit button as we await tokenization and make a payment // request. cardButton.disabled = true; giftCardButton.disabled = true; // Add this line. // tokenization and payment code. } catch (e) { cardButton.disabled = false; giftCardButton.disabled = false; // Add this line. // failed tokenization and payment handling } }

Test the application

  1. Navigate to http://localhost:3000/ in your browser.

  2. Choose the Pay with Gift Card button.

    An animation showing the buyer gift card payment experience in the Web Payments SDK Quickstart.


    Using the test gift card number (7783 3200 0000 0000), you can complete a payment.

Link to section

See also