Realex Multi-payment Templates

Introduction

To take multiple payments for a single order, primary and additional payment details must be submitted to the Aurora payment setup process.

Realex has been implemented using a PCI compliant HPP (Hosted Payment Page) payment process and as such only additional payment details should be submitted, which should also include a payment amount for each additional payment. Aurora will determine the outstanding order amount and initialise the Realex HPP process accordingly.

Additional Payment Data Structure

Additional payments are submitted using the following request data structure:

Where "x" is the additional payment number or index.

Example HTML Form

The following HTML example shows how multiple additional payments can be submitted to the Aurora payment setup process.

<form action="/checkout/payment-setup">
 
	<h2>Payment 1.</h2>
    <input type="hidden" name="additional_payments[0][transaction_type]" value="Givex GiftCard" />
    <div>
        <labelAmount:</label>
        <input type="text" name="additional_payments[0][amount]" value="" />
    </div>
    <div>
        <label>Card Number:</label>
        <input type="text" name="additional_payments[0][card_number]" value="" />
    </div>
    <div>
        <label>Card Expiry:</label>
        <select name="additional_payments[0][expiry_month]">
            <option value="">MM</option>
            <option value="01">1</option>
            <option value="02">2</option>
            <option value="03">3</option>
            <option value="04">4</option>
            <option value="05">5</option>
            <option value="06">6</option>
            <option value="07">7</option>
            <option value="08">8</option>
            <option value="09">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select name="additional_payments[0][expiry_year]">
            <option value="">YYYY</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
            <option value="2026">2026</option>
            <option value="2027">2027</option>
        </select>
    </div>
    <div>
        <label>CVV Number:</label>
        <input type="text" name="additional_payments[0][cvv]" value="" size="3" />
    </div>
    <div>
        <label>Amount to Redeem:</label>
        <input type="hidden" name="additional_payments[0][amount]" value="0" />
        <span>0.00</span>
    </div>
 
	<h2>Payment 2.</h2>
    <input type="hidden" name="additional_payments[1][transaction_type]" value="Givex GiftCard" />
    <div>
        <labelAmount:</label>
        <input type="text" name="additional_payments[1][amount]" value="" />
    </div>
    <div>
        <label>Card Number:</label>
        <input type="text" name="additional_payments[1][card_number]" value="" />
    </div>
    <div>
        <label>Card Expiry:</label>
        <select name="additional_payments[1][expiry_month]">
            <option value="">MM</option>
            <option value="01">1</option>
            <option value="02">2</option>
            <option value="03">3</option>
            <option value="04">4</option>
            <option value="05">5</option>
            <option value="06">6</option>
            <option value="07">7</option>
            <option value="08">8</option>
            <option value="09">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select name="additional_payments[1][expiry_year]">
            <option value="">YYYY</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
            <option value="2026">2026</option>
            <option value="2027">2027</option>
        </select>
    </div>
    <div>
        <label>CVV Number:</label>
        <input type="text" name="additional_payments[1][cvv]" value="" size="3" />
    </div>
    <div>
        <label>Amount to Redeem:</label>
        <input type="hidden" name="additional_payments[1][amount]" value="0" />
        <span>0.00</span>
    </div>
 
</form>

Get Balance AJAX Interface

To validate a balance driven additional payment method such as a Givex Gift Card, please use this Ajax Checkout & Payment method.

Example Realex Payment Setup Template

The following example process demonstrates how the payment setup template can be used to achieve multiple payments using Givex Gift Cards in conjunction with the Realex HPP payment process.

The checkout process in this case would be:

• The user enters delivery details on the checkout page and submits to the Aurora payment setup process.
• Aurora renders the payment setup page as a multi-payment gift card interface:

• The user enters gift card details and validates each card by submitting gift card details to the Aurora get balance process:

• Where the card cannot be validated or has no balance, the gift card cannot be used:
  

* The user submits all validated gift cards to the Aurora payment setup process over AJAX: * Aurora renders the Realex HPP iFrame to be displayed inline:

• The user progresses through the Realex HPP process

• Aurora redirects the user to the order completion page.

• • If the primary payment or any of the additional payments cannot be completed successfully, Aurora will void all payments that have already been processed and redirect the user to either the checkout or payment page depending on the Aurora Realex integration configuration.

Example Template Code

checkout/realex-payment-setup.tpl.html

{if $ajax}

{**
 * Where the payment setup process is being requested over AJAX, 
 * render the Realex payment iFrame
 *}

<iframe id="realex_payment" src="{$realex_form_callback_url}" width="480" height="720" frameborder="none"></iframe>

{else}

{**
 * Where the payment setup process is being requested as part of the checkout submission, 
 * render the multi-payment gift card interface
 *}

<script type="text/javascript">

 
    var payment_total = {$payment_total};
    var gift_card_index = 0;
    var gift_card_total = 0;
    var outstanding_amount = payment_total;

    {literal}

    $(document).on('click', '.add_gift_card', function() {

        add_gift_card($(this));

    });

    $(document).on('click', '.check_gift_card', function() {

        check_gift_card($(this));

    });

    $(document).on('click', '.remove_gift_card', function() {

        remove_gift_card($(this));

    });

    $(document).on('click', '.complete_payment', function() {

        start_card_payment();

    });

    function add_gift_card(source) {

        gift_card_index++;

        var gift_card = $('<div class="gift_card" />').append($('.gift_card_template').html().replace(/CARD_INDEX/g, gift_card_index));

        $('.gift_cards_form').append(gift_card);

        gift_card.show();

    }

    function check_gift_card(source) {

        var gift_card = source.parent();

        var card_number = get_gift_card_field(gift_card, 'card_number');
        var expiry_month = get_gift_card_field(gift_card, 'expiry_month');
        var expiry_year = get_gift_card_field(gift_card, 'expiry_year');
        var cvv = get_gift_card_field(gift_card, 'cvv');
        var amount = get_gift_card_field(gift_card, 'amount');
        var transaction_type = get_gift_card_field(gift_card, 'transaction_type');

        source.attr('disabled', true).html('Validating gift card...');

        var request_data = {
            payment_type: 'hcc',
            transaction_type: 'Givex GiftCard',
            card_number: card_number.val(),
            expiry_month: expiry_month.val(),
            expiry_year: expiry_year.val(),
            cvv: cvv.val()
        };

        $.get('/checkout/payment-balance', request_data, function(response) {

            if (response.balance > 0) {

                source.html('Card is valid');

                var amount_to_redeem = response.balance >= outstanding_amount ? outstanding_amount : response.balance;

                amount.val(amount_to_redeem);
                amount.parent().find('span').html(amount_to_redeem);

                card_number.before(card_number.val()).hide();
                expiry_month.before(expiry_month.val()).hide();
                expiry_year.before(expiry_year.val()).hide();
                cvv.before(cvv.val()).hide();

            } else {

                source.html('Card is not valid or has no balance');

                amount.val(0);

            }

            update_amounts();

        }, 'json');

    }

    function get_gift_card_field(gift_card, field_name) {

        return $(gift_card).find('[name*="'+field_name+'"]');

    }

    function remove_gift_card(source) {

        source.parent().remove();

        reset_card_payment();

        update_amounts();

    }

    function reset_card_payment() {

        $('.embedded_payment').empty();

        $('.complete_payment').show();
    }

    function start_card_payment() {

        $.get('/checkout/payment-setup', $('.gift_cards_form').serialize(), function(response) {

            $('.embedded_payment').append(response);

            $('.complete_payment').hide();

        }, 'html');

    }

    function update_amounts() {

        gift_card_total = 0;
        outstanding_amount = payment_total;

        $('.gift_cards .gift_card').each(function(i, gift_card) {

            var amount = get_gift_card_field(gift_card, 'amount');

            if (amount.length > 0) {
                gift_card_total += amount.val() * 1;
                outstanding_amount -= amount.val() * 1;
            }

        });

        $('.gift_card_total').html(gift_card_total);
        $('.outstanding_amount').html(outstanding_amount);

    }

    {/literal}

</script>

<div class="gift_card_template" style="display:none">
    <h2>Gift Card CARD_INDEX.</h2>
        <div>
            <label>Card Number:</label>
            <input type="text" name="additional_payments[CARD_INDEX][card_number]" value="" />
        </div>
        <div>
            <label>Card Expiry:</label>
            <select name="additional_payments[CARD_INDEX][expiry_month]">
                <option value="">MM</option>
                <option value="01">1</option>
                <option value="02">2</option>
                <option value="03">3</option>
                <option value="04">4</option>
                <option value="05">5</option>
                <option value="06">6</option>
                <option value="07">7</option>
                <option value="08">8</option>
                <option value="09">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            <select name="additional_payments[CARD_INDEX][expiry_year]">
                <option value="">YYYY</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
                <option value="2025">2025</option>
                <option value="2026">2026</option>
                <option value="2027">2027</option>
            </select>
        </div>
        <div>
            <label>CVV Number:</label>
            <input type="text" name="additional_payments[CARD_INDEX][cvv]" value="" size="3" />
        </div>
        <div>
            <label>Amount to Redeem:</label>
            <input type="hidden" name="additional_payments[CARD_INDEX][amount]" value="0" />
            <span>0.00</span>
        </div>
        <br />
        <input type="hidden" name="additional_payments[CARD_INDEX][transaction_type]" value="Givex GiftCard" />
    <button class="remove_gift_card btn btn-primary">Remove card</button>
    <button class="check_gift_card btn btn-primary">Validate card</button>
    <div style="clear:both"></div>
    <br />
</div>

<div style="width:100%">
    <div style="width:480px;margin-left:auto;margin-right:auto">
        <div class="gift_cards">
            <h1>Gift Cards</h1>
            <form name="gift_cards" class="gift_cards_form"></form>
            <button class="add_gift_card btn btn-primary" style="margin-top:1.0em">Add gift card</button>
        </div>
        <div class="card_payment">
            <h1>Card Payment</h1>
            <div>Order total: <span class="payment_total">{$payment_total}</span></div>
            <div>Gift Card total: <span class="gift_card_total">0.00</span></div>
            <div>Amount to pay: <span class="outstanding_amount">{$payment_total}</span></div>
            <br />
            <div class="embedded_payment"></div>
            <button class="complete_payment btn btn-primary" style="margin-top:1.0em">Complete payment</button>
        </div>
    </div>
</div>

{/if}