Our 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 same payment method that the shopper used to make the original payment.
Before you begin
The Giving Component is only available for the Advanced flow integration.
This page assumes you have already:
Before starting your Giving integration:
- Enable and integrate a supported payment method.
- Enable Giving in your test Customer Area.
- Set up the Adyen Giving merchant webhook in your Customer Area.
How it works
The following diagram shows the Giving flow after the shopper pays for their original transaction.
Step 1: Show Giving in your payment form
Before you show the option to donate, the shopper must make a payment with a payment method that supports donations. If their payment is successful, show the Giving Component in your payment form:
Create a DOM element for Giving, placing it where you want the form to be rendered:
Configure the Giving Component with the following parameters:
Parameter name Required Description
Object containing suggested donation amounts.
Background image that appears in the donation form.
Required aspect ratio: 2:3:1. More guidelines and recommendations.
Description of your chosen nonprofit.
Logo of your chosen nonprofit.
The name of your chosen nonprofit.
Create an event handler for
onDonate. This is called when the shopper selects the amount they want to donate. In the example below, we use
Create an event handler for
onCancel. This is called when the shopper declines to donate. In the example below, we use
By default, the Component shows a Not now button. Your shopper can select this button to decline to donate. Set to false to remove this button.
The URL of the nonprofit. If passed, the Component renders a link to your chosen nonprofit.
message: This is the message you want to show your shoppers.
linkText: The text you want to show for your link.
link: The URL for your Terms and Conditions.
If you didn't persist a previous instance of the
AdyenCheckoutobject, create a new checkout object.
checkout.createmethod to create and mount an instance of the Giving Component.
When the shopper selects a donation amount, the Component calls the
state.isValidis true, collect the values passed in
state.datawhich contains the donation amount that the shopper selected.
state.datato your server.
Step 2: Make a donation
When the shopper chooses to donate, the Component calls the
onDonate event, which contains a
state.isValidis true, collect the
state.dataand pass this to your server.
- From your server, make a /donations request to either:
- Use the same payment method as the original transaction. Include the unique donation token that you get after a payment.
- Use a stored payment method, for example, the shopper's stored card details for subscription payments.
From your server, make a POST request to /donations specifying:
|donationAccount||The Adyen account name of your nonprofit.
For testing, use MyCharity_Giving_TEST.
For accepting live donations, use the account name that we give you after choosing your nonprofit.
|donationOriginalPspReference||The PSP reference of the original payment.|
|donationToken||For cards, the
For iDeal, the
Step 3: Get the donation outcome
To get the outcome of each donation asynchronously, enable the Adyen Giving merchant webhook. The webhook includes
For a successful donation, the event contains
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.