<!doctype html>
<html lang="en">
    <head>
        {block name='head'}
            {include file='_partials/head.tpl'}
        {/block}
        <link rel="canonical" href="/dashboard/authorization/">
    </head>
<body>

    <div class="form-container">
        <div id="payment-form">
            <div class="form-header">
                <h1 class="Header-companyName">{$site_title}</h1>
                <h2 class="Header-purchaseDescription">{$title}</h2>
            </div>
            <div class="form-body">
                <div id="safepay-container" style="text-align:center;"></div>
                <a class="back_to_order" href="/dashboard/add-payment/{$addPayment.id}">Back to Order</a>
            </div>
        </div> 
    </div> 

    <script>window.jQuery || document.write('<script src="/static/common/libs/jquery/3.2.1/jquery.min.js"><\/script>')</script>
    {block name='javascript_bottom'}
        {include file="_partials/javascript.tpl" javascript=$javascript.bottom}
    {/block}

    <script src="https://storage.googleapis.com/safepayobjects/api/safepay-checkout.min.js"></script>

    <script type="text/javascript">
    safepay.Button.render({
        env: '{$safepay_mode}',
        amount: {$price},
        client: {
            "sandbox": "{$safepay_sandbox_client}",
            "production": "{$safepay_live_client}"
        },

        payment: function (data, actions) {
            return actions.payment.create({
                transaction: {
                    amount: {$price},
                    currency: '{$currency}'
                }
            })
        },

        onCancel: function (data, actions) {
            window.location = '{$decline_url}';
        },

        onCheckout: function(payment, actions) {
            $.ajax({
                method: "POST",
                url: '{$callback_url}',
                data: { 
                    handle: 'add-payment',
                    nodeId: '{$addPayment.id}',
                    paymentId: payment.reference,
                    payerId: payment.client
                }
            })
            .done(function(response) {
                if(response.success) {
                    window.location = '{$success_url}';
                } else {
                    window.location = '{$decline_url}';
                }
            });
        }

        }, '#safepay-container');
    </script>
</body>
</html>