====== Adding a donation option on the Checkout ======

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 ====
On the configuration page of your store's FoxyCart administration, under "Cart" look for "Add custom header or footer code to your website", and add this code into the "Footer" text area.

<code javascript>
{% 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 FoxyCart, 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 %}
</code>

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 [[https://wiki.foxycart.com/v/2.0/hmac_validation|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 ====

Next, and still on the configuration page, under "Checkout" look for "Add custom form fields to your checkout", enable it and paste the following into the text box within:

<code html>
<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="{{ donation }}" 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>
</code>