Gift Card Component

Add gift card payments to an existing Components integration.

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:

Make sure that you have set up your back end implementation, and created an instance of AdyenCheckout.
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:

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.

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:

Field	Description
`styles`	Set a style object to customize the card input fields. For a list of supported properties, refer to Styling card input fields.
`pinRequired`	Show or hide the PIN field. The default value is true. Set to false if the gift card type does not have a PIN.

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

Event	Description
`onChange`	Called when the shopper enters data in the card input fields. You can override your main Adyen Checkout configuration.
`onSubmit`	Called when the shopper selects the Pay button. This applies if you use our pre-built Pay button. Refer to the showPayButton configuration in Configuring Components. You can override your main Adyen Checkout configuration.

Make a payment

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

If state.isValid is true, collect the state.data and pass this to your server.
From your server, make a /payments request, specifying:
- paymentMethod: The state.data.paymentMethod from the onChange event.

https://docs.adyen.com/payment-methods/gift-cards/web-component#gift-card-payments-web

request
response

{
  "amount":{
    "currency":"EUR",
    "value":1000
  },
  "reference":"YOUR_ORDER_NUMBER",
  "{hint:state.data.paymentMethod from onChange}paymentMethod{/hint}": {
    "type": "giftcard",
    "brand": "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/v67/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": "giftcard",
    "brand" "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" => "giftcard",
    "brand" => "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": "giftcard",
    "brand" "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: "giftcard",
        brand: "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:

resultCode	Description	Action to take
Authorised	The payment was successful.	Inform the shopper that the payment has been successful. If you are using manual capture, you also need to capture the payment.
Cancelled	The shopper cancelled the payment.	Ask the shopper whether they want to continue with the order, or ask them to select a different payment method.
Error	There was an error when the payment was being processed. For more information, check the `refusalReason` field.	Inform the shopper that there was an error processing their payment.
Refused	The payment was refused. For more information, check the `refusalReason` field.	Ask the shopper to try the payment again using a different payment method.

Test and go live

Before making live gift card payments:

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

Are you looking for test card numbers?

Would you like to contact support?