Gift cards

Take a Gift Card payment

Usage

index.html
HTML

<!-- Provide a target element for the Card form -->

<form>

  <div id="gift-card-container"></div>

  <button id="gift-card-button" type="button">Pay with Gift Card</button>

</form>

<!-- Configure the Web Payments SDK and Gift Card payment method -->

<script type="text/javascript">

  async function main() {

    const payments = Square.payments(APPLICATION_ID, LOCATION_ID);

    const giftCard = await payments.giftCard();

    await giftCard.attach('#gift-card');



    async function eventHandler(event) {

      event.preventDefault();



      try {

        const result = await giftCard.tokenize();

        if (result.status === 'OK') {

          console.log(`Payment token is ${result.token}`);

        }

      } catch (e) {

        console.error(e);

      }

    };



    const giftCardButton = document.getElementById('gift-card-button');

    giftCardButton.addEventListener('submit', eventHandler);

  }



  main();

</script>

Payments

Returned by Square.payments(appId, locationId).

Use this object to instantiate Payment methods. Learn more on the Payments page.

Methods

JS
JavaScript

const payments = Square.payments(appId, locationId);

GiftCard

An object with the methods to create and set up a Gift Cards payment.

Created by calling the payments.giftCard() method.

Methods

JS
JavaScript

const payments = Square.payments(appId, locationId);

const giftCard = await payments.giftCard();

await giftCard.attach('#gift-card');

const form = document.querySelector('#gift-card-payment');

form.addEventListener('submit', async (event) => {

   event.preventDefault();

   const result = await giftCard.tokenize(); // the gift card nonce

});