<div class="form-container">
    <form id="payment-form">
        <div class="form-header">
            <h1 class="Header-companyName">{$siteName}</h1>
            <h2 class="Header-purchaseDescription">{$title}</h2>
        </div>
        <div class="form-body">
            <script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
            <button class="pay_btn" type="button" onClick="payWithRave()">Pay {$price_formatted}</button>
            <a class="back_to_order" href="/dashboard/add-payment/{$add_payment.id}">Back to Additional Payment</a>
        </div>
    </form>
</div>

<script type="text/javascript">
    const API_publicKey = '{$flutterwave_key}';

    document.addEventListener("DOMContentLoaded", payWithRave());

    function payWithRave() {
        var x = getpaidSetup({
            PBFPubKey: API_publicKey,
            customer_email: '{$payee_email}',
            amount: '{$amount}',
            currency: '{$currency}',
            txref: '{$order.id}',
            onclose: function() {
            },
            callback: function(response) {
                if (
                    response.respcode == "00" ||
                    response.respcode == "0"
                ) {
                    $.ajax({
                        method: "POST",
                        url: '{$callback_url}',
                        data: { 
                            handle: 'add-payment',
                            nodeId: '{$add_payment.id}',
                            currency: '{$currency}',
                            payment_method: '{$payment_method}',
                            paymentId: response.transaction_id
                        }
                    })
                    .done(function(resp) {
                        if(resp.success) {
                            window.location = '{$success_url nofilter}';
                        } else {
                            window.location = '{$decline_url nofilter}';
                        }
                    });
                } else {
                    window.location = '{$decline_url nofilter}';
                }

                x.close(); // use this to close the modal immediately after payment.
            }
        });
    }
</script>