Gift Card Component

The Gift Card Component renders the available gift cards in your payment form, and securely collects any sensitive gift card information, so it doesn't touch your server.

Before you begin

This page explains how to add to your existing Web Components integration. The Web Components integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Components integration guide.

Before starting your integration make sure you:

1. Make sure that you have set up your back end implementation, and created an instance of AdyenCheckout.
2. Onboard with a gift card provider, then contact our Support Team to add the gift card to your test Customer Area.

Show the available gift cards in your payment form

You must have a separate Gift Card Component for each type of gift card you want to accept. We are using a Givex gift card in the examples below.

To show a Gift Card Component in your payment form:

1. Specify in your /paymentMethods request:

   • countryCode: Country where the type of gift card is supported, for example, NL.
   • amount.currency: Any supported currency, for example EUR.

   The available gift cards are objects in the paymentMethods array.

   Pass the full response to the paymentMethodsResponse object when creating an instance of AdyenCheckout.

2. Add the Gift Card Component
   a. Create a DOM element for the type of gift card, for example Givex, and place it where you want to render the gift card form:

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

   b. Create an instance of the Gift Card Component specifying the type of gift card and mount it:

   const giftCard = checkout.create('giftcard', {
     type: 'givex'
     pinRequired: true // Default value - change to false if your gift card does not require a PIN.
     // Optional configuration
     styles: {
             error: {
                 color: 'red'
             }
         }
   }).mount('#givex-container');

Optional Component configuration

You can include optional configuration fields for your Gift Card Component:

You can also customize your shopper's experience when specific events occur. Make sure you have configured the event handlers and functions.

Make a payment

When the shopper selects to pay, the Component calls the onChange event, which contains a state.data.

1. If state.isValid is true, collect the state.data and pass this to your server.

2. From your server, make a /payments request, specifying:

   • paymentMethod: The state.data.paymentMethod from the onChange event.

{
  "amount":{
    "currency":"EUR",
    "value":1000
  },
  "reference":"YOUR_ORDER_NUMBER",
  "{hint:state.data.paymentMethod from onChange}paymentMethod{/hint}": {
    "type": "givex",
    "encryptedCardNumber": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedSecurityCode": "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
  },
  "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
}

{
  "pspReference": "851572424333194G",
  "resultCode": "Authorised",
  "merchantReference": "YOUR_ORDER_NUMBER"
}

curl https://checkout-test.adyen.com/v53/payments \
-H "X-API-key: YOUR_X-API-KEY" \
-H "Content-Type: application/json" \
-d '{
  "amount":{
    "currency":"EUR",
    "value":1000
  },
  "reference":"YOUR_ORDER_NUMBER",
  "{hint:state.data.paymentMethod from onChange}paymentMethod{/hint}": {
    "type": "givex",
    "encryptedCardNumber": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedSecurityCode": "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
  },
  "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
}'

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"

response = adyen.checkout.payments({
  :amount => {
    :currency => "EUR",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :paymentMethod => {
    :type => "givex",
    :encryptedCardNumber => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    :encryptedSecurityCode => "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
  },
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
})

// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "EUR",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "givex",
    "encryptedCardNumber" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedSecurityCode" => "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
  ),
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($params);

# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen.Adyen()
adyen.client.xapikey = 'YOUR_X-API-KEY'

result = adyen.checkout.payments({
  "amount": {
    "currency": "EUR",
    "value": 1000
  },
  "reference":"YOUR_ORDER_NUMBER",
  "paymentMethod": {
    "type": "givex",
    "encryptedCardNumber": "adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..",
    "encryptedSecurityCode": "adyenjs_0_1_24$XUyMJyHebrra/TpSda9fha978+.."
  },
  "merchantAccount": "YOUR_MERCHANT_ACCOUNT"
})

// Set your X-API-KEY with the API key from the Customer Area.
const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
config.apiKey = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "EUR", value: 1000 },
    paymentMethod: {
        type: 'givex',
        encryptedSecurityCode: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        encryptedCardNumber: "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
    },
    reference: "YOUR_ORDER_NUMBER",
    merchantAccount: config.merchantAccount,
}).then(res => res);

The /payments response contains:

• pspReference: Our unique identifier for the transaction.
• resultCode: Use this to present the payment result to your shopper.
• merchantReference: The reference from the /payments request.

Present the payment result

Use the resultCode from the /payments response to present the payment result to your shopper.
You will also receive the outcome of the payment asynchronously in a webhook notification. For gift card payments, you can receive the following resultCode values:

Test and go live

Before making live gift card payments:

1. Test your integration using our test card numbers.
   You can check the status of test payments in your test Customer Area > Transactions > Payments.
2. Contact our Support Team to add the gift card to your live Customer Area.

See also