<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<section class="all-content-page">			
    <!-- Banner Categories -->					
    <div class="baner-top-categories">
        <div class="categories-text-hero">
            <h1>PROCESS PAYMENT</h1>
        </div>
        <img src="<?=base_url()?>assets/frontend_new/images/banner/11.jpg" alt="banner">
    </div>		

    <div class="container">
        <div class="row">
            <div class="col-sm-12" style="text-align:center;">
                <br><br>
                <!-- <pre><div id="result-json">JSON result will appear here after payment:<br></div></pre>  -->

                <p><img src="<?= base_url('assets/frontend/img/midtrans-logo.jpg'); ?>"><br>
                <img src="<?= base_url('assets/frontend/img/creditcard.jpg'); ?>"></p>


                <h3>Please click on PROCESS PAYMENT to finalize your payment</h3>
                <br>

                <button class="btn btn-primary" id="pay-button">PROCESS PAYMENT</button>
            
            <!-- TODO: Remove ".sandbox" from script src URL app.sandbox.midtrans.com for production environment. Also input your client key in "data-client-key" -->
                <script src="https://app.midtrans.com/snap/snap.js" data-client-key="<?= $client_key; ?>"></script>

                <script type="text/javascript">

                document.getElementById('pay-button').onclick = function(){

                    // SnapToken acquired from previous step
                    snap.pay('<?= $snapToken; ?>', {
                        // Optional
                        onSuccess: function(result){
                            /* You may add your own js here, this is just example */
                            window.location.replace("http://www.kanvakanva.com/midtrans/veritrans_payment_success"); 
                            /* document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2); */
                        },
                        // Optional
                        onPending: function(result){
                            /* You may add your own js here, this is just example */ 
                            /* document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2); */
                        },
                        // Optional
                        onError: function(result){
                            /* You may add your own js here, this is just example */ 
                            /* document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2); */
                        }
                    });

                };

                </script>
                
                <br><br><br>

            </div><!-- end col-sm-12-->
        </div><!-- end row-->
    </div><!-- end container -->

</section>