Are you looking for test card numbers?

Would you like to contact support?

Payment-method icon

Gift card Component

Add gift card payments to an existing Components integration.

To see example code for implementing gift cards, refer to our GitHub

On this page, you can find additional configuration for adding gift cards to your Components integration.

Before you begin

This page assumes you've already:

API reference

You don't need to send additional fields for gift cards. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="giftcard-container"></div>

Step 2: Create an instance of the Component

Select your integration:

Supported in Components v5.18.0 and later.

Required configuration

Add configuration to let the shopper pay part of the amount with a gift card and the rest with another payment method.

Add the following event to your gift cards configuration object:

Event name Description
onOrderCreated(orderStatus) Called when the gift card balance is less than the transaction amount. Returns an orderStatus object that includes the remaining amount to be paid.
Use your existing instance of AdyenCheckout to create components for payment methods that the shopper can use to pay the remaining amount.

The following example shows how to configure the gift card Component to allow the shopper to pay the remaining amount using iDEAL or a card.

Gift card configuration 
const giftcardConfiguration = {
    onOrderCreated: function (orderStatus) {
        // Get the remaining amount to be paid from orderStatus.
        console.log(orderStatus.remainingAmount);
        // Use your existing instance of AdyenCheckout to create payment methods components
        // The shopper can use these payment methods to pay the remaining amount
        const idealComponent = checkout.create('ideal').mount('#ideal-container');
        const cardComponent = checkout.create('card').mount('#card-container');
        // Add other payment method components that you want to show to the shopper
    }
};
Example orderStatus object 
{
    "amount": {
        "currency": "EUR",
        "value": 25900
    },
    "expiresAt": "2022-07-12T10:17:19.00Z",
    "orderData": "Ab02b4c0!B...",
    "pspReference": "G34Q5SC8N5PFWR82",
    "reference": "ABC123",
    "remainingAmount": {
        "currency": "EUR",
        "value": 19900
    }
}

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component. Pass the configuration object if you created one:

const giftcardComponent = checkout.create('giftcard', giftcardConfiguration);

Step 3: Mount the Component

Mount the Component only after checking that gift cards is available to the shopper:

giftcardComponent
   .then(() => {
       giftcardComponent.mount("#giftcard-container");
   })
   .catch(e => {
       //gift cards is not available
   });

(Optional) Customize logos

You can specify a custom logo for a gift card brand when creating a configuration object. This example shows a custom icon for Plastix:

AdyenCheckout configuration 
const configuration = {
  // ...  other configuration
  paymentMethodsConfiguration: {
    giftcard: {
                brandsConfiguration: {
                    plastix: {
                        icon: 'https://mymerchant.com/icons/customIcon.svg'
                    }
                }
    }
  }
}

Test and go live

Before making live gift card payments, simulate transactions:

  1. Test your integration using our test card numbers depending on your gift card provider. When testing, you use a simulator that tries to behave and respond in the same way as an end-to-end connection. To simulate a scenario, send one of the following amounts in the test payment request:
    Amount (last three digits) resultCode refusalReason
    100 Authorised
    123 Refused Refused
    124 Refused Not enough balance
    125 Refused Blocked Card
    126 Refused Expired Card
    130 Error Acquirer Error
    134 Refused Invalid Pin
    135 Refused Pin tries exceeded
    For example, send a payment amount with 100 as the last three digits, such as 1.00 or 11.00. This will result in an Authorised transaction.
  2. Check the status of test payments in your test Customer Area > Transactions > Payments.

When you are ready to go live:

  1. Onboard with a gift card provider and add the gift card variant to your live Customer Area.
  2. Contact our Support Team to add the gift card to your live Customer Area.
    You can test end-to-end scenarios in your live environment using real gift card details and small amounts.

See also