Take a Gift Card Payment

Learn how to add a payment method to the application you built using the quickstart project sample in Take a Card Payment with the Web Payments SDK to integrate the Web Payments SDK into your application.

The steps in this topic 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 the following 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.

Link to section

Step 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.

    Success

    You see the gift card form rendered on your page.

Link to section

Step 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.

    Success

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

Link to section

See also