<!DOCTYPE html>
<html>
<head>
	<title>Example Template</title>
	<link rel="stylesheet" type="text/css" href="{stylesheet=store_example/style}" />
	{exp:jquery:script_tag}
</head>
<body>
<div id="header">
	<h1>Example Templates</h1>
</div>
<div id="page">

		<h2>Order Payment</h2>

		{!-- This example uses the dummy payment gateway. To test, use the card number 4111111111111111 and any current expiry date --}
		{exp:store:payment order_hash="{segment_3}" return="store_example/payment" payment_method="dummy"}
			<p>
				<strong>Order ID:</strong> {order_id}<br />
				<strong>Order Date:</strong> {order_date format="%d/%m/%y"}<br />
				<strong>Order Status:</strong> {order_status}<br />
				<strong>Order Total:</strong> {order_total}<br />
				<a href="{path='store_example/order/{order_hash}'}">View order details</a>
			</p>
			{if payment_status == 'success'}
				<div class="payment_success">
					<p>Thank you, your payment was successful!</p>
					<p><strong>Message:</strong> {payment_message}</p>
					<p><strong>Transaction ID:</strong> {payment_txn_id}</p>
				</div>
			{if:elseif payment_status == 'declined'}
				<div class="payment_error">
					<p>Sorry, your payment was declined. ({payment_message})</p>
				</div>
			{if:elseif payment_status == 'failed'}
				<div class="payment_error">
					<p>Sorry, your payment failed. ({payment_message})</p>
				</div>
			{/if}
			{if is_order_paid}
				<p>Thank you, this order has been paid!</p>
			{/if}

			{if is_order_unpaid}
				<p>This order has not yet been paid</p>
			<table class="pad">

	    			<tr>
						<td>Card No</td>
						<td><input type="text" name="payment[card_no]" /></td>
	    			</tr>
	    			<tr>
						<td>Card Name</td>
						<td><input type="text" name="payment[card_name]" /></td>
	    			</tr>
	    			<tr>
						<td>Expiry Date</td>
						<td>
							<select name="payment[exp_month]">
								<option value=""></option>
								<option value="01">01</option>
								<option value="02">02</option>
								<option value="03">03</option>
								<option value="04">04</option>
								<option value="05">05</option>
								<option value="06">06</option>
								<option value="07">07</option>
								<option value="08">08</option>
								<option value="09">09</option>
								<option value="10">10</option>
								<option value="11">11</option>
								<option value="12">12</option>
							</select>&nbsp;
							<select name="payment[exp_year]">
								<option value=""></option>
								<option value="2011">2011</option>
								<option value="2012">2012</option>
								<option value="2013">2013</option>
								<option value="2014">2014</option>
								<option value="2015">2015</option>
								<option value="2016">2016</option>
								<option value="2017">2017</option>
								<option value="2018">2018</option>
								<option value="2019">2019</option>
								<option value="2020">2020</option>
							</select>
						</td>
					</tr>
	    			<tr>
						<td>Card Security Code<br /></td>
						<td><input type="text" name="payment[csc]" size="4" /></td>
	    			</tr>
					<tr>
						<td></td>
						<td><input type="submit" name="submit" value="Submit Payment" /></td>
					</tr>

				</table>

			{/if}

		{/exp:store:payment}


</div>

</body>
</html>