<div class="form-container">
    <div id="payment-form">
        <div class="form-header">
            <h1 class="Header-companyName">{$siteName}</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/{$add_payment.id}">Back to Additional Payment</a>
        </div>
    </div> 
</div> 

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

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

    payment: function (data, actions) {
        return actions.payment.create({
            transaction: {
                amount: {$amount},
                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: '{$add_payment.id}',
                currency: '{$currency}',
                payment_method: '{$payment_method}',
                paymentId: payment.reference,
                payerId: payment.client
            }
        })
        .done(function(response) {
            if(response.success) {
                window.location = '{$success_url}';
            } else {
                window.location = '{$decline_url}';
            }
        });
    }

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