There are several ways to make a button open the Double checkout, but the method below uses a class ID, which is the cleanest and most reliable approach - and the one we recommend using.
If your website is built with WordPress + Elementor, follow these steps to trigger the Double checkout when a visitor clicks a button.
Step 1 - Add a button in Elementor
Open the page where you want the donation button to appear.
Drag a new Elementor Button widget onto the page, or select an existing button you’d like to use.
Under Advanced → CSS Classes, enter a class name (for example):
open-double
💡 You can name it anything you want — just make sure it matches the script below.
Step 2 - Add a small script to open the Double checkout
Now you’ll tell your website to open the Double checkout when that button is clicked.
Go to Elementor → Custom Code → Add New.
Give it a name like “Open Double Button” - this will make it easy to identify later on.
Set Location: Before
</body>.Paste this code:
<script>
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.open-double');
buttons.forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
if (window.Double) {
Double.openWidget();
} else {
console.error('Double embed not loaded yet.');
}
});
});
});
</script>Publish the script.
💡 Pro tip
You can use the same script for multiple buttons - just give them all the same CSS class (e.g., open-double).