---
title: "Gift card Drop-in integration"
description: "Add gift cards to your Drop-in integration"
url: "https://docs.adyen.com/payment-methods/gift-cards/web-drop-in"
source_url: "https://docs.adyen.com/payment-methods/gift-cards/web-drop-in.md"
canonical: "https://docs.adyen.com/payment-methods/gift-cards/web-drop-in"
last_modified: "2023-03-10T14:23:00+01:00"
language: "en"
---

# Gift card Drop-in integration

Add gift cards to your Drop-in integration

[View source](/payment-methods/gift-cards/web-drop-in.md)

![](/user/pages/reuse/development-resources/additional-info-resources/postman-logo-vertical-orange-2021.svg?decoding=auto\&fetchpriority=auto)  [Postman collection](https://www.postman.com/adyendev/workspace/adyen-apis/collection/25716737-46ad970e-dc9e-4246-bac2-769c6083e7b5)

**Implementation examples**\
![](/user/pages/reuse/development-resources/additional-info-resources/java-original.svg?decoding=auto\&fetchpriority=auto)  [Java Spring](https://github.com/adyen-examples/adyen-java-spring-online-payments/tree/main/giftcard-example)\
![](/user/pages/reuse/development-resources/additional-info-resources/dot-net-original.svg?decoding=auto\&fetchpriority=auto)  [.NET](https://github.com/adyen-examples/adyen-dotnet-online-payments/tree/main/giftcard-example)\
![](/user/pages/reuse/development-resources/additional-info-resources/nodejs-original.svg?decoding=auto\&fetchpriority=auto)  [Node.js](https://github.com/adyen-examples/adyen-node-online-payments/tree/main/giftcard-example)

This page explains how to add gift cards to your existing Web Drop-in integration.

## Requirements

| Requirement          | Description                                                                                                                                                             |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Integration type** | Make sure that you have built your [Drop-in integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in%2F%3Ftarget%3D_blank). |
| **Setup steps**      | Before you begin, in [your Customer Area](/payment-methods/add-payment-methods) add each gift card variant that you want to test.                                       |

## Import resources for v6

If you are using Web Drop-in v6, import the resources you need for gift cards:

```js
import { AdyenCheckout, Giftcard} from '@adyen/adyen-web'
```

## API reference

You do not 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:

* [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions): This is the default with [Drop-in v5.0.0](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in) or later.
* [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments): If you implemented an [additional use case](/online-payments/build-your-integration).

## Drop-in configuration

Select which endpoint you are integrating:

### Tab: `/sessions`

This is the default with [Drop-in v5.0.0](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in) or later.

Drop-in handles partial payments automatically.

### Tab: `/payments`

If you implemented an [additional use case](/online-payments/build-your-integration).

### Required configuration

Add configuration to let the shopper make a [partial payment](/online-payments/partial-payments) with a gift card and pay the rest with another payment method.

Add the following events to your gift cards configuration object:

| Event name                              | Description                                                                                                                                                                                                                |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onBalanceCheck(resolve, reject, data)` | Called when the shopper pays with gift card. Make a [/paymentMethods/balance](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods/balance) request.                                                    |
| `onOrderRequest(resolve, reject, data)` | Called when the gift card balance is less than the transaction amount. Make an [/orders](https://docs.adyen.com/api-explorer/Checkout/latest/post/orders) request including: - `amount` - `merchantAccount` - `reference`. |
| `onOrderCancel(order)`                  | Called when the shopper cancels the gift card transaction. Make an [/orders/cancel](https://docs.adyen.com/api-explorer/Checkout/latest/post/orders/cancel) request.                                                       |

The following example shows how to configure Drop-in:

**Gift card configuration**

```js

const configuration = {
   // ... Other configuration.
   onOrderCancel: function(Order) {
       // Remove the remaining amount value and currency from the order
       // Make a POST /orders/cancel request
       // Call the update function and pass the order
       checkout.update(order);
   }
   const giftcardConfiguration = {
       onBalanceCheck: function (resolve, reject, data) {
           // Make a POST /paymentMethods/balance request
           resolve(BalanceResponse);
           // The balance is used to trigger the onOrderRequest function.
       }
       onOrderRequest: function (resolve, reject, data) {
           // Make a POST /orders request
           // Create an order for the total transaction amount
           resolve(OrderResponse);
       }
};
```

Include the `giftcardConfiguration` object when [creating a configuration object](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in#configure):

**AdyenCheckout configuration**

```js
const configuration = {
  // ...  other required configuration
  paymentMethodsConfiguration: {
    giftcard: giftcardConfiguration
  }
};
```

Pass the Drop-in configuration object when creating your instance of `AdyenCheckout`:

```js
const checkout = await AdyenCheckout(configuration);
```

## Show the payment result

Use the  [resultCode](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#responses-200-resultCode) from the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) response to show the payment result to your shopper.

You will also receive the outcome of the payment asynchronously in a [webhook](/development-resources/webhooks). 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](/online-payments/capture#manual-capture), you also need to [capture](/online-payments/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` ](/development-resources/refusal-reasons)field. | Inform the shopper that there was an error processing their payment.                                                                                                                                   |
| **Refused**    | The payment was refused. For more information, check the [`refusalReason` ](/development-resources/refusal-reasons)field.                                 | Ask the shopper to try the payment again using a different payment method.                                                                                                                             |

### (Optional) Customize logos

You can specify a custom logo for a gift card brand when [creating a configuration object](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in#configure). This example shows a custom icon for Plastix:

**AdyenCheckout configuration**

```js
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](/development-resources/test-cards-and-credentials/alternative-payment-method-credentials#gift-cards) 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](https://ca-test.adyen.com/) > **Transactions** > **Payments**.

When you are ready to go live:

1. Onboard with a gift card provider and add the [gift card variant](/payment-methods/gift-cards#supported-gift-cards) to your [live Customer Area](https://ca-live.adyen.com/).

2. Contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) to add the gift card to your [live Customer Area](https://ca-live.adyen.com/).

   You can test end-to-end scenarios in your live environment using real gift card details and small amounts.

## See also

* [Web Drop-in integration guide](/online-payments/drop-in-web)
* [Webhooks](/development-resources/webhooks)
* [API Explorer](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/overview)
