Realex Payments Templates

This guide details how to setup checkout templates to be used with the Realex payment method.

Site Text

The Aurora Realex integration utilises the following error messages as defined with Content > Site Text

PagePartDefault
BasketError: Basket TamperingThe basket has changed during the payment process, unable to proceed
CheckoutPayment Error: Card DeclinedThe bank has declined your payment request
CheckoutPayment Error: Payment Method ErrorThe payment was unsuccessful, please try again or try another payment method
CheckoutPayment Error: Payment Provider ErrorThere was an error whilst contacting our payment provider, please try again
CheckoutPayment Error: Payment Provider Not AvailableThere was an error whilst contacting our payment provider, please contact us and report this issue
CheckoutPayment Error: Unknown ErrorThere was an error whilst taking payment, please contact us and report this issue

👍

Please see the Site Text support article for more details.

Checkout Errors

When an error occurs during the HCC payment process, the user is redirected back to the checkout with an appropriate message. It's the responsibility of the checkout template to display each error respectively.

The following error keys are used to reflect different error types and will be accompanied by an appropriate error message generated from the Site Text subsystem, as defined above:

  • failed_payment - The payment has failed.
  • store_order - There was an error during the order storage process.
  • basket_tampering - The basket changed between initiating and completing the payment process.

All checkout errors are presented to the template within the $errors template variable in a key/pair format i.e.

{if $errors}
  {foreach from=$errors key="key" item="message"}
  <p>{$key}: {$message}</p>
  {/foreach}
</div>
{/if}

Template Modifications

The Aurora Realex HPP implementation utilises the iFrame based integration and as such requires three new templates and a small update to the existing checkout template to facilitate the HCC checkout journey.

In addition to this, there is a small optional update to the Members template to hide Credit Card management when not supported.

Update to Checkout Template

The checkout template must be updated to submit a "payment_type" of "hcc" to initialise the HCC checkout process i.e.

<input type="hidden" name="payment_type" value="hcc" />

Update to Members Credit Cards Template

The credit card section of the members area can be displayed or disabled when card storage is not supported by the selected payment provider using the following:

{if $card_storage_supported}...{/if}

New Templates

  • Payment template - a full page template containing a payment option fragment
  • Realex Payment Setup template - a HTML fragment template containing an iFrame and the Realex HPP initialisation script
  • Realex Payment Callback template - a HTML fragment template that submits encrypted response data back to Aurora for processing

Example Payment Template

checkout/payment.tpl.html

{include file="_includes/header.tpl.html"}

{$payment_fragment}

{include file="_includes/footer.tpl.html"}

Template variables:

  • $payment_fragment - contains the payment HTML fragment to initialise the Realex HPP solution; this is built from the payment setup template.
  • $basket - the basket contents
  • $order_total - the order total amount before discount
  • $order_discount - the order discount amount
  • $delivery_total - the delivery amount before discount
  • $delivery_discount - the delivery discount amount
  • $delivery_option - the selected delivery option
  • $delivery_estimate - the delivery estimate date
  • $payment_total - the final payment amount after discounts

Example Realex Payment Setup Template

checkout/realex-payment-setup.tpl.html

<div style="width:100%">
    <div style="width:480px;margin-left:auto;margin-right:auto">
        <iframe id="realex_payment_{$smarty.now}" src="{$realex_form_callback_url}" width="480" height="720" frameborder="none"></iframe>
    </div>
</div>

Template variables:

  • $realex_form_callback_url - contains the URL to load a HTML form that will submit to the Realex HPP solution
  • $basket - the basket contents
  • $order_total - the order total amount before discount
  • $order_discount - the order discount amount
  • $delivery_total - the delivery amount before discount
  • $delivery_discount - the delivery discount amount
  • $delivery_option - the selected delivery option
  • $delivery_estimate - the delivery estimate date
  • $payment_total - the final payment amount after discounts

Example Realex Payment Form Template

checkout/realex-payment-form.tpl.html

<p>Loading payment details ...</p>

{* DO NOT CHANGE THE BELOW *}
<form id="realex_form" method="POST" action="{$realex_form_action}">
    {foreach from=$realex_form_data key="name" item="value"}
    <input type="hidden" name="{$name}" value="{$value}" />
    {/foreach}
</form>
<script type="text/javascript">
    document.getElementById("realex_form").submit();
</script>
{* DO NOT CHANGE THE ABOVE *}

Template variables:

  • $realex_form_action - contains the Realex HPP endpoint as defined within the Aurora Realex integration settings
  • $realex_form_data - contains all data required to build and submit a form to the Realex HPP endpoint

Example Realex Payment Complete Template

checkout/realex-payment-callback.tpl.html

<p>Payment complete, please wait...</p>

{* DO NOT CHANGE THE BELOW *}
<form name="callback" action="{$payment_setup_submit_url}" method="POST">
    <input type="hidden" name="encrypted_payment_request_data" value="{$encrypted_payment_request_data}" />
</form>
<script type="text/javascript">
    document.forms['callback'].submit();
</script>
{* DO NOT CHANGE THE ABOVE *}

Template variables:

  • $payment_setup_submit_url - contains the callback URL to the Aurora payment processor
  • $encrypted_payment_request_data - contain encrypted payment transaction response data to be processed