Skip to content
Search Articles/

less than a minute read • Updated 9 minutes ago

Let customers add a donation at checkout

How to add an input at checkout that lets customers add a donation of their chosen amount.

The following snippet adds a text input to the checkout to allow customers to add a donation to the cart when completing the checkout.

Add javascript

In the Foxy admin (https://admin.foxy.io), go to Settings > Templates and add the code to the Custom footer field (Twig is supported; it is injected before the closing </body> tag).

{% if context == "checkout" %}
<script>$('body').on('click', '#donation_confirm', function(e){
	e.preventDefault();
	// The FC.client.request() gets new JSON which clears out the shipping.
	// TODO: This will be fixed by Foxy, but for now we have a shim.
	var shipping_results = FC.json.shipping_address.shipping_results,
		shipping_service_description = FC.json.shipping_address.shipping_service_description,
		shipping_service_id = FC.json.shipping_address.shipping_service_id;
 
	var donation_id;
	var donation_existing = 0;
	for (i=0; i < FC.json.items.length; i++) {
		if (FC.json.items[i].code == 'donation') {
			donation_id = FC.json.items[i].id;
			donation_existing = FC.json.items[i].price;
		}
	}

	var donation_new = $("#donation").val() || 0;
 	FC.json.donation = donation_new;

	// MODIFY THE PRODUCT LINK BELOW
 	var add_link = 'https://'+FC.settings.storedomain+'/cart?name=Donation&price=' + donation_new + '&code=donation&quantity_max=1';
 	var remove_link = 'https://'+FC.settings.storedomain+'/cart?cart=update&quantity=0&id='+donation_id;

 	// Add and remove
 	if (donation_id && donation_new != donation_existing && donation_new > 0) {
 		FC.client.request(remove_link).done(function() {
 			FC.client.request(add_link).done(function() {
 				FC.json.shipping_address.shipping_results = shipping_results;
				FC.json.shipping_address.shipping_service_description = shipping_service_description;
				FC.json.shipping_address.shipping_service_id = shipping_service_id;
				FC.checkout.render();
				FC.checkout.getShippingOptions({address: FC.json.shipping_address});
 			});
 		});
 	} else {
 		var action_link = "";
 		if (donation_id && donation_new == 0) {
 			action_link = remove_link;
 		}
 		if (!donation_id && donation_new > 0) {
 			action_link = add_link;
 		}

 		if (action_link != "") {
 			FC.client.request(action_link).done(function() {
 				FC.json.shipping_address.shipping_results = shipping_results;
				FC.json.shipping_address.shipping_service_description = shipping_service_description;
				FC.json.shipping_address.shipping_service_id = shipping_service_id;
				FC.checkout.render();
				FC.checkout.getShippingOptions({address: FC.json.shipping_address});
 			});
 		}
 	}
});
FC.client.on("ready.done", function() {
	for (i=0; i < FC.json.items.length; i++) {
		if (FC.json.items[i].code == 'donation') {
			FC.json.donation = FC.json.items[i].price;
		}
	}
 	FC.checkout.renderAdditionalFields();
});
</script>
{% endif %}

You'll just need to modify the MODIFY THE PRODUCT LINK BELOW section to set the donation "product" as desired, the donation amount will come from the input you'll add in the next step. If your store is using link/form signing, you'll just need to create that link and sign it (using the tool in the "sample code" section of the admin, if you don't have another way) and paste it in there as needed - ensuring the price field is encrypted as an open field. Make sure it's set to the appropriate category so it has the proper shipping and taxes applied to it.

Add HTML

In the Foxy admin (https://admin.foxy.io), go to Settings > Checkout and add the field to Custom checkout fields (use Custom checkout fields for multiship to collect it under each shipping address; Twig is supported):

<div class="fc-form-group">
	<div class="col-sm-8 col-sm-offset-3">
		<div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
			<label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
				Would you like to add a donation?
			</label>
			<div class="fc-form-group fc-form-group--multiple-inline">
				<div class="col-xs-4">
					<input type="text" id="donation" value="" class="fc-form-control fc-form-control--donation">
				</div>
				<div class="col-xs-8">
					<p>
						<button type="button" id="donation_confirm" class="fc-button">Add donation</button>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.