https://www.playbaseball.com/scripts/paypal.js

1var PayPal = function () {
2    
3    //define global variables
4    this.enableShipping = true;
5    this.shipping = {};
6    this.billingAgreementDescription = ""; //TODO biz needs to populate this
7
8    this.checkoutInstance = undefined;
9    this.dataCollectorInstance = undefined;
10
11    //setup PayPal on the page
12    this.init();
13    this.bindEvents();
14
15    //callbacks
16    this.onPayPalSet = $.noop; //args -> object with deviceData and payload
17    this.onPayPalUnset = $.noop; //no args
18    this.onPayPalTeardown = $.noop; // no args
19
20    // Trigger ready event
21    if (typeof callback === 'function') {
22        callback(this);
23    }
24}
25
26PayPal.prototype = {
27
28    bindEvents: function () {
29        var self = this;
30        //paypal doesnt offer a way to programatically click and they dont expose the function to launch the PayPal window...
31        //they want users to have to press the PayPal button, so there is no change... only cancel.
32        $("#paypal-remove").on("click", function (e) {
33            e.preventDefault();
34            self.unset();
35        });
36    },
37
38    init: function () {
39        var self = this,
40            environment = window.location.hostname.toLowerCase().match("playbaseball") ? "production" : "sandbox",
41            authorization = environment === "production" ? "production_jyyk2qy3_4y9xpz7nxq7r29sh" : "sandbox_v2yfgk2f_t58vnjc3v23rnnyb",
42            deviceData;
43
44        if (typeof braintree.client !== 'undefined' && typeof braintree.client.create !== 'undefined') {
45            braintree.client.create({
46                authorization: authorization,
47                merchantAccountId: window.location.hostname.toLowerCase().match("playbaseball") ? "baseballsavingsUSD" : "Baseball-Softball"
48            }, function (clientErr, clientInstance) {
49
50                // Stop if there was a problem creating the client.
51                // This could happen if there is a network error or if the authorization

52                // is invalid.
53                if (clientErr) {
54                    $("#paypal-container").hide();
55                    console.error('Error creating client:', clientErr);
56                    self.logError("init PayPal - error creating client - " + clientErr.message, clientErr.stack);
57                }
58
59                if (typeof braintree.dataCollector !== 'undefined' && typeof braintree.dataCollector.create !== 'undefined') {
60                    braintree.dataCollector.create({
61                        client: clientInstance,
62                        paypal: true
63                    }, function (err, dataCollectorInstance) {
64
65                        self.dataCollectorInstance = dataCollectorInstance;
66                        if (err) {
67                            $("#paypal-container").hide();
68                            self.logError("init PayPal - error creating dataCollector - " + err.message, err.stack);
69                            return;
70                        }
71                        //https://developers.braintreepayments.com/guides/paypal/vault/javascript/v3
72                        var dd = JSON.parse(dataCollectorInstance.deviceData);
73                        deviceData = dd.correlation_id;
74                    });
75                }
76
77                //protection from callers who may new up the library more than once via async page state changes
78                if (self.checkoutInstance) {
79                    self.teardown();
80                }
81
82                // Create a PayPal Checkout component.
83                if (typeof braintree.paypalCheckout !== 'undefined' && typeof braintree.paypalCheckout.create !== 'undefined') {
84                    braintree.paypalCheckout.create({
85                        client: clientInstance
86                    }, function (paypalCheckoutErr, paypalCheckoutInstance) {
87
88                        self.checkoutInstance = paypalCheckoutInstance;
89
90                        // Stop if there was a problem creating PayPal Checkout.
91                        if (paypalCheckoutErr) {
92                            $("#paypal-container").hide();
93                            console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
94                            self.logError("init PayPal - error creating checkout - " + paypalCheckoutErr.message, paypalCheckoutErr.stack);
95                            return;
96                        }
97
98                        try {
99                            var paypalButtonEl = document.getElementById('paypal-button');
100                            if (paypalButtonEl) {
101                                while (paypalButtonEl.firstChild) {
102                                    paypalButtonEl.removeChild(paypalButtonEl.firstChild);
103                                }
104                            }
105                        } catch (cleanupErr) {
106                            console.warn('Failed to clean #paypal-button children before render:', cleanupErr);
107                        }
108
109                        // Set up PayPal with the checkout.js library
110                        paypal.Button.render({
111                            env: environment,
112                            style: {
113                                color: 'gold',
114                                fundingicons: false,
115                                height: 42, // for cart (and catalog quick order). looks fine on bridge page, my account, payment
116                                label: 'paypal',
117                                layout: 'horizontal',
118                                shape: 'rect',
119                                size: 'medium',
120                                tagline: false
121                            },
122                            payment: function () {
123                                if (self.enableShipping) {
124                                    //editable shipping address the user will set
125                                    return self.checkoutInstance.createPayment({
126                                        flow: 'vault',
127                                        billingAgreementDescription: self.billingAgreementDescription,
128                                        enableShippingAddress: true,
129                                        shippingAddressEditable: true,
130                                        displayName: "Play Baseball"
131                                    });
132                                } else {
133                                    //payment, display but no edit
134                                    self.setShippingInfo();
135                                    return self.checkoutInstance.createPayment({
136                                        flow: 'vault',
137                                        billingAgreementDescription: self.billingAgreementDescription,
138                                        enableShippingAddress: false,
139                                        shippingAddressEditable: false,
140                                        displayName: "Play Baseball"
141                                    });
142                                }
143                            },
144
145                            onAuthorize: function (data, actions) {
146                                return self.checkoutInstance.tokenizePayment(data, function (err, payload) {
147                                    if (err) {
148                                        console.error('onAuthorize error', err);
149                                        self.logError("initPayPal onAuthorize - " + err.message, err.stack);
150                                        return;
151                                    }
152
153                                    self.set(payload, deviceData);
154                                });
155                            },
156
157                            onCancel: function (data) {
158                        
159                            },
160
161                            onError: function (err) {
162                                $("#paypal-container").hide();
163                                console.error('paypal.js error', err);
164                                self.logError("initPayPal - " + err.message, err.stack);
165                            }
166                        }

166, '#paypal-button').then(function () {
167                            //callback after the paypal button is rendered
168                            $("html").addClass("paypal-loaded");
169                        });
170                    });
171                }
172            });
173        }
174    },
175
176    setShippingInfo: function(shippingInfo) {
177        this.shipping = shippingInfo;
178    },
179
180    //payload received from customer interaction and authorization on PayPal's end
181    set: function (payload, deviceData) {
182
183        var payPalObject = {
184            payload: payload,
185            deviceData: deviceData
186        };
187
188        if (typeof this.onPayPalSet === 'function') {
189            this.onPayPalSet(payPalObject);
190        }
191    },
192
193    //user has set PayPal and cancelled it
194    unset: function () {
195
196        if (typeof this.onPayPalUnset === 'function') {
197            this.onPayPalUnset();
198        }
199    },
200
201    teardown: function() {
202        var self = this;
203
204        if (self.checkoutInstance) {
205            self.dataCollectorInstance.teardown();
206            self.checkoutInstance.teardown(function () {
207                $("html").removeClass("paypal-loaded");
208
209                if (typeof self.onPayPalTeardown === 'function') {
210                    self.onPayPalTeardown();
211                }
212            });
213        }
214
215    },
216
217    logError: function (message, error) {
218        var logError = {
219            Message: message,
220            Error: error,
221            FileName: "paypal.js"
222        }
223
224        return AjaxJsonPostWrapper.ajaxRoute('error', 'logerror', { error: logError });
225    }
226}