New
Web Payments SDK

Take a Gift Card Payment

Learn how to add a payment method to the application that you built using the quickstart project sample in Take a Card Payment with 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 have not created an application using the quickstart, you need to do so before completing the following steps. web payments : gift card :hero

You can find the complete quickstart example in GitHub.

Step 1: Attach GiftCard to the page Permalink Get a link to this section

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.

    web payments : gift card :image1

Checkpoint 1: You should now see the gift card form rendered on your page.

Step 2: Get the payment token from the GiftCard payment method Permalink Get a link to this section

  1. Add the following code after // 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. web payments : gift card :checkpoint3

Checkpoint 2: Using the test gift card number (7783 3200 0000 0000), you should be able to complete a payment.

Related topics Permalink Get a link to this section