Skip to main content

How to use Double with custom buttons

In this article we'll explain how to use Double with custom buttons

Updated over 5 months ago

Double comes with an eye-catching overlay donate button that is displayed by default on your website - so you don't have to make any changes to your site in order to get started.

If you want your custom buttons or CTA to open the checkout, you’ll need to add a small JavaScript function to them.

It is recommended that you leave the default overlay button enabled even if you use your own buttons to open the checkout - since it has been shown to increase donations.

The basic JavaScript snippet that opens the default checkout is:

Double.openCheckout()

and you can pass in the following parameters to make it even more powerful:

campaign - Opens the checkout with a specific campaign.

amount - Opens the checkout with a pre-selected amount.

currency - Opens the checkout with a pre-selected currency. You can choose between usd, eur, ils, gbp, cad, and aud.

frequency - Opens the checkout with a pre-selected frequency (Monthly, Yearly, etc.).

charges - When using a recurring donation frequency parameter, you can add a charges parameter to pre-configure the amount of recurring charges. For example, a monthly donation for 12 charges (months).

summary: true - Opens the checkout with the summary tab already open. This is useful if donors choose their donation amount before opening the checkout, using buttons or links with predefined parameters. Please note that this parameter only works if the amount parameter is also set.

Below are some examples:

Open the default checkout

Double.openCheckout()

Open a specific campaign

Double.openCheckout({ campaign: 'campaign-slug' })

Open with a pre-selected frequency

Double.openCheckout({ frequency: 'monthly'})

Open with a pre-selected amount

Double.openCheckout({ amount: 10000})

Open with a pre-selected campaign, amount, frequency, and charges

Double.openCheckout({ campaign: 'campaign-slug', amount: 100, frequency: 'monthly', charges: 6})
Did this answer your question?