<!doctype html> 
<html> 
<?php require_once('partials/header.html'); ?>
<body> 
<?php require_once('partials/banner.html'); ?>
<div class="container"> 
    <div class="row"> 
        <?php require_once('partials/navigation.html'); ?>
        <div class="col-9"> 
            <div class="row"> 
                <form action="/processBrowserPayment" class="col-12 form-horizontal" method="post">  <h3>Authorize with UnionPay SecurePay</h3> 
                    <div class="alert alert-warning" role="alert">
                        To access the browser payment simulator, copy and paste the redirectUrl from the response into a new browser window. Then complete the payment.
                    </div>
                    <fieldset> 
                        <input type="hidden" readonly="readonly" name="apiOperation" value="INITIATE_BROWSER_PAYMENT" size="20" maxlength="80"/>
                        <input type="hidden" readonly="readonly" name="method" value="PUT" size="20" maxlength="80"/>

                        <div class="form-group">  <label class="col-md-7 control-label" for="order-id">Order ID (Auto generated unique Order ID)</label> 
                            <div class="col-md-7"> 
                                <input id="order-id"  class="form-control input-md" type="text" size="19" maxlength="80"   name="orderId" value="<?php echo 'order-' . bin2hex(openssl_random_pseudo_bytes(8)) ?>"/> 
                            </div>
                        </div>
                        <div class="form-group">  <label class="col-md-7 control-label" for="transactionId">Transaction ID (Auto generated unique Transaction ID)</label> 
                            <div class="col-md-7"> 
                                <input id="transactionId"  class="form-control input-md" type="text" size="19" maxlength="80"   name="transactionId" value="<?php echo 'trans-' . bin2hex(openssl_random_pseudo_bytes(8)) ?>"/> 
                            </div>
                        </div>
                        <div class="form-group">  <label class="col-md-7 control-label" for="funds-type">Source of Funds</label> 
                            <div class="col-md-7"> 
                                <input id="funds-type" class="form-control input-md" type="text" name="sourceOfFunds[type]" value="UNION_PAY" size="19" maxlength="80" readonly/>
                            </div>
                             
                        </div>
                        <div class="form-group">  <label class="col-md-7 control-label"
                                                         for="transaction[amount]">Amount</label> 
                            <div class="col-md-7"> 
                                <input id="transaction[amount]" required="" class="form-control input-md" type="text"
                                       name="transaction[amount]" value="" size="8" maxlength="13"/>
                            </div>
                        </div>
                        <div class="form-group">  <label class="col-md-7 control-label" for="transaction[currency]">Currency</label> 
                            <div class="col-md-7">
                                <input class="form-control input-md" id="transaction[currency]" type="text"
                                       name="transaction[currency]"  size="8" maxlength="3" value="<?= $currency ?>" />
                            </div>
                             
                        </div>
                         
                        <div class="form-group">  <label class="col-md-7 control-label" for="process"></label> 
                            <div class="col-md-7"> 
                                <button id="process" name="process" class="btn btn-primary">Authorize with UnionPay</button>
                                 
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
 <?php require_once('partials/spinner.html'); ?>

</body>
</html> 
