--- 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)