image16.gif

 


 

 

Braintree Website Setup

These are the instructions for setting up Braintree via the website. NOTE: This setup varies customer to customer and how the website is setup. The javascript is for both credit cards and Paypal on the website.

 

 

Add to 'checkout_page_protected' template:

 

 

{code}{literal}

<script src="https://js.braintreegateway.com/web/3.42.0/js/client.min.js"></script>

<script src="https://js.braintreegateway.com/web/3.42.0/js/hosted-fields.min.js"></script>

<script src="https://js.braintreegateway.com/web/3.42.0/js/data-collector.min.js"></script>

<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4 log-level="warn"></script>

<script src="https://js.braintreegateway.com/web/3.42.0/js/paypal-checkout.min.js"></script>

 

<script language="JavaScript">

$(document).ready(function(){

            if ($('#tokenization-key').length) {

                        coresense_initialize_payment_processor();

            }

});

 

function coresense_initialize_payment_processor() {

            braintree.client.create({

                        authorization: $('#tokenization-key').val()

            }, function (clientErr, clientInstance) {

                        if (clientErr) {

                                    alert('Payment Processor Error [1]: '+clientErr.message);

                                    return;

                        }

 

        braintree.dataCollector.create({

            client: clientInstance,

            kount: true

        }, function (err, dataCollectorInstance) {

            if (err) {

                console.log('Payment Processor Error [4]: '+err.message);

                return;

            }

 

            $('#device_data').val(dataCollectorInstance.deviceData);

        });

 

        // Create a PayPal Checkout component

                        if ($('#paypal_fragment').length) {

                                    braintree.paypalCheckout.create({

                                                client: clientInstance

                                    }, function (paypalCheckoutErr, paypalCheckoutInstance) {

                                                if (paypalCheckoutErr) {

                                                            console.error('Error creating PayPal Checkout:', paypalCheckoutErr);

                                                            return;

                                                }

 

                                                paypal.Button.render({

                                                            env: 'sandbox',

                                                            commit: true, // This will add the transaction amount to the PayPal button

                                                            payment: function () {

                                                                        return paypalCheckoutInstance.createPayment({

                                                                                    flow: 'checkout', // Required

                                                                                    amount: {/literal}{$order->get_balance(true)}{literal}, // Required

                                                                                    currency: 'USD', // Required

                                                                        });

                                                            },

                                                            onAuthorize: function (data, actions) {

                                                                        return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {

                                                                                    $('#reference-card-number').val(payload.nonce);

 

                                                                                    $.ajax({

                                                                                                url:"ajax_targets/paypal_payment.php",

                                                                                                data: {

                                                                                                            payerID: data.payerID,

                                                                                                            paymentToken: data.paymentToken,

                                                                                                            paymentID: data.paymentID

                                                                                                },

                                                                                                method: "POST",

                                                                                                success: function(response) {

                                                                                                            window.alert('Payment Complete!');

                                                                                                }

                                                                                    });

                                                                        });

                                                            },

                                                            onCancel: function (data) {

                                                                        console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));

                                                            },

                                                            onError: function (err) {

                                                                        console.error('checkout.js error', err);

                                                            }

                                                }, '#paypal_fragment').then(function () {

                                                            // The PayPal button will be rendered in an html element with the id

                                                            // `paypal-button`. This function will be called when the PayPal button

                                                            // is set up and ready to be used.

                                                });

                                    });

                        }

 

        if ($('#card-number').length) {

                        braintree.hostedFields.create({

                                    client: clientInstance,

                                    styles: {

                                                'input': {

                                                            'font-size': '10px'

                                                },

                                                'input.invalid': {

                                                            'color': 'red'

                                                },

                                                'input.valid': {

                                                            'color': 'green'

                                                }

                                    },

                                    fields: {

                                                number: {

                                                            selector: '#card-number'

                                                },

                                                cvv: {

                                                            selector: '#cvv'

                                                },

                                                expirationDate: {

                                                            selector: '#expiration-date'

                                                }

                                    }

                        }, function (hostedFieldsErr, hostedFieldsInstance) {

                                    if (hostedFieldsErr) {

                                                alert('Payment Processor Error [2]: '+hostedFieldsErr.message);

                                                return;

                                    }

 

                                    document.querySelector('#place_order_button').addEventListener('click', function (event) {

                                                if (($('#payment_ewallet_selector').length && $('#payment_ewallet_selector').val() != '') || $('#reference-card-number').val() != '') {

                                                            return document.getElementById('checkout_form').submit();

                                                }

 

                                                event.preventDefault();

 

                                                hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {

                                                            if (tokenizeErr) {

                                                                        alert('Payment Processor Error [3]: '+tokenizeErr.message);

                                                                        return;

                                                            }

 

                                                            $('#reference-card-number').val(payload.nonce);

 

                                                            return document.getElementById('checkout_form').submit();

                                                });

                                    }, false);

                        });

                        }

            });

}

</script>

{/literal}{code}

 

 

 

 

Add 'checkout_form' as an id to the form in 'checkout_page_protected' template.

 

Basic styling, which can be modified and put in 'stylesheet' template:{code}.payment_processor_styling {

    height: 12px;

    width: 112px;

}

 

#card-number, #expiration-date, #cvv {

    border: 1px solid #333;

    background-color: white;

}{code}

 

In the Checkout plug-in, there is a field labeled 'Hosted Pay Payment Processor'. After adding Braintree but before setting the website to use that payment processor, you can set this field to the payment processor and test the setup in preview mode (that is - test to make sure the javascript is correct and the input boxes are created correctly; you can't complete an order like this as it will throw an error) before setting the Braintree processor to be used in live. NOTE: This means that the change to using Braintree must be done for the website at the same time as a website publish; otherwise this will not work.

 

 

 

 

 

 

 

 

© 2015 CORESense · 1-866-229-2804 · info@coresense.com · 125 High Rock Avenue, Saratoga Springs, NY 12866