{if $processor_template_data}
{literal}
<script src="content/vendors/braintree/js/card-validator.min.js" type="text/javascript"></script>
<script src="content/vendors/braintree/js/braintree.js" type="text/javascript"></script>
{/literal}
<script type="text/javascript">
    var colorTransition = 'color 100ms ease-out';
    var braintreeclient = null;
    var bt_token = "{$processor_template_data.client_token}";
    var bt_amount = "{$processor_template_data.tarnsaction_amount}";
    var storeInVault = "{$processor_template_data.storeInVault}"
    {literal}
    $(document).ready(function(){
        var checkout;
        var singleUse = ($.trim(storeInVault) != '' && storeInVault == 'Yes')?false:true;
        braintree.setup(bt_token, 'custom', {
            onReady: function (integration) {
                checkout = integration;
            },
            onPaymentMethodReceived: function (payload) {
                $("#id_method_way").val('');
                if (payload.nonce != ''){
                    $("#id_checkouttype").val(payload.type);
                    $("#id_pm_nonce").val(payload.nonce);
                    $("#id_method_way").val('profile');
                    $("#id_checkoutdetails").val(JSON.stringify(payload.details));
                    opc_payment.processPayment();
                }
                else{
                    alert('Paypal Purchase Flow was canceled!');
                    return false;
                }
            },
            paypal: {
                singleUse: singleUse,
                amount: bt_amount,
                currency: 'USD',
                locale: 'en_us',
                enableShippingAddress: true,
                headless: true
            }
        });
        
        $("#btree-testtoken").click(function(event){
            event.preventDefault();
            braintreeclient = new braintree.api.Client({
                clientToken: bt_token
            });
            var paymentMethodFormEle = $("#opc-payment-method-form");
            var _number =  $(paymentMethodFormEle).find("#payment_form_field_cc_number").val();
            var _cardholderName =  $(paymentMethodFormEle).find("#payment_form_field_cc_first_name").val()+' '+$(paymentMethodFormEle).find("#payment_form_field_cc_last_name").val();
            var _expirationMonth =  $(paymentMethodFormEle).find("#payment_form_field_cc_expiration_month").val();
            var _expirationYear =  $(paymentMethodFormEle).find("#payment_form_field_cc_expiration_year").val();
            braintreeclient.tokenizeCard({
                number: _number,
                cardholderName: _cardholderName,
                expirationMonth: _expirationMonth,
                expirationYear: _expirationYear
            }, function (err, nonce) {
                if (err){
                    return false;
                }
                else{
                    $(paymentMethodFormEle).find("input[name='payment_method_nonce']").val(nonce);
                    cur_nonce = $(paymentMethodFormEle).find("input[name='payment_method_nonce']").val();
                }
            });
            return false;
        });

        document.querySelector('#btree-paypalbutton').addEventListener('click', function (event) {
            if ($("#cb_agree").length && !$("#cb_agree").is(":checked")){
                alert(msg.opc_agree_to_terms_and_conditions);
                event.preventDefault();
                return false;
            }
            else{
                event.preventDefault();
                checkout.paypal.initAuthFlow();
            }
        }, false);

    });

</script>
{/literal}
<div class="spacer no-gap-top no-space-top no-gap-bottom no-space-bottom invisible" id="opc-payment-method-form-card">
    <input type="hidden" id='id_pm_nonce' name="payment_method_nonce" value=""/>
    <input type="hidden" id='id_checkouttype' name="form[checkout_type]" value="customform"/>
    <input type="hidden" id='id_checkoutdetails' name="form[pp_details]" value=""/>
    <input type="hidden" id='id_method_way' name="form[payment_method_pp]" value="customcard"/>

    <div>
        <a href="#" id="btree-paypalbutton" class="paypal is-active" title="Pay with PayPal">
            <img src="images/buttons/english/paypal@2x.png" style="max-width: 30%" alt="PayPal powered by Braintree">
        </a>
    </div>

    <div>
        <table class="fieldset" cellpadding="0" cellspacing="0">
            <tbody>
            {foreach from=$payment_form item="field"}
                {include file="templates/pages/checkout/opc/opc-payment-form-field.html"}
            {/foreach}
            </tbody>
        </table>
    </div>
</div>
{/if}