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

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 have not 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 in GitHub.

Step 1: Attach the GiftCard payment method 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:

  2. Add an initializeGiftCard function below the initializeCard function in the <script> tag.

  3. In the DOMContentLoaded eventListener, add the following code after you initialize the GiftCard payment method:

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.

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

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

  2. Update the handlePaymentMethodSubmission function to disable the giftCardButton when tokenizing and re-enable on a failed payment.

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.

Related topics Permalink Get a link to this section

If you need more assistance, contact Developer Support or ask for help in the Developer Forums.