Developer › Tutorials for Web Developers & Designers › eCommerce Design

Custom Payment Forms and Donations

It is often a requirement of charity organisations to accept donations on their website.

1) Build a Form

The form contains a <ss:forms:paymentmethod> control and calls a function donate() on submit.

<ss:forms:form id="donation_form" onsubmitredirect="/commerce/order/success/?sale_id=[? $sale_id ?]" contactmode="store" onsubmitserver="donate($this.getValuesForComponent())">
	<ss:forms:row label="Full Name">
		<ss:forms:editbox id="contact_first_name" width="100" datacolumn="contact_first_name" validations="mandatory" />
		<ss:forms:editbox id="contact_last_name" width="120" datacolumn="contact_last_name" validations="mandatory" />
	</ss:forms:row>
	<ss:forms:row label="E-Mail Address">
		<ss:forms:editbox id="contact_email" width="200" datacolumn="contact_email" validations="mandatory" />
	</ss:forms:row>
	<ss:forms:row label="Address">
		<ss:forms:textarea id="contact_address" width="200" datacolumn="contact_address" height="32" validations="mandatory" />
	</ss:forms:row>
	<ss:forms:row label="Suburb / City">
		<ss:forms:editbox id="contact_suburb_city" width="200" datacolumn="contact_suburb_city" validations="mandatory" />
	</ss:forms:row>
	<ss:forms:row label="Postcode">
		<ss:forms:editbox id="contact_postcode" width="60" datacolumn="contact_postcode" validations="mandatory" />
	</ss:forms:row>
	<ss:forms:row label="State">
		<ss:forms:editbox id="contact_state" width="200" datacolumn="contact_state" validations="mandatory" />
	</ss:forms:row>
	<ss:forms:row label="Contact Phone">
		<ss:forms:editbox id="contact_phone" validations="mandatory" />
	</ss:forms:row>
	<ss:forms:row description="Indicate the amount to donate" label="Donation Amount">
		<ss:forms:money id="donation_amount" width="100" datacolumn="donation_amount" validations="mandatory" align="left" />
	</ss:forms:row>

2) Server Code

This is where the donate() function is declared. You can add items to the cart here with a custom amount.