{"title":"Giving for Web Component","category":"default","creationDate":1776961627,"content":"<div class=\"row\" style=\"align-items: top;justify-content: center;\">\n<div class=\"col col-12 col-md-8\" style=\"background-color:transparent;;\"><p>Our Giving Component shows the Giving donation form to the shopper after finishing their original payment.<\/p><p>If the shopper chooses to make a donation, the donation transaction uses the same payment method that the shopper used to make the original payment.<\/p><p>You can accept donations for fixed amounts, or allow the shopper to round up their transaction amount as a donation.<\/p><\/div><div class=\"col col-12 col-md-4\" style=\"background-color:transparent;;\"><div style=\"text-align: right;\"><p><img style=\"width: 350px;\" alt=\"Example donation screen\" src=\"\/user\/pages\/docs\/02.online-payments\/24.donations\/02.web-component\/giving-web.svg?decoding=auto&amp;fetchpriority=auto\"><\/p><\/div><\/div><\/div>\n<h2>Requirements<\/h2>\n<p>In addition to the <a href=\"\/pt\/online-payments\/donations#requirements\">general Adyen Giving requirements<\/a>, take into account the following information.<\/p>\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 integrated with: <ul><li markdown=\"1\"><a href=\"\/pt\/online-payments\/build-your-integration\/advanced-flow\/?platform=Web&amp;integration=Components&amp;version=latest\">Web Components v5.0.0 or later using the Advanced flow<\/a><\/li><li markdown=\"1\">Checkout API v67 or later<\/li><\/ul><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong><a href=\"\/pt\/account\/user-roles\">Customer Area roles<\/a><\/strong><\/td>\n<td style=\"text-align: left;\">Make sure that you have the <strong><a href=\"\/pt\/account\/user-roles\/#manage-donation-campaigns\">Donation campaigns manager<\/a><\/strong> role.<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\"><strong><a href=\"\/pt\/development-resources\/webhooks\">Webhooks<\/a><\/strong><\/td>\n<td style=\"text-align: left;\">Subscribe to the following webhook(s): <ul><li markdown=\"1\">Standard webhooks<\/li><li markdown=\"1\"><a href=\"\/pt\/development-resources\/webhooks\/webhook-types\/#other-webhooks\">Adyen Giving merchant webhook<\/a><\/li><\/ul><\/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: <ul><li markdown=\"1\">To check if your <a href=\"https:\/\/ca-test.adyen.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Customer Area<\/a> user has the required roles, go to <strong>Account<\/strong> &gt; <strong>Users<\/strong>. If you need additional roles, contact your admin user.<\/li><li markdown=\"1\">Set up components integrations for the <a href=\"\/pt\/online-payments\/donations#supported-payment-methods\">payment methods<\/a> that you want to support.<li markdown=\"1\"><a href=\"\/pt\/online-payments\/donations\/#donation-campaign\">Create and activate a donation campaign<\/a>.<\/li><\/ul><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>How it works<\/h2>\n<p>After a shopper completes their payment for the original transaction with a <a href=\"\/pt\/online-payments\/donations#supported-payment-methods\">payment method that supports donations<\/a>:<\/p>\n<ol>\n<li>From your server, make a  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/donationCampaigns\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/donationCampaigns<\/a> request to <a href=\"#get-details-of-donation-campaigns\">get the details of your active donation campaigns<\/a>.<\/li>\n<li>Depending on the <a href=\"\/pt\/online-payments\/donations#donation-types\">donation type<\/a> of the campaign, you <a href=\"#show-giving-in-your-payment-form\">present the option to donate<\/a> by either:\n<ul>\n<li>Show the shopper a donation form with fixed amounts.<\/li>\n<li>Show the shopper a round-up checkbox that suggests to round up their payment amount as a donation.<\/li>\n<\/ul><\/li>\n<li>From your server, make a  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/donations\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/donations<\/a> request to <a href=\"#make-a-donation\">make a donation<\/a>.<\/li>\n<li><a href=\"#get-the-donation-outcome\">Get the outcome<\/a> from a webhook.<\/li>\n<\/ol>\n<p>The following diagram shows the Giving Campaign Manager flow after the shopper pays for their original transaction.<\/p>\n<p><img alt=\"Donation flow diagram \" src=\"\/user\/pages\/docs\/02.online-payments\/24.donations\/02.web-component\/campaign-manager-web-comp.svg?decoding=auto&amp;fetchpriority=auto\" \/><\/p>\n<h2 id=\"get-details-of-donation-campaigns\">Get details of your active donation campaigns<\/h2>\n<p>If the shopper's payment is authorized, and the  <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> or  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments\/details\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/payments\/details<\/a> (for iDEAL payments) response includes the  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/payments#responses-200-donationToken\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">donationToken<\/a> field, get the details of your active donation campaigns.<\/p>\n<p>From your server, make a POST  <a href=\"https:\/\/docs.adyen.com\/api-explorer\/Checkout\/latest\/post\/donationCampaigns\" class=\"codeLabel  external-link no-image\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">\/donationCampaigns<\/a> request, specifying:<\/p>\n<table>\n<thead>\n<tr>\n<th>Field name<\/th>\n<th>Required<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>merchantAccount<\/code><\/td>\n<td><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>Your merchant account name.<\/td>\n<\/tr>\n<tr>\n<td><code>currency<\/code><\/td>\n<td><img title=\"-white_check_mark-\" alt=\"-white_check_mark-\" class=\"smileys\" src=\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" \/><\/td>\n<td>The three-character <a href=\"https:\/\/en.wikipedia.org\/wiki\/ISO_4217\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">ISO currency code<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><code>locale<\/code><\/td>\n<td><\/td>\n<td>The language in which you want to receive the donation campaign details in the response. The default is configured by the nonprofit. Set it to the shopper's language and country code, for example, <code>en-US<\/code>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Example POST \/donationCampaigns request'\" :id=\"'get-donation-campaigns'\" :code-data=\"[{&quot;language&quot;:&quot;bash&quot;,&quot;tabTitle&quot;:&quot;curl&quot;,&quot;content&quot;:&quot;curl https:\\\/\\\/checkout-test.adyen.com\\\/v71\\\/donationCampaigns \\\\\\n-H 'x-api-key: ADYEN_API_KEY' \\\\\\n-H 'content-type: application\\\/json' \\\\\\n-d '{\\n   \\&quot;merchantAccount\\&quot;: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n   \\&quot;currency\\&quot;:\\&quot;EUR\\&quot;,\\n   \\&quot;locale\\&quot;:\\&quot;en-US\\&quot;\\n}'&quot;},{&quot;language&quot;:&quot;java&quot;,&quot;tabTitle&quot;:&quot;Java&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Java API Library v39.3.0\\nimport com.adyen.Client;\\nimport com.adyen.enums.Environment;\\nimport com.adyen.model.checkout.*;\\nimport java.time.OffsetDateTime;\\nimport java.util.*;\\nimport com.adyen.model.RequestOptions;\\nimport com.adyen.service.checkout.*;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nClient client = new Client(\\&quot;ADYEN_API_KEY\\&quot;, Environment.TEST);\\n\\n\\\/\\\/ Create the request object(s)\\nDonationCampaignsRequest donationCampaignsRequest = new DonationCampaignsRequest()\\n  .merchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  .currency(\\&quot;EUR\\&quot;)\\n  .locale(\\&quot;en-US\\&quot;);\\n\\n\\\/\\\/ Send the request\\nDonationsApi service = new DonationsApi(client);\\nDonationCampaignsResponse response = service.donationCampaigns(donationCampaignsRequest, new RequestOptions().idempotencyKey(\\&quot;UUID\\&quot;));&quot;},{&quot;language&quot;:&quot;php&quot;,&quot;tabTitle&quot;:&quot;PHP&quot;,&quot;content&quot;:&quot;&lt;?php\\n\\\/\\\/ Adyen PHP API Library v28.2.0\\nuse Adyen\\\\Client;\\nuse Adyen\\\\Environment;\\nuse Adyen\\\\Model\\\\Checkout\\\\DonationCampaignsRequest;\\nuse Adyen\\\\Service\\\\Checkout\\\\DonationsApi;\\n\\n$client = new Client();\\n$client-&gt;setXApiKey(\\&quot;ADYEN_API_KEY\\&quot;);\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\n$client-&gt;setEnvironment(Environment::TEST);\\n\\n\\n\\\/\\\/ Create the request object(s)\\n$donationCampaignsRequest = new DonationCampaignsRequest();\\n$donationCampaignsRequest\\n  -&gt;setMerchantAccount(\\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;)\\n  -&gt;setCurrency(\\&quot;EUR\\&quot;)\\n  -&gt;setLocale(\\&quot;en-US\\&quot;);\\n\\n$requestOptions['idempotencyKey'] = 'UUID';\\n\\n\\\/\\\/ Send the request\\n$service = new DonationsApi($client);\\n$response = $service-&gt;donationCampaigns($donationCampaignsRequest, $requestOptions);&quot;},{&quot;language&quot;:&quot;cs&quot;,&quot;tabTitle&quot;:&quot;C#&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen .net API Library v32.1.1\\nusing Adyen;\\nusing Environment = Adyen.Model.Environment;\\nusing Adyen.Model;\\nusing Adyen.Model.Checkout;\\nusing Adyen.Service.Checkout;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nvar config = new Config()\\n{\\n    XApiKey = \\&quot;ADYEN_API_KEY\\&quot;,\\n    Environment = Environment.Test\\n};\\nvar client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nDonationCampaignsRequest donationCampaignsRequest = new DonationCampaignsRequest\\n{\\n  MerchantAccount = \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  Currency = \\&quot;EUR\\&quot;,\\n  Locale = \\&quot;en-US\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nvar service = new DonationsService(client);\\nvar response = service.DonationCampaigns(donationCampaignsRequest, requestOptions: new RequestOptions { IdempotencyKey = \\&quot;UUID\\&quot;});&quot;},{&quot;language&quot;:&quot;js&quot;,&quot;tabTitle&quot;:&quot;NodeJS (JavaScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.0.0\\nconst { Client, CheckoutAPI } = require('@adyen\\\/api-library');\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst donationCampaignsRequest = {\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  currency: \\&quot;EUR\\&quot;,\\n  locale: \\&quot;en-US\\&quot;\\n}\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.DonationsApi.donationCampaigns(donationCampaignsRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;},{&quot;language&quot;:&quot;go&quot;,&quot;tabTitle&quot;:&quot;Go&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Go API Library v21.0.0\\nimport (\\n  \\&quot;context\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/common\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/adyen\\&quot;\\n  \\&quot;github.com\\\/adyen\\\/adyen-go-api-library\\\/v21\\\/src\\\/checkout\\&quot;\\n)\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nclient := adyen.NewClient(&amp;common.Config{\\n  ApiKey:      \\&quot;ADYEN_API_KEY\\&quot;,\\n  Environment: common.TestEnv,\\n})\\n\\n\\\/\\\/ Create the request object(s)\\ndonationCampaignsRequest := checkout.DonationCampaignsRequest{\\n  MerchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  Currency: \\&quot;EUR\\&quot;,\\n  Locale: common.PtrString(\\&quot;en-US\\&quot;),\\n}\\n\\n\\\/\\\/ Send the request\\nservice := client.Checkout()\\nreq := service.DonationsApi.DonationCampaignsInput().IdempotencyKey(\\&quot;UUID\\&quot;).DonationCampaignsRequest(donationCampaignsRequest)\\nres, httpRes, err := service.DonationsApi.DonationCampaigns(context.Background(), req)&quot;},{&quot;language&quot;:&quot;py&quot;,&quot;tabTitle&quot;:&quot;Python&quot;,&quot;content&quot;:&quot;# Adyen Python API Library v13.6.0\\nimport Adyen\\n\\nadyen = Adyen.Adyen()\\nadyen.client.xapikey = \\&quot;ADYEN_API_KEY\\&quot;\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.client.platform = \\&quot;test\\&quot; # The environment to use library in.\\n\\n# Create the request object(s)\\njson_request = {\\n  \\&quot;merchantAccount\\&quot;: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  \\&quot;currency\\&quot;: \\&quot;EUR\\&quot;,\\n  \\&quot;locale\\&quot;: \\&quot;en-US\\&quot;\\n}\\n\\n# Send the request\\nresult = adyen.checkout.donations_api.donation_campaigns(request=json_request, idempotency_key=\\&quot;UUID\\&quot;)&quot;},{&quot;language&quot;:&quot;rb&quot;,&quot;tabTitle&quot;:&quot;Ruby&quot;,&quot;content&quot;:&quot;# Adyen Ruby API Library v10.4.0\\nrequire \\&quot;adyen-ruby-api-library\\&quot;\\n\\nadyen = Adyen::Client.new\\nadyen.api_key = 'ADYEN_API_KEY'\\n# For the LIVE environment, also include your liveEndpointUrlPrefix.\\nadyen.env = :test # Set to \\&quot;live\\&quot; for live environment\\n\\n# Create the request object(s)\\nrequest_body = {\\n  :merchantAccount =&gt; 'YOUR_MERCHANT_ACCOUNT',\\n  :currency =&gt; 'EUR',\\n  :locale =&gt; 'en-US'\\n}\\n\\n# Send the request\\nresult = adyen.checkout.donations_api.donation_campaigns(request_body, headers: { 'Idempotency-Key' =&gt; 'UUID' })&quot;},{&quot;language&quot;:&quot;ts&quot;,&quot;tabTitle&quot;:&quot;NodeJS (TypeScript)&quot;,&quot;content&quot;:&quot;\\\/\\\/ Adyen Node API Library v29.0.0\\nimport { Client, CheckoutAPI, Types } from \\&quot;@adyen\\\/api-library\\&quot;;\\n\\n\\\/\\\/ For the LIVE environment, also include your liveEndpointUrlPrefix.\\nconst config = new Config({\\n  apiKey: \\&quot;ADYEN_API_KEY\\&quot;,\\n  environment: EnvironmentEnum.TEST\\n});\\n\\nconst client = new Client(config);\\n\\n\\\/\\\/ Create the request object(s)\\nconst donationCampaignsRequest: Types.checkout.DonationCampaignsRequest = {\\n  merchantAccount: \\&quot;YOUR_MERCHANT_ACCOUNT\\&quot;,\\n  currency: \\&quot;EUR\\&quot;,\\n  locale: \\&quot;en-US\\&quot;\\n};\\n\\n\\\/\\\/ Send the request\\nconst checkoutAPI = new CheckoutAPI(client);\\nconst response = checkoutAPI.DonationsApi.donationCampaigns(donationCampaignsRequest, { idempotencyKey: \\&quot;UUID\\&quot; });&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>The response contains the details of your active donation campaigns. If there is at least one campaign in the response, <a href=\"#show-giving-in-your-payment-form\">show Giving in your payment form<\/a>.<\/p>\n<p>When you make a request to get your active donation campaigns, the response you receive depends on your <a href=\"\/pt\/online-payments\/donations#donation-types\">donation type<\/a>:<\/p>\n\n<div id=\"tab7r82X\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Fixed amount donations&quot;,&quot;content&quot;:&quot;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example POST \\\/donationCampaigns response for a fixed amount donation&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;bash\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;donationCampaigns\\\\\\&quot;: [\\\\n        {\\\\n            \\\\\\&quot;id\\\\\\&quot;: \\\\\\&quot;DONATION_CAMPAIGN_ID\\\\\\&quot;,\\\\n            \\\\\\&quot;campaignName\\\\\\&quot;: \\\\\\&quot;DONATION_CAMPAIGN_NAME\\\\\\&quot;,\\\\n            \\\\\\&quot;donation\\\\\\&quot;: {\\\\n                \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n                \\\\\\&quot;type\\\\\\&quot;: \\\\\\&quot;fixedAmounts\\\\\\&quot;,\\\\n                \\\\\\&quot;values\\\\\\&quot;: [100, 200, 300]\\\\n            },\\\\n            \\\\\\&quot;nonprofitName\\\\\\&quot;: \\\\\\&quot;NONPROFIT_NAME\\\\\\&quot;,\\\\n            \\\\\\&quot;causeName\\\\\\&quot;: \\\\\\&quot;NONPROFIT_CAUSE\\\\\\&quot;,\\\\n            \\\\\\&quot;nonprofitDescription\\\\\\&quot;: \\\\\\&quot;NONPROFIT_DESCRIPTION.\\\\\\&quot;,\\\\n            \\\\\\&quot;nonprofitUrl\\\\\\&quot;: \\\\\\&quot;NONPROFIT_WEBSITE_URL\\\\\\&quot;,\\\\n            \\\\\\&quot;logoUrl\\\\\\&quot;: \\\\\\&quot;NONPROFIT_LOGO_URL\\\\\\&quot;,\\\\n            \\\\\\&quot;bannerUrl\\\\\\&quot;: \\\\\\&quot;NONPROFIT_BANNER_URL\\\\\\&quot;,\\\\n            \\\\\\&quot;termsAndConditionsUrl\\\\\\&quot;: \\\\\\&quot;NONPROFIT_TERMS_AND_CONDITIONS_URL\\\\\\&quot;\\\\n        }\\\\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&quot;,&quot;altTitle&quot;:&quot;fixed&quot;,&quot;oldTabId&quot;:&quot;fixed-get-campaigns-response_1&quot;,&quot;relation&quot;:&quot;fixed&quot;},{&quot;title&quot;:&quot;Round-up donations&quot;,&quot;content&quot;:&quot;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n    &lt;code-sample :title=\\&quot;&#039;Example POST \\\/donationCampaigns response for a round-up donation&#039;\\&quot; :id=\\&quot;&#039;&#039;\\&quot; :code-data=&#039;[{\\&quot;language\\&quot;:\\&quot;bash\\&quot;,\\&quot;tabTitle\\&quot;:\\&quot;\\&quot;,\\&quot;content\\&quot;:\\&quot;{\\\\n    \\\\\\&quot;donationCampaigns\\\\\\&quot;: [\\\\n        {\\\\n            \\\\\\&quot;id\\\\\\&quot;: \\\\\\&quot;DONATION_CAMPAIGN_ID\\\\\\&quot;,\\\\n            \\\\\\&quot;campaignName\\\\\\&quot;: \\\\\\&quot;DONATION_CAMPAIGN_NAME\\\\\\&quot;,\\\\n            \\\\\\&quot;donation\\\\\\&quot;: {\\\\n                \\\\\\&quot;currency\\\\\\&quot;: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n                \\\\\\&quot;type\\\\\\&quot;: \\\\\\&quot;roundup\\\\\\&quot;,\\\\n                \\\\\\&quot;maxRoundupAmount\\\\\\&quot;: 100\\\\n            },\\\\n            \\\\\\&quot;nonprofitName\\\\\\&quot;: \\\\\\&quot;NONPROFIT_NAME\\\\\\&quot;,\\\\n            \\\\\\&quot;causeName\\\\\\&quot;: \\\\\\&quot;NONPROFIT_CAUSE\\\\\\&quot;,\\\\n            \\\\\\&quot;nonprofitDescription\\\\\\&quot;: \\\\\\&quot;NONPROFIT_DESCRIPTION.\\\\\\&quot;,\\\\n            \\\\\\&quot;nonprofitUrl\\\\\\&quot;: \\\\\\&quot;NONPROFIT_WEBSITE_URL\\\\\\&quot;,\\\\n            \\\\\\&quot;logoUrl\\\\\\&quot;: \\\\\\&quot;NONPROFIT_LOGO_URL\\\\\\&quot;,\\\\n            \\\\\\&quot;bannerUrl\\\\\\&quot;: \\\\\\&quot;NONPROFIT_BANNER_URL\\\\\\&quot;,\\\\n            \\\\\\&quot;termsAndConditionsUrl\\\\\\&quot;: \\\\\\&quot;NONPROFIT_TERMS_AND_CONDITIONS_URL\\\\\\&quot;\\\\n        }\\\\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&quot;,&quot;altTitle&quot;:&quot;roundup&quot;,&quot;oldTabId&quot;:&quot;round-get-campaigns-response_2&quot;,&quot;relation&quot;:&quot;roundup&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2 id=\"show-giving-in-your-payment-form\">Show Giving in your payment form<\/h2>\n<p>To show the Giving Component in your payment form:<\/p>\n<ol>\n<li>\n<p>Create a DOM element for Giving, placing it where you want the form to be rendered:<\/p>\n<pre><code class=\"language-js\">&lt;div id='donation-container'&gt;&lt;\/div&gt;<\/code><\/pre>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>Use the values you received in the <a href=\"#get-details-of-donation-campaigns\"><code>\/donationCampaigns<\/code> response<\/a> to configure the Giving Component. The parameters you need to use depend on your <a href=\"\/pt\/online-payments\/release-notes\/?title%5B0%5D=Web%20Components%2FDrop-in\">Web Component version<\/a>:<\/p>\n\n<div id=\"tabEaHes\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;v6.0.0 or later&quot;,&quot;content&quot;:&quot;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter name&lt;\\\/th&gt;\\n&lt;th&gt;Required&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;donation.type&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Defines the &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/donations#donation-types\\&quot;&gt;donation type&lt;\\\/a&gt;. Possible values: &lt;br&gt; - &lt;strong&gt;roundup&lt;\\\/strong&gt; &lt;br&gt; - &lt;strong&gt;fixedAmounts&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;donation.currency&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The three-character &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/currency-codes\\\/\\&quot;&gt;ISO currency code&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;donation.maxRoundupAmount&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Round-up &lt;br&gt; donations&lt;\\\/td&gt;\\n&lt;td&gt;The maximum amount a transaction can be rounded up to make a donation.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;donation.values&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Fixed amount &lt;br&gt; donations&lt;\\\/td&gt;\\n&lt;td&gt;The object containing suggested donation amounts.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;commercialTxAmount&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Round-up &lt;br&gt; donations&lt;\\\/td&gt;\\n&lt;td&gt;The original transaction amount for the shopper&#039;s order, excluding the donation amount. The component uses this value to calculate the round-up donation amount.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;nonprofitName&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The name of the nonprofit.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;nonprofitDescription&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The description of the nonprofit.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;nonprofitUrl&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The website URL of the nonprofit.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;logoUrl&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL for the nonprofit logo.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;bannerUrl&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL for the banner for the campaign.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;termsAndConditionsUrl&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL for the terms and conditions page of the nonprofit.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onDonate&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Create an event handler for &lt;code&gt;onDonate&lt;\\\/code&gt;. This is called when the shopper selects the amount they want to donate. In the example below, we use &lt;code&gt;handleOnDonate&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;causeName&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The cause of the nonprofit.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onCancel&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Create an event handler for &lt;code&gt;onCancel&lt;\\\/code&gt;. This is called when the shopper declines to donate. In the example below, we use &lt;code&gt;handleOnCancel&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;showCancelButton&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;By default, the Component shows a &lt;strong&gt;Not now&lt;\\\/strong&gt; button. Your shopper can select this button to decline to donate. Set to &lt;strong&gt;false&lt;\\\/strong&gt; to remove this button.&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 Giving Component configuration for a fixed amount donation&#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;\\\\\\\/\\\\\\\/ Implement the event handlers.\\\\nfunction handleOnDonate(state, component) {\\\\n     state.isValid \\\\\\\/\\\\\\\/ True or false. Specifies if the shopper has selected a donation amount.\\\\n     state.data \\\\\\\/\\\\\\\/ Provides the data that you need to pass in the `\\\\\\\/donations` call.\\\\n     component \\\\\\\/\\\\\\\/ Provides the active Component instance that called this event.\\\\n}\\\\n\\\\nfunction handleOnCancel(state, component) {\\\\n     \\\\\\\/\\\\\\\/ Show a message, unmount the Component, or redirect to another page.\\\\n}\\\\n\\\\n\\\\\\\/\\\\\\\/ Create the configuration object.\\\\nconst donationCampaign = {\\\\n     campaignName: \\\\\\&quot;CAMPAIGN_NAME\\\\\\&quot;,\\\\n     donation: {\\\\n          currency: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n          type: \\\\\\&quot;fixedAmounts\\\\\\&quot;,\\\\n          values: [100, 200, 300]\\\\n     },\\\\n     nonprofitName: \\\\\\&quot;NONPROFIT_NAME\\\\\\&quot;,\\\\n     causeName: \\\\\\&quot;CAUSE_NAME\\\\\\&quot;,\\\\n     nonprofitDescription: \\\\\\&quot;NONPROFIT_DESCRIPTION\\\\\\&quot;,\\\\n     nonprofitUrl: \\\\\\&quot;NONPROFIT_WEBSITE_URL\\\\\\&quot;,\\\\n     logoUrl: \\\\\\&quot;NONPROFIT_LOGO_URL\\\\\\&quot;,\\\\n     bannerUrl: \\\\\\&quot;NONPROFIT_BANNER_URL\\\\\\&quot;,\\\\n     termsAndConditionsUrl: \\\\\\&quot;NONPROFIT_TERMS_AND_CONDITIONS_URL\\\\\\&quot;\\\\n};\\\\n\\\\nconst donationConfig = {\\\\n     ...donationCampaign,\\\\n     showCancelButton: true,\\\\n     onDonate: handleOnDonate,\\\\n     onCancel: handleOnCancel\\\\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&quot;,&quot;altTitle&quot;:&quot;v6&quot;,&quot;oldTabId&quot;:&quot;v6-a_1&quot;,&quot;relation&quot;:&quot;v6&quot;},{&quot;title&quot;:&quot;v5.x.x or earlier&quot;,&quot;content&quot;:&quot;\\n&lt;div class=\\&quot;notices yellow\\&quot;&gt;\\n&lt;p&gt;Web Components v5.x.x or earlier only support fixed amount donations.&lt;\\\/p&gt;\\n&lt;\\\/div&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Parameter name&lt;\\\/th&gt;\\n&lt;th&gt;Required&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;amounts&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The &lt;code&gt;currency&lt;\\\/code&gt; and possible &lt;code&gt;values&lt;\\\/code&gt; for the donation.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;currency&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The three-character &lt;a href=\\&quot;\\\/pt\\\/development-resources\\\/currency-codes\\\/\\&quot;&gt;ISO currency code&lt;\\\/a&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;backgroundUrl&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL for the background image for the campaign. This is the &lt;code&gt;bannerUrl&lt;\\\/code&gt; field in the &lt;code&gt;\\\/donationCampaigns&lt;\\\/code&gt; response.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;description&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The description of the nonprofit. This is the &lt;code&gt;nonprofitDescription&lt;\\\/code&gt; field in the &lt;code&gt;\\\/donationCampaigns&lt;\\\/code&gt; response.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;logoUrl&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL for the nonprofit logo.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;name&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The name of the nonprofit. This is the &lt;code&gt;nonprofitName&lt;\\\/code&gt; field in the &lt;code&gt;\\\/donationCampaigns&lt;\\\/code&gt; response.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onDonate&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Create an event handler for &lt;code&gt;onDonate&lt;\\\/code&gt;. This is called when the shopper selects the amount they want to donate. In the example below, we use &lt;code&gt;handleOnDonate&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;onCancel&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;Create an event handler for &lt;code&gt;onCancel&lt;\\\/code&gt;. This is called when the shopper declines to donate. In the example below, we use &lt;code&gt;handleOnCancel&lt;\\\/code&gt;.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;showCancelButton&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;By default, the Component shows a &lt;strong&gt;Not now&lt;\\\/strong&gt; button. Your shopper can select this button to decline to donate. Set to &lt;strong&gt;false&lt;\\\/strong&gt; to remove this button.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;code&gt;url&lt;\\\/code&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The URL of the nonprofit. This is the &lt;code&gt;nonprofitUrl&lt;\\\/code&gt;  field in the &lt;code&gt;\\\/donationCampaigns&lt;\\\/code&gt; response. If passed, the Component renders a link to your chosen nonprofit.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt;&lt;span id=\\&quot;disclaimer\\&quot;&gt;&lt;code&gt;disclaimerMessage&lt;\\\/code&gt;&lt;\\\/span&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;ul&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;&lt;code&gt;message&lt;\\\/code&gt;: This is the message you want to show your shoppers.&lt;\\\/li&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;&lt;code&gt;linkText&lt;\\\/code&gt;: The text you want to show for your link.&lt;\\\/li&gt;&lt;li markdown=\\&quot;1\\&quot;&gt;&lt;code&gt;link&lt;\\\/code&gt;: The URL for the Terms and Conditions page.&lt;\\\/li&gt;&lt;\\\/ul&gt;&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;Configure the Giving Component&#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;\\\\\\\/\\\\\\\/Implement the event handlers.\\\\n   function handleOnDonate(state, component) {\\\\n    state.isValid \\\\\\\/\\\\\\\/ True or false. Specifies if the shopper has selected a donation amount.\\\\n    state.data \\\\\\\/\\\\\\\/ Provides the data that you need to pass in the `\\\\\\\/donations` call.\\\\n    component \\\\\\\/\\\\\\\/ Provides the active Component instance that called this event.\\\\n   }\\\\n\\\\n   function handleOnCancel(state) {\\\\n    \\\\\\\/\\\\\\\/ Show a message, unmount the Component, or redirect to another page.\\\\n   }\\\\n\\\\n   \\\\\\\/\\\\\\\/Create the configuration object.\\\\n   const donationCampaign = {\\\\n     amounts: {\\\\n        currency: \\\\\\&quot;EUR\\\\\\&quot;,\\\\n        values: [100, 200, 500]\\\\n    },\\\\n     backgroundUrl: \\\\\\&quot;NONPROFIT_BANNER_URL\\\\\\&quot;,\\\\n     description: \\\\\\&quot;NONPROFIT_DESCRIPTION\\\\\\&quot;,\\\\n     logoUrl: \\\\\\&quot;NONPROFIT_LOGO_URL\\\\\\&quot;,\\\\n     name: \\\\\\&quot;NONPROFIT_NAME\\\\\\&quot;,\\\\n     url: \\\\\\&quot;NONPROFIT_WEBSITE_URL\\\\\\&quot;,\\\\n     disclaimerMessage: {\\\\n       message: \\\\\\&quot;By donating you agree to the linkText\\\\\\&quot;,\\\\n       linkText: \\\\\\&quot;Terms and conditions\\\\\\&quot;,\\\\n       link: \\\\\\&quot;NONPROFIT_TERMS_AND_CONDITIONS_URL\\\\\\&quot;\\\\n     }\\\\n\\\\n   };\\\\n\\\\n   const donationConfig = {\\\\n    ...donationCampaign,\\\\n    showCancelButton: true,\\\\n    onDonate: handleOnDonate,\\\\n    onCancel: handleOnCancel\\\\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&quot;,&quot;altTitle&quot;:&quot;v5&quot;,&quot;oldTabId&quot;:&quot;v5-a_2&quot;,&quot;relation&quot;:&quot;v5&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<\/li>\n<li>\n<p>If you didn't persist a previous instance of the <code>AdyenCheckout<\/code> object, create a new checkout object.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Create a new AdyenCheckout object'\" :id=\"''\" :code-data='[{\"language\":\"js\",\"tabTitle\":\"\",\"content\":\"const checkout= await AdyenCheckout(\\n  {\\n    clientKey,\\n    environment: \\\"test\\\",\\n  }\\n);\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>Use the <code>checkout.create<\/code> method to create and mount an instance of the Giving Component.<\/p>\n\n<div id=\"tab5vZ68\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;v6.0.0 or later&quot;,&quot;content&quot;:&quot;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Create and mount the Giving Component&#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 donation = new Donation(checkout, donationConfig).mount(&#039;#donation-container&#039;);&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;v6&quot;,&quot;oldTabId&quot;:&quot;v6-b_1&quot;,&quot;relation&quot;:&quot;v6&quot;},{&quot;title&quot;:&quot;v5.x.x or earlier&quot;,&quot;content&quot;:&quot;\\n&lt;div data-component-wrapper=\\&quot;code-sample\\&quot;&gt;\\n&lt;code-sample :title=\\&quot;&#039;Create and mount the Giving Component&#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 donation = checkout.create(&#039;donation&#039;, donationConfig).mount(&#039;#-container&#039;);&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;v5&quot;,&quot;oldTabId&quot;:&quot;v5-b_2&quot;,&quot;relation&quot;:&quot;v5&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<p>When the shopper selects a donation amount, the Component calls the <code>onDonate<\/code> event. If <code>state.isValid<\/code> is <strong>true<\/strong>, collect the values passed in <code>state.data<\/code> which contains the donation amount that the shopper selected.<\/p>\n<\/li>\n<li>\n<p>Pass the <code>state.data<\/code> to your server.<\/p>\n<\/li>\n<\/ol>\n<h2 id=\"make-a-donation\">Make a donation<\/h2>\n<p>From your server, make a donation request, using the same payment method as the original transaction.<\/p>\n\n<div id=\"tabtdfcY\">\n    <div data-component-wrapper=\"tabs\">\n        <tabs\n                        :items=\"[{&quot;title&quot;:&quot;Fixed amount donations&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/donations&lt;\\\/a&gt; request, specifying the following fields:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Field name&lt;\\\/th&gt;\\n&lt;th&gt;Required&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 href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-amount\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;amount&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The &lt;code&gt;currency&lt;\\\/code&gt; and &lt;code&gt;value&lt;\\\/code&gt; of the donation.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-donationCampaignId\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;donationCampaignId&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The unique campaign ID from the &lt;code&gt;\\\/donationCampaigns&lt;\\\/code&gt; response &lt;code&gt;id&lt;\\\/code&gt; field.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments#request-paymentMethod\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;paymentMethod&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;    &lt;\\\/td&gt;\\n&lt;td&gt;For cards, Apple Pay, or Google Pay: &lt;code&gt;type&lt;\\\/code&gt;: &lt;strong&gt;scheme&lt;\\\/strong&gt; &lt;br&gt; For iDEAL: &lt;code&gt;type&lt;\\\/code&gt;: &lt;strong&gt;sepadirectdebit&lt;\\\/strong&gt;&lt;br&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-donationOriginalPspReference\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;donationOriginalPspReference&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The PSP reference of the original payment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-donationOriginalPspReference\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;donationToken&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;For cards, the &lt;code&gt;donationToken&lt;\\\/code&gt; from 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;, or  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments\\\/details\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/payments\\\/details&lt;\\\/a&gt; response. &lt;br&gt; For iDEAL, the &lt;code&gt;donationToken&lt;\\\/code&gt; from the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments\\\/details\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/payments\\\/details&lt;\\\/a&gt; response.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-reference\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;reference&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The reference to uniquely identify a payment. This reference is used in all communication with you about the payment status. We recommend using a unique value per payment; however, it is not a requirement. If you need to provide multiple references for a transaction, separate them with hyphens (\\&quot;-\\&quot;). Maximum length: 80 characters.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-merchantAccount\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;merchantAccount&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The merchant account identifier, with which you want to process the transaction.&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 POST \\\/donations request&#039;\\&quot; :id=\\&quot;&#039;make-a-donation-campaign-manager&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;curl https:\\\\\\\/\\\\\\\/checkout-test.adyen.com\\\\\\\/v71\\\\\\\/donations \\\\\\\\\\\\n-H &#039;x-api-key: ADYEN_API_KEY&#039; \\\\\\\\\\\\n-H &#039;content-type: application\\\\\\\/json&#039; \\\\\\\\\\\\n-d &#039;{\\\\n    \\\\&amp;quot;amount\\\\&amp;quot;: {\\\\n        \\\\&amp;quot;currency\\\\&amp;quot;: \\\\&amp;quot;EUR\\\\&amp;quot;,\\\\n        \\\\&amp;quot;value\\\\&amp;quot;: 500\\\\n    },\\\\n    \\\\&amp;quot;donationCampaignId\\\\&amp;quot;: \\\\&amp;quot;DONATION_CAMPAIGN_ID\\\\&amp;quot;,\\\\n    \\\\&amp;quot;paymentMethod\\\\&amp;quot;: {\\\\n        \\\\&amp;quot;type\\\\&amp;quot;: \\\\&amp;quot;scheme\\\\&amp;quot;\\\\n    },\\\\n    \\\\&amp;quot;donationOriginalPspReference\\\\&amp;quot;: \\\\&amp;quot;ORIGINAL_PAYMENT_PSP_REFERENCE\\\\&amp;quot;,\\\\n    \\\\&amp;quot;donationToken\\\\&amp;quot;: \\\\&amp;quot;DONATION_TOKEN\\\\&amp;quot;,\\\\n    \\\\&amp;quot;reference\\\\&amp;quot;: \\\\&amp;quot;YOUR_DONATION_REFERENCE\\\\&amp;quot;\\\\n    \\\\&amp;quot;merchantAccount\\\\&amp;quot;:\\\\&amp;quot;YOUR_MERCHANT_ACCOUNT\\\\&amp;quot;\\\\n}&#039;&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;p&gt;The response contains:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;code&gt;id&lt;\\\/code&gt;: a unique resource identifier.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;code&gt;status&lt;\\\/code&gt;: the status of the donation. Possible values: &lt;strong&gt;completed&lt;\\\/strong&gt;, &lt;strong&gt;pending&lt;\\\/strong&gt;, or &lt;strong&gt;refused&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;code&gt;payment&lt;\\\/code&gt;: object that contains the &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/payment-result-codes\\\/#final-payment-status\\&quot;&gt;result code&lt;\\\/a&gt;, and the &lt;code&gt;pspReference&lt;\\\/code&gt; for the donation transaction.&lt;\\\/li&gt;\\n&lt;li&gt;The request body.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&quot;,&quot;altTitle&quot;:&quot;fixed&quot;,&quot;oldTabId&quot;:&quot;fixed-make-donation_1&quot;,&quot;relation&quot;:&quot;fixed&quot;},{&quot;title&quot;:&quot;Round-up donations&quot;,&quot;content&quot;:&quot;\\n&lt;p&gt;Make a POST  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/donations&lt;\\\/a&gt; request, specifying the following fields:&lt;\\\/p&gt;\\n&lt;table&gt;\\n&lt;thead&gt;\\n&lt;tr&gt;\\n&lt;th&gt;Field name&lt;\\\/th&gt;\\n&lt;th&gt;Required&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 href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-amount\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;amount&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The &lt;code&gt;currency&lt;\\\/code&gt; and &lt;code&gt;value&lt;\\\/code&gt; of the donation.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-donationCampaignId\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;donationCampaignId&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The unique campaign ID from the &lt;code&gt;\\\/donationCampaigns&lt;\\\/code&gt; response &lt;code&gt;id&lt;\\\/code&gt; field.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments#request-paymentMethod\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;paymentMethod&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;    &lt;\\\/td&gt;\\n&lt;td&gt;For cards, Apple Pay, or Google Pay: &lt;code&gt;type&lt;\\\/code&gt;: &lt;strong&gt;scheme&lt;\\\/strong&gt; &lt;br&gt; For iDeal: &lt;code&gt;type&lt;\\\/code&gt;: &lt;strong&gt;sepadirectdebit&lt;\\\/strong&gt;&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-donationOriginalPspReference\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;donationOriginalPspReference&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The PSP reference of the original payment.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-donationOriginalPspReference\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;donationToken&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;For cards, the &lt;code&gt;donationToken&lt;\\\/code&gt; from 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; response. &lt;br&gt; For iDeal, the &lt;code&gt;donationToken&lt;\\\/code&gt; from the  &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/payments\\\/details\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;\\\/payments\\\/details&lt;\\\/a&gt; response.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-reference\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;reference&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The reference to uniquely identify a payment. This reference is used in all communication with you about the payment status. We recommend using a unique value per payment; however, it is not a requirement. If you need to provide multiple references for a transaction, separate them with hyphens (\\&quot;-\\&quot;). Maximum length: 80 characters.&lt;\\\/td&gt;\\n&lt;\\\/tr&gt;\\n&lt;tr&gt;\\n&lt;td&gt; &lt;a href=\\&quot;https:\\\/\\\/docs.adyen.com\\\/api-explorer\\\/Checkout\\\/latest\\\/post\\\/donations#request-merchantAccount\\&quot; class=\\&quot;codeLabel  external-link no-image\\&quot; target=\\&quot;_blank\\&quot; rel=\\&quot;nofollow noopener noreferrer\\&quot;&gt;merchantAccount&lt;\\\/a&gt;&lt;\\\/td&gt;\\n&lt;td&gt;&lt;img title=\\&quot;-white_check_mark-\\&quot; alt=\\&quot;-white_check_mark-\\&quot; class=\\&quot;smileys\\&quot; src=\\&quot;\\\/user\\\/data\\\/smileys\\\/emoji\\\/white_check_mark.png\\&quot; \\\/&gt;&lt;\\\/td&gt;\\n&lt;td&gt;The merchant account identifier, with which you want to process the transaction.&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 POST \\\/donations request&#039;\\&quot; :id=\\&quot;&#039;make-a-donation-campaign-manager-roundup&#039;\\&quot; :code-data=\\&quot;[{&amp;quot;language&amp;quot;:&amp;quot;bash&amp;quot;,&amp;quot;tabTitle&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;content&amp;quot;:&amp;quot;curl https:\\\\\\\/\\\\\\\/checkout-test.adyen.com\\\\\\\/v71\\\\\\\/donations \\\\\\\\\\\\n-H &#039;x-api-key: ADYEN_API_KEY&#039; \\\\\\\\\\\\n-H &#039;content-type: application\\\\\\\/json&#039; \\\\\\\\\\\\n-d &#039;{\\\\n    \\\\&amp;quot;amount\\\\&amp;quot;: {\\\\n        \\\\&amp;quot;currency\\\\&amp;quot;: \\\\&amp;quot;EUR\\\\&amp;quot;,\\\\n        \\\\&amp;quot;value\\\\&amp;quot;: 99\\\\n    },\\\\n    \\\\&amp;quot;donationCampaignId\\\\&amp;quot;: \\\\&amp;quot;DONATION_CAMPAIGN_ID\\\\&amp;quot;,\\\\n    \\\\&amp;quot;paymentMethod\\\\&amp;quot;: {\\\\n        \\\\&amp;quot;type\\\\&amp;quot;: \\\\&amp;quot;scheme\\\\&amp;quot;\\\\n    },\\\\n    \\\\&amp;quot;donationOriginalPspReference\\\\&amp;quot;: \\\\&amp;quot;ORIGINAL_PAYMENT_PSP_REFERENCE\\\\&amp;quot;,\\\\n    \\\\&amp;quot;donationToken\\\\&amp;quot;: \\\\&amp;quot;DONATION_TOKEN\\\\&amp;quot;,\\\\n    \\\\&amp;quot;reference\\\\&amp;quot;: \\\\&amp;quot;YOUR_DONATION_REFERENCE\\\\&amp;quot;\\\\n    \\\\&amp;quot;merchantAccount\\\\&amp;quot;:\\\\&amp;quot;YOUR_MERCHANT_ACCOUNT\\\\&amp;quot;\\\\n}&#039;&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;p&gt;The response contains:&lt;\\\/p&gt;\\n&lt;ul&gt;\\n&lt;li&gt;&lt;code&gt;id&lt;\\\/code&gt;: a unique resource identifier.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;code&gt;status&lt;\\\/code&gt;: the status of the donation. Possible values: &lt;strong&gt;completed&lt;\\\/strong&gt;, &lt;strong&gt;pending&lt;\\\/strong&gt;, or &lt;strong&gt;refused&lt;\\\/strong&gt;.&lt;\\\/li&gt;\\n&lt;li&gt;&lt;code&gt;payment&lt;\\\/code&gt;: object that contains the &lt;a href=\\&quot;\\\/pt\\\/online-payments\\\/build-your-integration\\\/payment-result-codes\\\/#final-payment-status\\&quot;&gt;result code&lt;\\\/a&gt;, and the &lt;code&gt;pspReference&lt;\\\/code&gt; for the donation transaction.&lt;\\\/li&gt;\\n&lt;li&gt;The request body.&lt;\\\/li&gt;\\n&lt;\\\/ul&gt;\\n&quot;,&quot;altTitle&quot;:&quot;roundup&quot;,&quot;oldTabId&quot;:&quot;round-make-donation_2&quot;,&quot;relation&quot;:&quot;roundup&quot;}]\"\n            :should-update-when-url-changes='true'>\n        <\/tabs>\n    <\/div>\n<\/div>\n\n<h2 id=\"get-the-donation-outcome\">Get the donation outcome<\/h2>\n You get the donation outcome of each donation in a webhook message.\n<p>To receive these webhook messages, enable the <a href=\"\/pt\/development-resources\/webhooks\/webhook-types#other-webhooks\">Adyen Giving merchant webhook<\/a>, which includes <code>eventCode<\/code>: <span translate=\"no\"><strong>DONATION<\/strong><\/span>.<\/p>\n<p>For a successful donation, the event contains:<\/p>\n<ul>\n<li><code>success<\/code>: <span translate=\"no\"><strong>true<\/strong><\/span>.<\/li>\n<li><code>originalReference<\/code>: use this value to associate the donation with the shopper's original transaction.<\/li>\n<\/ul>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Successful donation webhook event'\" :id=\"''\" :code-data='[{\"language\":\"json\",\"tabTitle\":\"\",\"content\":\"{\\n  \\\"live\\\": \\\"false\\\",\\n  \\\"notificationItems\\\": [\\n    {\\n      \\\"NotificationRequestItem\\\": {\\n        \\\"additionalData\\\": {\\n          \\\"originalMerchantAccountCode\\\": \\\"YOUR_MERCHANT_ACCOUNT\\\"\\n        },\\n        \\\"amount\\\": {\\n          \\\"currency\\\": \\\"EUR\\\",\\n          \\\"value\\\": 500\\n        },\\n        \\\"originalReference\\\": \\\"V4HZ4RBFJGXXGN82\\\",\\n        \\\"eventCode\\\": \\\"DONATION\\\",\\n        \\\"eventDate\\\": \\\"2022-07-07T13:18:13+02:00\\\",\\n        \\\"merchantAccountCode\\\": \\\"CHARITY_DONATION_ACCOUNT\\\",\\n        \\\"merchantReference\\\": \\\"YOUR_DONATION_REFERENCE\\\",\\n        \\\"paymentMethod\\\": \\\"visa\\\",\\n        \\\"pspReference\\\": \\\"Z58FGTKBRCQ2WN27\\\",\\n        \\\"reason\\\": \\\"033899:1111:03\\\/2030\\\",\\n        \\\"success\\\": \\\"true\\\"\\n      }\\n    }\\n  ]\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<p>For cards, you can show the shopper if their donation is successful after you get the webhook. For iDEAL, you get the webhook event a day or more later. You can send the outcome to the shopper using email or mobile messaging.<\/p>\n<h2>Test and go live<\/h2>\n<p>Before going live with your integration, <a href=\"\/pt\/online-payments\/donations\/testing\">use our test cards to test your integration<\/a>.<\/p>\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=\"https:\/\/docs.adyen.com\/api-explorer\/#\/Webhooks\/v1\/overview\"\n                        target=\"_blank\"\n                         class=\"external\">\n                    Webhooks\n                <\/a><\/li><li><a href=\"https:\/\/www.adyen.com\/giving\"\n                        target=\"_blank\"\n                         class=\"external\">\n                    Giving on adyen.com\n                <\/a><\/li><li><a href=\"\/reporting\/monitor-donations\/\"\n                        target=\"_self\"\n                        >\n                    Monitor donations\n                <\/a><\/li><\/ul><\/div>\n","url":"https:\/\/docs.adyen.com\/pt\/online-payments\/donations\/web-component","articleFields":{"description":"Add Giving Campaign Manager to an existing Components integration.","feedback_component":true,"parameters":{"payment_method":"Giving","payment_type":"online","country_code":"NL","currency":"EUR","component_name":"donation","built_integration":"<a href=\"\/online-payments\/build-your-integration\/advanced-flow?platform=Web&integration=Components\">Built a Components integration<\/a>"},"filters_component":false,"page_id":"824b32ac-19d2-47e4-9f52-f1c846099318","decision_tree":"[]"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/online-payments\/donations\/web-component","title":"Giving for Web Component","content":"\nOur Giving Component shows the Giving donation form to the shopper after finishing their original payment.If the shopper chooses to make a donation, the donation transaction uses the same payment method that the shopper used to make the original payment.You can accept donations for fixed amounts, or allow the shopper to round up their transaction amount as a donation.\nRequirements\nIn addition to the general Adyen Giving requirements, take into account the following information.\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nMake sure that you have integrated with: Web Components v5.0.0 or later using the Advanced flowCheckout API v67 or later\n\n\nCustomer Area roles\nMake sure that you have the Donation campaigns manager role.\n\n\nWebhooks\nSubscribe to the following webhook(s): Standard webhooksAdyen Giving merchant webhook\n\n\nSetup steps\nBefore you begin: To check if your Customer Area user has the required roles, go to Account &gt; Users. If you need additional roles, contact your admin user.Set up components integrations for the payment methods that you want to support.Create and activate a donation campaign.\n\n\n\nHow it works\nAfter a shopper completes their payment for the original transaction with a payment method that supports donations:\n\nFrom your server, make a  \/donationCampaigns request to get the details of your active donation campaigns.\nDepending on the donation type of the campaign, you present the option to donate by either:\n\nShow the shopper a donation form with fixed amounts.\nShow the shopper a round-up checkbox that suggests to round up their payment amount as a donation.\n\nFrom your server, make a  \/donations request to make a donation.\nGet the outcome from a webhook.\n\nThe following diagram shows the Giving Campaign Manager flow after the shopper pays for their original transaction.\n\nGet details of your active donation campaigns\nIf the shopper's payment is authorized, and the  \/payments or  \/payments\/details (for iDEAL payments) response includes the  donationToken field, get the details of your active donation campaigns.\nFrom your server, make a POST  \/donationCampaigns request, specifying:\n\n\n\nField name\nRequired\nDescription\n\n\n\n\nmerchantAccount\n\nYour merchant account name.\n\n\ncurrency\n\nThe three-character ISO currency code.\n\n\nlocale\n\nThe language in which you want to receive the donation campaign details in the response. The default is configured by the nonprofit. Set it to the shopper's language and country code, for example, en-US.\n\n\n\n\n    \n\nThe response contains the details of your active donation campaigns. If there is at least one campaign in the response, show Giving in your payment form.\nWhen you make a request to get your active donation campaigns, the response you receive depends on your donation type:\n\n\n    \n        \n        \n    \n\n\nShow Giving in your payment form\nTo show the Giving Component in your payment form:\n\n\nCreate a DOM element for Giving, placing it where you want the form to be rendered:\n&lt;div id='donation-container'&gt;&lt;\/div&gt;\n\n\n\n\nUse the values you received in the \/donationCampaigns response to configure the Giving Component. The parameters you need to use depend on your Web Component version:\n\n\n    \n        \n        \n    \n\n\n\n\nIf you didn't persist a previous instance of the AdyenCheckout object, create a new checkout object.\n\n\n\n\n\nUse the checkout.create method to create and mount an instance of the Giving Component.\n\n\n    \n        \n        \n    \n\n\nWhen the shopper selects a donation amount, the Component calls the onDonate event. If state.isValid is true, collect the values passed in state.data which contains the donation amount that the shopper selected.\n\n\nPass the state.data to your server.\n\n\nMake a donation\nFrom your server, make a donation request, using the same payment method as the original transaction.\n\n\n    \n        \n        \n    \n\n\nGet the donation outcome\n You get the donation outcome of each donation in a webhook message.\nTo receive these webhook messages, enable the Adyen Giving merchant webhook, which includes eventCode: DONATION.\nFor a successful donation, the event contains:\n\nsuccess: true.\noriginalReference: use this value to associate the donation with the shopper's original transaction.\n\n\n    \n\nFor cards, you can show the shopper if their donation is successful after you get the webhook. For iDEAL, you get the webhook event a day or more later. You can send the outcome to the shopper using email or mobile messaging.\nTest and go live\nBefore going live with your integration, use our test cards to test your integration.\nSee also\n\n\n                    Web Components integration guide\n                \n                    Webhooks\n                \n                    Giving on adyen.com\n                \n                    Monitor donations\n                \n","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Online payments","lvl2":"Donations using Giving","lvl3":"Giving for Web Component"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/online-payments","lvl2":"https:\/\/docs.adyen.com\/pt\/online-payments\/donations","lvl3":"\/pt\/online-payments\/donations\/web-component"},"levels":4,"category":"Online Payments","category_color":"green","tags":["Giving","Component"]},"articleFiles":{"giving-mobile.png":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/24.donations\/02.web-component\/giving-mobile.png\" \/>","campaign-manager-web-comp.svg":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/24.donations\/02.web-component\/campaign-manager-web-comp.svg?decoding=auto&amp;fetchpriority=auto\" \/>","giving-component.svg":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/24.donations\/02.web-component\/giving-component.svg\" \/>","giving-responsive.svg":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/24.donations\/02.web-component\/giving-responsive.svg\" \/>","giving-web.svg":"<img style=\"width: 350px;\" alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/24.donations\/02.web-component\/giving-web.svg?decoding=auto&amp;fetchpriority=auto\" \/>","postman-logo-vertical-orange-2021.svg":"<img alt=\"\" src=\"https:\/\/docs.adyen.com\/user\/pages\/docs\/02.online-payments\/24.donations\/02.web-component\/postman-logo-vertical-orange-2021.svg\" \/>"}}
