Giving for Web Component

Requirements

The Giving Component is only available for the Advanced flow integration.

This page assumes you have already:

• Built a Components integration.

Before starting your Giving integration:

1. Enable and integrate a supported payment method.
2. Reach out to your Adyen contact to create a campaign.
3. Use the Campaign Manager to set up your donation campaign preferences.
4. Set up the Adyen Giving merchant webhook in your Customer Area.

How it works

After a shopper completes their payment for the original transaction with a payment method that supports donations:

1. From your server, make a /donationCampaigns request to get the details of your active donation campaigns.
2. Depending on the donation type of the campaign, you present the option to donate by either:
   • Show the shopper a donation form with fixed amounts.
   • Show the shopper a round-up checkbox that suggests to round up their payment amount as a donation.
3. From your server, make a /donations request to make a donation.
4. Get the outcome from a webhook.

The following diagram shows the Giving Campaign Manager flow after the shopper pays for their original transaction.

Step 1: Get details of your active donation campaigns

If 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.

From your server, make a POST /donationCampaigns request, specifying:

Field name	Required	Description
merchantAccount		Your merchant account name.
currency		The three-character ISO currency code.
locale		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, en-US.

The 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.

When you make a request to get your active donation campaigns, the response you receive depends on your donation type:

Step 2: Show Giving in your payment form

To show the Giving Component in your payment form:

1. Create a DOM element for Giving, placing it where you want the form to be rendered:

   <div id='donation-container'></div>

2. Use 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:

3. If you didn't persist a previous instance of the AdyenCheckout object, create a new checkout object.

4. Use the checkout.create method to create and mount an instance of the Giving Component.

   When 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.

5. Pass the state.data to your server.

Step 3: Make a donation

From your server, make a donation request, using the same payment method as the original transaction.

Step 4: Get the donation outcome

You get the donation outcome of each donation in a webhook. To receive these webhooks, enable the Adyen Giving merchant webhook, which includes eventCode: DONATION.

For a successful donation, the event contains success: true.

Use the originalReference to associate the donation to the shopper's original transaction.

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.

Test and go live

Before going live with your integration, use our test cards to test your integration.

See also