{"title":"Gift card Component","category":"default","creationDate":1776961628,"content":"<div class=\"additional-info-block output-inline\">\n<div class=\"additional-info-block__body\"><p><img style=\"width: 25px;\" alt=\"\" src=\"\/user\/pages\/reuse\/development-resources\/additional-info-resources\/postman-logo-vertical-orange-2021.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"https:\/\/www.postman.com\/adyendev\/workspace\/adyen-apis\/collection\/25716737-46ad970e-dc9e-4246-bac2-769c6083e7b5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Postman collection<\/a><\/p><p><strong>Implementation examples<\/strong><br \/><img style=\"width: 25px;\" alt=\"\" src=\"\/user\/pages\/reuse\/development-resources\/additional-info-resources\/java-original.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"https:\/\/github.com\/adyen-examples\/adyen-java-spring-online-payments\/tree\/main\/giftcard-example\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Java Spring<\/a><br \/><img style=\"width: 25px;\" alt=\"\" src=\"\/user\/pages\/reuse\/development-resources\/additional-info-resources\/dot-net-original.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"https:\/\/github.com\/adyen-examples\/adyen-dotnet-online-payments\/tree\/main\/giftcard-example\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">.NET<\/a><br \/><img style=\"width: 25px;\" alt=\"\" src=\"\/user\/pages\/reuse\/development-resources\/additional-info-resources\/nodejs-original.svg?decoding=auto&amp;fetchpriority=auto\" \/>&nbsp;&nbsp;<a href=\"https:\/\/github.com\/adyen-examples\/adyen-node-online-payments\/tree\/main\/giftcard-example\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Node.js<\/a><\/p><\/div><\/div>\n\n<p>This page explains how to add gift cards to your existing Web Components integration.<\/p>\n<h2>Requirements<\/h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Requirement<\/th>\n<th style=\"text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Integration type<\/strong><\/td>\n<td style=\"text-align: left;\">Make sure that you have built your <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Components%2F%3Ftarget%3D_blank\">Components integration<\/a>.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong>Setup steps<\/strong><\/td>\n<td style=\"text-align: left;\">Before you begin, in <a href=\"\/pt\/payment-methods\/add-payment-methods\">your Customer Area<\/a> add each gift card variant that you want to test.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>API reference<\/h2>\n<p>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:<\/p>\n<ul>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/sessions\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/sessions<\/a>&#58; This is the default with <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Components\">Components v5.0.0<\/a> or later.<\/li>\n<li> <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments<\/a>&#58; If you implemented an <a href=\"\/pt\/online-payments\/build-your-integration\">additional use case<\/a>.<\/li>\n<\/ul>\n<h2>Component configuration<\/h2>\n<h3>Step 1: Create a DOM element<\/h3>\n<p>Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:<\/p>\n<pre><code class=\"language-html\"> &lt;div id=\"giftcard-container\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<h3>Step 2: Create an instance of the Component<\/h3>\n<p>Select your integration:<\/p>\n\n<div id=\"tabT7nq2\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;&lt;code&gt;\\\/sessions&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Supported in &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/release-notes#releaseNote=2022-07-12-web-componentsdrop-in-5.18.0\\&quot;&gt;Components v5.18.0&lt;\\\/a&gt; and later.&lt;\\\/p&gt;\\n&lt;h3&gt;Required configuration&lt;\\\/h3&gt;\\n&lt;p&gt;Add configuration to let the shopper pay part of the amount with a gift card and the rest with another payment method.&lt;\\\/p&gt;\\n&lt;p&gt;Add the following event to your gift cards configuration object:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Event name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onOrderCreated(orderStatus)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the gift card balance is less than the transaction amount. Returns an &lt;code&gt;orderStatus&lt;\\\/code&gt; object that includes the remaining amount to be paid. &lt;br&gt; Use your existing instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; to create components for payment methods that the shopper can use to pay the remaining amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;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.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Gift card configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const giftcardConfiguration = {\\\\n    onOrderCreated: function (orderStatus) {\\\\n        \\\\\\\/\\\\\\\/ Get the remaining amount to be paid from orderStatus.\\\\n        console.log(orderStatus.remainingAmount);\\\\n        \\\\\\\/\\\\\\\/ Use your existing instance of AdyenCheckout to create payment methods components\\\\n        \\\\\\\/\\\\\\\/ The shopper can use these payment methods to pay the remaining amount\\\\n        const idealComponent = checkout.create(&#039;ideal&#039;).mount(&#039;#ideal-container&#039;);\\\\n        const cardComponent = checkout.create(&#039;card&#039;).mount(&#039;#card-container&#039;);\\\\n        \\\\\\\/\\\\\\\/ Add other payment method components that you want to show to the shopper\\\\n    }\\\\n};&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example orderStatus object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;amount\\\\\\&quot;: {\\\\n        \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n        \\\\\\&quot;value\\\\\\&quot;: 25900\\\\n    },\\\\n    \\\\\\&quot;expiresAt\\\\\\&quot;: \\\\\\&quot;2022-07-12T10:17:19.00Z\\\\\\&quot;,\\\\n    \\\\\\&quot;orderData\\\\\\&quot;: \\\\\\&quot;Ab02b4c0!B...\\\\\\&quot;,\\\\n    \\\\\\&quot;pspReference\\\\\\&quot;: \\\\\\&quot;G34Q5SC8N5PFWR82\\\\\\&quot;,\\\\n    \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;ABC123\\\\\\&quot;,\\\\n    \\\\\\&quot;remainingAmount\\\\\\&quot;: {\\\\n        \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n        \\\\\\&quot;value\\\\\\&quot;: 19900\\\\n    }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h4&gt;v6.0.0 or later&lt;\\\/h4&gt;\\n&lt;p&gt;Create an instance of the Component, passing:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Optionally, the payment method-specific configuration.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const giftcardComponent = new Giftcard(checkout, giftcardConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#v5-x-x-or-earlier\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;v5.x.x or earlier&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Use the &lt;code&gt;create&lt;\\\/code&gt; method of your &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; instance, in this case &lt;code&gt;checkout&lt;\\\/code&gt;, to create the Component. Pass the configuration object if you created one:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const giftcardComponent = checkout.create(&#039;giftcard&#039;, giftcardConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h3&gt;Step 3: Mount the Component&lt;\\\/h3&gt;\\n&lt;p&gt;Mount the Component only after checking that gift cards is available to the shopper:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;giftcardComponent\\n   .then(() =&amp;gt; {\\n       giftcardComponent.mount(\\&quot;#giftcard-container\\&quot;);\\n   })\\n   .catch(e =&amp;gt; {\\n       \\\/\\\/gift cards is not available\\n   });&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&quot;,&quot;altTitle&quot;:&quot;sessions&quot;,&quot;oldTabId&quot;:&quot;config-sessions_1&quot;,&quot;relation&quot;:&quot;sessions&quot;},{&quot;title&quot;:&quot;&lt;code&gt;\\\/sessions&lt;\\\/code&gt; with your own &lt;b&gt;Pay&lt;\\\/b&gt; button&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Supported in &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/release-notes#releaseNote=2022-08-08-web-componentsdrop-in-5.21.0\\&quot;&gt;Components v5.21.0&lt;\\\/a&gt; and later.&lt;\\\/p&gt;\\n&lt;h3&gt;Required configuration&lt;\\\/h3&gt;\\n&lt;p&gt;When using your own &lt;strong&gt;Pay&lt;\\\/strong&gt; button for gift cards, you must call the &lt;code&gt;balanceCheck()&lt;\\\/code&gt; method from your button implementation. If the balance of the gift card is enough to pay the full payment amount, call the &lt;code&gt;submit()&lt;\\\/code&gt; method to make the payment.&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Method name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;balanceCheck()&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Checks whether the gift card balance is enough to pay the full payment amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;submit()&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Makes a payment after the &lt;code&gt;onRequiringConfirmation&lt;\\\/code&gt; event has been called.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;To know if the gift card balance is enough to pay the full payment amount, add the following events to your gift cards configuration object:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Event name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onOrderCreated(orderStatus)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the gift card balance is less than the transaction amount. Returns an &lt;code&gt;orderStatus&lt;\\\/code&gt; object that includes the remaining amount to be paid. &lt;br&gt; Use your existing instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; to create components for payment methods that the shopper can use to pay the remaining amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onRequiringConfirmation&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the gift card balance is enough to pay the full payment amount. The shopper must then confirm that they want to make the payment with the gift card.  &lt;br&gt; Use the &lt;code&gt;submit()&lt;\\\/code&gt; method to make the payment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;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.&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Gift card configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;const giftcardConfiguration = {\\\\n    onOrderCreated: function (orderStatus) {\\\\n        \\\\\\\/\\\\\\\/ Get the remaining amount to be paid from orderStatus.\\\\n        console.log(orderStatus.remainingAmount);\\\\n        \\\\\\\/\\\\\\\/ Use your existing instance of AdyenCheckout to create payment methods components\\\\n        \\\\\\\/\\\\\\\/ The shopper can use these payment methods to pay the remaining amount\\\\n        const idealComponent = checkout.create(&#039;ideal&#039;).mount(&#039;#ideal-container&#039;);\\\\n        const cardComponent = checkout.create(&#039;card&#039;).mount(&#039;#card-container&#039;);\\\\n        \\\\\\\/\\\\\\\/ Add other payment method components that you want to show to the shopper\\\\n    }\\\\n    onRequiringConfirmation: function() {\\\\n       document.querySelector(&#039;#button-to-confirm&#039;)\\\\n           .addEventListener(&#039;click&#039;, () =&amp;gt; window.giftcard.submit());\\\\n   }\\\\n};&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example orderStatus object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;amount\\\\\\&quot;: {\\\\n        \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n        \\\\\\&quot;value\\\\\\&quot;: 25900\\\\n    },\\\\n    \\\\\\&quot;expiresAt\\\\\\&quot;: \\\\\\&quot;2022-07-12T10:17:19.00Z\\\\\\&quot;,\\\\n    \\\\\\&quot;orderData\\\\\\&quot;: \\\\\\&quot;Ab02b4c0!B...\\\\\\&quot;,\\\\n    \\\\\\&quot;pspReference\\\\\\&quot;: \\\\\\&quot;G34Q5SC8N5PFWR82\\\\\\&quot;,\\\\n    \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;ABC123\\\\\\&quot;,\\\\n    \\\\\\&quot;remainingAmount\\\\\\&quot;: {\\\\n        \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n        \\\\\\&quot;value\\\\\\&quot;: 19900\\\\n    }\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h4&gt;v6.0.0 or later&lt;\\\/h4&gt;\\n&lt;p&gt;Create an instance of the Component, passing:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Optionally, the payment method-specific configuration.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const giftcardComponent = new Giftcard(checkout, giftcardConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#v5-x-x-or-earlier\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;v5.x.x or earlier&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Use the &lt;code&gt;create&lt;\\\/code&gt; method of your &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; instance, in this case &lt;code&gt;checkout&lt;\\\/code&gt;, to create the Component. Pass the configuration object if you created one:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const giftcardComponent = checkout.create(&#039;giftcard&#039;, giftcardConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h3&gt;Step 3: Mount the Component&lt;\\\/h3&gt;\\n&lt;p&gt;Mount the Component only after checking that gift cards are available to the shopper:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Gift card configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;js&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;giftcardComponent\\\\n    .isAvailable()\\\\n    .then(() =&amp;gt; {\\\\n        giftcardComponent.mount(\\\\&amp;quot;#giftcard-container\\\\&amp;quot;);\\\\n    })\\\\n    .catch(e =&amp;gt; {\\\\n        \\\\\\\/\\\\\\\/gift cards is not available\\\\n    });\\\\n\\\\n\\\\ndocument.querySelector(&#039;#button-to-verify&#039;).addEventListener(&#039;click&#039;,  () =&amp;gt; window.giftcard.balanceCheck());&amp;quot;}]\\&quot; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&quot;,&quot;altTitle&quot;:&quot;sessions-custom&quot;,&quot;oldTabId&quot;:&quot;config-sessions_2&quot;,&quot;relation&quot;:&quot;sessions-custom&quot;},{&quot;title&quot;:&quot;&lt;code&gt;\\\/payments&lt;\\\/code&gt;&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;If you implemented the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/payments&lt;\\\/a&gt; request, or integrated Components before &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/release-notes#releaseNote=2022-07-12-web-componentsdrop-in-5.18.0\\&quot;&gt;v5.18.0&lt;\\\/a&gt;.&lt;\\\/p&gt;\\n&lt;h3&gt;Required configuration&lt;\\\/h3&gt;\\n&lt;p&gt;Add the following event to your gift cards configuration object:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Event name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onBalanceCheck(resolve, reject, data)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the shopper pays with gift card. Make a  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/paymentMethods\\\/balance\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/paymentMethods\\\/balance&lt;\\\/a&gt; request.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;h3&gt;Accepting partial payments&lt;\\\/h3&gt;\\n&lt;p&gt;Add configuration to let the shopper make a &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/partial-payments\\&quot;&gt;partial payment&lt;\\\/a&gt; with a gift card and pay the rest with another payment method. Configure the gift card Component to &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/partial-payments#create-an-order\\&quot;&gt;create an order&lt;\\\/a&gt; or &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/partial-payments#cancel-order\\&quot;&gt;cancel an order&lt;\\\/a&gt;. After an order is created, you must &lt;a href=\\&quot;#making-partial-payments\\&quot;&gt;make partial payments&lt;\\\/a&gt; outside of the Component.&lt;\\\/p&gt;\\n&lt;p&gt;To configure the Component to create and cancel orders, add the following events to your gift cards configuration object:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Event name&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;a id=\\&quot;on-order-request\\&quot;&gt;&lt;\\\/a&gt;&lt;code&gt;onOrderRequest(resolve, reject, data)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the gift card balance is less than the transaction amount. Make an  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/orders\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/orders&lt;\\\/a&gt; request with the &lt;code&gt;amount&lt;\\\/code&gt; of the total transaction amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onOrderCancel(order)&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Called when the shopper cancels the gift card transaction. Make an &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/#\\\/CheckoutService\\\/latest\\\/post\\\/orders\\\/cancel\\&quot; class=\\&quot;codeLabel external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;orders\\\/cancel&lt;\\\/a&gt; request.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;p&gt;The following example shows how to configure the gift card Component:&lt;\\\/p&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Gift card configuration&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;js\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;const giftcardConfiguration = {\\\\n    onBalanceCheck: function (resolve, reject, data) {\\\\n        \\\\\\\/\\\\\\\/ Make a POST \\\\\\\/paymentMethods\\\\\\\/balance request\\\\n        resolve(BalanceResponse);\\\\n    }\\\\n    onOrderRequest: function (resolve, reject, data) {\\\\n        \\\\\\\/\\\\\\\/ Make a POST \\\\\\\/orders request\\\\n        \\\\\\\/\\\\\\\/ Create an order for the total transaction amount\\\\n        resolve(OrderResponse);\\\\n    }\\\\n    onOrderCancel: function(Order) {\\\\n        \\\\\\\/\\\\\\\/ Make a POST \\\\\\\/orders\\\\\\\/cancel request\\\\n        \\\\\\\/\\\\\\\/ Call the update function and pass the payment methods response to update the instance of checkout\\\\n        checkout.update(paymentMethodsResponse, amount);\\\\n    }\\\\n};\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;h4&gt;v6.0.0 or later&lt;\\\/h4&gt;\\n&lt;p&gt;Create an instance of the Component, passing:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;Your instance of &lt;code&gt;AdyenCheckout&lt;\\\/code&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;Optionally, the payment method-specific configuration.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const giftcardComponent = new Giftcard(checkout, giftcardConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;div class=\\&quot;accordion-shortcode adl-accordion adl-accordion--max-height-transition\\&quot; data-expand=\\&quot;true\\&quot; data-ignore=\\&quot;anchorjs-link\\&quot;&gt;\\n    \\n    &lt;div class=\\&quot;adl-accordion__item\\&quot; style=\\&quot;\\&quot;&gt;\\n        &lt;div tabindex=\\&quot;0\\&quot; role=\\&quot;item\\&quot; aria-expanded=\\&quot;false\\&quot; class=\\&quot;adl-accordion__header\\&quot;&gt;\\n            &lt;i class=\\&quot;adl-accordion__toggle adl-icon-chevron-down\\&quot;&gt;&lt;\\\/i&gt;\\n            &lt;div class=\\&quot;adl-accordion__title-wrapper\\&quot; data-accordion=\\&quot;#v5-x-x-or-earlier\\&quot;&gt;\\n                                    &lt;h4 class=\\&quot;adl-accordion__title\\&quot;&gt;v5.x.x or earlier&lt;\\\/h4&gt;\\n                            &lt;\\\/div&gt;\\n        &lt;\\\/div&gt;\\n        &lt;div role=\\&quot;region\\&quot; class=\\&quot;adl-accordion__content\\&quot;&gt;\\n            \\n&lt;p&gt;Use the &lt;code&gt;create&lt;\\\/code&gt; method of your &lt;code&gt;AdyenCheckout&lt;\\\/code&gt; instance, in this case &lt;code&gt;checkout&lt;\\\/code&gt;, to create the Component. Pass the configuration object if you created one:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;const giftcardComponent = checkout.create(&#039;giftcard&#039;, giftcardConfiguration);&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n\\n        &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n&lt;\\\/div&gt;\\n\\n&lt;h3&gt;Step 3: Mount the Component&lt;\\\/h3&gt;\\n&lt;p&gt;Mount the Component only after checking that gift cards is available to the shopper:&lt;\\\/p&gt;\\n&lt;pre&gt;&lt;code class=\\&quot;language-js\\&quot;&gt;giftcardComponent\\n   .isAvailable()\\n   .then(() =&amp;gt; {\\n       giftcardComponent.mount(\\&quot;#giftcard-container\\&quot;);\\n   })\\n   .catch(e =&amp;gt; {\\n       \\\/\\\/gift cards is not available\\n   });&lt;\\\/code&gt;&lt;\\\/pre&gt;\\n&lt;h3 id=\\&quot;making-partial-payments\\&quot;&gt;Making partial payments&lt;\\\/h3&gt;\\n&lt;p&gt;When balance of the shopper&#039;s gift card is less than the payment amount, no payment is made. Instead, the &lt;a href=\\&quot;#on-order-request\\&quot;&gt;\\n  &lt;code&gt;onOrderRequest&lt;\\\/code&gt;\\n&lt;\\\/a&gt; event creates an order for the full payment amount. After the order is created, you can start making partial payments:&lt;\\\/p&gt;\\n&lt;ol&gt;\\n&lt;li&gt;\\n&lt;p&gt;The response to the &lt;code&gt;onOrderRequest&lt;\\\/code&gt; event includes the following fields that you need for payment:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Field&lt;\\\/th&gt;\\n&lt;th&gt;Description&lt;\\\/th&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/thead&gt;\\n&lt;tbody&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;pspReference&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The unique reference for the order.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;orderData&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The details needed to make payments for the order.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;remainingAmount&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The full payment amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;\\\/tbody&gt;\\n&lt;\\\/table&gt;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Example order object&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;json\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n  \\\\\\&quot;pspReference\\\\\\&quot;: \\\\\\&quot;MLSPNCQ8HXSKGK82\\\\\\&quot;,\\\\n  \\\\\\&quot;resultCode\\\\\\&quot;: \\\\\\&quot;Success\\\\\\&quot;,\\\\n  \\\\\\&quot;reference\\\\\\&quot;: \\\\\\&quot;YOUR_ORDER_REFERENCE\\\\\\&quot;,\\\\n  \\\\\\&quot;remainingAmount\\\\\\&quot;: {\\\\n    \\\\\\&quot;value\\\\\\&quot;: 250,\\\\n    \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;\\\\n     },\\\\n  \\\\\\&quot;expiresAt\\\\\\&quot;: \\\\\\&quot;2022-01-01T14:21:00\\\\\\&quot;,\\\\n  \\\\\\&quot;orderData\\\\\\&quot;: \\\\\\&quot;823fh892f8f18f4...148f13f9f3f\\\\\\&quot;\\\\n}\\&quot;}]&#039; :enable-copy-link-to-code-block=\\&quot;true\\&quot; :code-sample-card-size=\\&quot;&#039;fullsize&#039;\\&quot;&gt;&lt;\\\/code-sample&gt;\\n&lt;\\\/div&gt;\\n&lt;\\\/li&gt;\\n&lt;li&gt;\\n&lt;p&gt;Use the values from the Component and the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/payments&lt;\\\/a&gt; endpoint to &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/partial-payments#make-a-payment\\&quot;&gt;make partial payments&lt;\\\/a&gt; and complete the order outside of the Component.&lt;\\\/p&gt;\\n&lt;\\\/li&gt;\\n&lt;\\\/ol&gt;\\n&quot;,&quot;altTitle&quot;:&quot;advanced&quot;,&quot;oldTabId&quot;:&quot;config-payments_3&quot;,&quot;relation&quot;:&quot;advanced&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h3>(Optional) Customize logos<\/h3>\n<p>You can specify a custom logo for a gift card brand when <a href=\"\/pt\/online-payments\/build-your-integration\/sessions-flow?platform=Web&amp;integration=Drop-in#configure\">creating a configuration object<\/a>. This example shows a custom icon for Plastix:<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'AdyenCheckout configuration'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;const configuration = {\\n  \\\/\\\/ ...  other configuration\\n  paymentMethodsConfiguration: {\\n    giftcard: {\\n                brandsConfiguration: {\\n                    plastix: {\\n                        icon: 'https:\\\/\\\/mymerchant.com\\\/icons\\\/customIcon.svg'\\n                    }\\n                }\\n    }\\n  }\\n}&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2 id=\"test-and-go-live\">Test and go live<\/h2>\n<p>Before making live gift card payments, simulate transactions:<\/p>\n<ol>\n<li>\n<p>Test your integration using our <a href=\"\/pt\/development-resources\/test-cards-and-credentials\/alternative-payment-method-credentials#gift-cards\">test card numbers<\/a> 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.<\/p>\n<p>To simulate a scenario, send one of the following amounts in the test payment request:<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Amount (last three digits)<\/th>\n<th style=\"text-align: left;\"><code>resultCode<\/code><\/th>\n<th style=\"text-align: left;\"><code>refusalReason<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\">100<\/td>\n<td style=\"text-align: left;\">Authorised<\/td>\n<td style=\"text-align: left;\"><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">123<\/td>\n<td style=\"text-align: left;\">Refused<\/td>\n<td style=\"text-align: left;\">Refused<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">124<\/td>\n<td style=\"text-align: left;\">Refused<\/td>\n<td style=\"text-align: left;\">Not enough balance<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">125<\/td>\n<td style=\"text-align: left;\">Refused<\/td>\n<td style=\"text-align: left;\">Blocked Card<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">126<\/td>\n<td style=\"text-align: left;\">Refused<\/td>\n<td style=\"text-align: left;\">Expired Card<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">130<\/td>\n<td style=\"text-align: left;\">Error<\/td>\n<td style=\"text-align: left;\">Acquirer Error<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">134<\/td>\n<td style=\"text-align: left;\">Refused<\/td>\n<td style=\"text-align: left;\">Invalid Pin<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">135<\/td>\n<td style=\"text-align: left;\">Refused<\/td>\n<td style=\"text-align: left;\">Pin tries exceeded<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<!--list separator-->\n<p>For example, send a payment amount with <strong>100<\/strong> as the last three digits, such as 1.00 or 11.00. This will result in an <strong>Authorised<\/strong> transaction.<\/p>\n<\/li>\n<li>\n<p>Check the status of test payments in your <a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">test Customer Area<\/a>\u00a0&gt;\u00a0<strong>Transactions<\/strong>\u00a0&gt;\u00a0<strong>Payments<\/strong>.<\/p>\n<\/li>\n<\/ol>\n<p>When you are ready to go live:<\/p>\n<ol>\n<li>Onboard with a gift card provider and add the <a href=\"\/pt\/payment-methods\/gift-cards#supported-gift-cards\">gift card variant<\/a> to your <a href=\"https:\/\/ca-live.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">live Customer Area<\/a>.<\/li>\n<li>\n<p>Contact our <a href=\"https:\/\/ca-test.adyen.com\/ca\/ca\/contactUs\/support.shtml?form=other\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Support Team<\/a> to add the gift card to your <a href=\"https:\/\/ca-live.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">live Customer Area<\/a>.<\/p>\n<p><div class=\"sc-notice info\"><div>You can test end-to-end scenarios in your live environment using real gift card details and small amounts.<\/div><\/div><\/p>\n<\/li>\n<\/ol>\n<h2 id=\"see-also\">See also<\/h2>\n<div class=\"see-also-links output-inline\" id=\"see-also\">\n<ul><li><a href=\"\/online-payments\/components-web\"\n                        target=\"_self\"\n                        >\n                    Web Components integration guide\n                <\/a><\/li><li><a href=\"\/development-resources\/webhooks\"\n                        target=\"_self\"\n                        >\n                    Webhooks\n                <\/a><\/li><li><a href=\"https:\/\/docs.adyen.com\/api-explorer\/#\/CheckoutService\/latest\/overview\"\n                        target=\"_blank\"\n                         class=\"external\">\n                    API Explorer\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/gift-cards\/web-component","articleFields":{"description":"Add gift card payments to an existing Components integration.","feedback_component":true,"parameters":{"integration":"Components","platform":"Web","integration_guide_url":"build-your-integration\/sessions-flow?platform=Web&integration=Components","component_name":"the gift card Component","component_name_capitalized":"The Component","payment_method":"gift cards","payment_method_type":"giftcard","component_class":"Giftcard","component_js_const":"giftcard","api_explorer_shortcode":"[api=\"Checkout\/sessions\" inlineCode=\"false\" t=\"Try it in our API Explorer.\"]","logo_1":"![](\/reuse\/development-resources\/additional-info-resources\/java-original.svg?resize=25)","example_1":"[Java Spring](https:\/\/github.com\/adyen-examples\/adyen-java-spring-online-payments\/tree\/main\/giftcard-example)","logo_2":"![](\/reuse\/development-resources\/additional-info-resources\/dot-net-original.svg?resize=25)","example_2":"[.NET](https:\/\/github.com\/adyen-examples\/adyen-dotnet-online-payments\/tree\/main\/giftcard-example)","logo_3":"![](\/reuse\/development-resources\/additional-info-resources\/nodejs-original.svg?resize=25)","example_3":"[Node.js](https:\/\/github.com\/adyen-examples\/adyen-node-online-payments\/tree\/main\/giftcard-example)"},"status":"current"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/payment-methods\/gift-cards\/web-component","title":"Gift card Component","content":"\n&nbsp;&nbsp;Postman collectionImplementation examples&nbsp;&nbsp;Java Spring&nbsp;&nbsp;.NET&nbsp;&nbsp;Node.js\n\nThis page explains how to add gift cards to your existing Web Components integration.\nRequirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have built your Components integration.\n\n\nSetup steps\nBefore you begin, in your Customer Area add each gift card variant that you want to test.\n\n\n\nAPI reference\nYou 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:\n\n \/sessions&#58; This is the default with Components v5.0.0 or later.\n \/payments&#58; If you implemented an additional use case.\n\nComponent configuration\nStep 1: Create a DOM element\nCreate a DOM element on your checkout page, placing it where you want the payment method form to be rendered:\n &lt;div id=\"giftcard-container\"&gt;&lt;\/div&gt;\nStep 2: Create an instance of the Component\nSelect your integration:\n\n\n    \n        \n        \n    \n\n\n(Optional) Customize logos\nYou can specify a custom logo for a gift card brand when creating a configuration object. This example shows a custom icon for Plastix:\n\n    \n\nTest and go live\nBefore making live gift card payments, simulate transactions:\n\n\nTest 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.\nTo simulate a scenario, send one of the following amounts in the test payment request:\n\n\n\nAmount (last three digits)\nresultCode\nrefusalReason\n\n\n\n\n100\nAuthorised\n\n\n\n123\nRefused\nRefused\n\n\n124\nRefused\nNot enough balance\n\n\n125\nRefused\nBlocked Card\n\n\n126\nRefused\nExpired Card\n\n\n130\nError\nAcquirer Error\n\n\n134\nRefused\nInvalid Pin\n\n\n135\nRefused\nPin tries exceeded\n\n\n\n\nFor 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.\n\n\nCheck the status of test payments in your test Customer Area\u00a0&gt;\u00a0Transactions\u00a0&gt;\u00a0Payments.\n\n\nWhen you are ready to go live:\n\nOnboard with a gift card provider and add the gift card variant to your live Customer Area.\n\nContact our Support Team to add the gift card to your live Customer Area.\nYou can test end-to-end scenarios in your live environment using real gift card details and small amounts.\n\n\nSee also\n\n\n                    Web Components integration guide\n                \n                    Webhooks\n                \n                    API Explorer\n                \n","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Payment methods","lvl2":"Gift cards","lvl3":"Gift card Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/payment-methods","lvl2":"https:\/\/docs.adyen.com\/pt\/payment-methods\/gift-cards","lvl3":"\/pt\/payment-methods\/gift-cards\/web-component"},"levels":4,"category":"Payment method","category_color":"green","tags":["Component"]},"articleFiles":{"gift-card-payments-web.js":"<p alt=\"\">gift-card-payments-web.js<\/p>","gift-card-payments-web.request.json":"<p alt=\"\">gift-card-payments-web.request.json<\/p>","gift-card-payments-web.response.json":"<p alt=\"\">gift-card-payments-web.response.json<\/p>"}}