EVOLUTION-MANAGER

Edit File: paymentelement.js

var BrippoPaymentElement = Class.create();

BrippoPaymentElement.prototype = {
    stripe: null,
    pkey: null,
    elements: null,
    currentTotals: null,
    paymentMethodCode: "brippopayments_payment_element",

initialize: function(){
        let self = this;

if (typeof BrippoExpressCheckout === 'undefined') {
            console.log("BrippoExpressCheckout.js is not loaded yet, adding listener");
            let listener = function() {
                self.onLoad();
                window.removeEventListener('BrippoExpressCheckoutLoaded', listener);
            };
            window.addEventListener('BrippoExpressCheckoutLoaded', listener);
        } else {
            self.onLoad();
        }

window.addEventListener('BrippoPaymentElementPlaceOrder', () => {
            self.placeOrder();
        });
    },

dispatchOnLoadEvent:function() {
        window.dispatchEvent(new Event('BrippoPaymentElementLoaded'));
    },

onLoad: function() {
        let self = this;

if (BrippoExpressCheckout.prototype.isOSC()) {
            // self.OSCplaceOrder();
        } else {
            Review.prototype.save = Review.prototype.save.wrap(
                function(originalMethod) {
                    if (payment.currentMethod === self.paymentMethodCode) {
                        self.placeOrder();
                    } else {
                        return originalMethod();
                    }
                }
            );
        }

this.onRenderedHandler();
        this.dispatchOnLoadEvent();
    },

OSCplaceOrder: function() {
        let self = this;

let form = BrippoExpressCheckout.prototype.getOSCForm();

form._submit = document.createElement("form").submit;
        form.submit =  () => {
            if (BrippoExpressCheckout.prototype.isOSCPaymentMethodSelected(BrippoPaymentElement.prototype.paymentMethodCode)) {
                window.dispatchEvent(new Event("BrippoPaymentElementPlaceOrder"));
            } else {
                form._submit();
            }
        };
    },

placeOrder: function() {
        let self = this;
        self.resetPaymentErrors();

if (!self.validate()) {
            return;
        }

Checkout.prototype.setLoadWaiting('review',true);
        if (BrippoExpressCheckout.prototype.isOSC()) {
            self.showOverlay();
        }

(async() => {
            const {error: submitError} = await self.elements.submit();
            if (submitError) {
                self.removeOverlay();
                self.showPaymentError(submitError);
                Checkout.prototype.setLoadWaiting(false);

} else {
                let url = '/brippo_payments_frontend/paymentElement/paymentIntent';

let serializedFormData = null;

if (BrippoExpressCheckout.prototype.isOSC()) {
                    let form = document.getElementById('onestepcheckout-form');
                    let formData = new FormData(form);
                    serializedFormData = new URLSearchParams(formData).toString();
                }

new Ajax.Request(
                    url, {
                        method: 'POST',
                        parameters: serializedFormData + "&osc=" + BrippoExpressCheckout.prototype.isOSC(),
                        onComplete: function (response) {
                            Checkout.prototype.setLoadWaiting(false);
                            if (BrippoExpressCheckout.prototype.isOSC()) {
                                self.removeOverlay();
                            }
                            try {
                                let json = response.responseText.evalJSON();

if (json.valid === 0) {
                                    self.showPaymentError(json.message);

} else if (json.valid === 1) {
                                    self.confirmPayment(json['client_secret'])
                                }
                            } catch (e) {
                                console.log(e);
                                self.showPaymentError("Couldn't place order (PaymentElement). Unexpected error, please try again.");
                            }
                        }
                    }
                );
            }
        })();
    },

validate: function() {
        let agreementsElement = document.getElementById('checkout-agreements');
        if (agreementsElement === null || agreementsElement === undefined) {
            return true;
        }

let checkboxes = agreementsElement.querySelectorAll('input[type=checkbox]');
        let allChecked = true;

for (let i = 0; i < checkboxes.length; i++) {
            if (!checkboxes[i].checked) {
                allChecked = false;
                break;
            }
        }

if (allChecked) {
            return true;
        } else {
            alert(Translator.translate("Please agree to the terms and conditions before placing the order."));
            return false;
        }
    },

confirmPayment: function (clientSecret) {
        let self = this;

Checkout.prototype.setLoadWaiting('review',true);
        if (BrippoExpressCheckout.prototype.isOSC()) {
            // self.showOverlay();
        }

(async() => {
            let responseUrl = window.location.origin + '/brippo_payments_frontend/paymentElement/response?osc=' + BrippoExpressCheckout.prototype.isOSC();
            const elements = self.elements;
            const {error} = await self.stripe.confirmPayment({
                elements,
                clientSecret,
                confirmParams: {
                    return_url: responseUrl,
                }
            });

if (error) {
                // self.log('Error confirming payment.', {
                //     response: error
                // });
                self.showPaymentError(error.message);
                Checkout.prototype.setLoadWaiting(false);
                if (BrippoExpressCheckout.prototype.isOSC()) {
                    self.removeOverlay();
                }
            } else {
                console.log('Payment done, redirect to success url');
            }
        })();
    },

onRenderedHandler: function() {
        let self = this;

console.log("BrippoPaymentElement rendered");
        self.getPaymentRequestOptions(function (response) {
            try {
                let json = response.responseText.evalJSON();

if (json.valid === 0) {
                    self.showPaymentError(json.message);
                } else if (json.valid === 1) {
                    let stripeConnectElement = document.getElementById('stripeconnect-payment-element');
                    if (stripeConnectElement) {
                        self.initializePaymentElement(json);
                    } else {
                        console.log("stripeconnect-payment-element doesn't exists ##############");
                    }
                }
            } catch (e) {
                console.log(e);
                self.showPaymentError("Couldn't initialize payment form");
            }
        });

if (document.getElementById('container_payment_method_brippopayments_payment_element')) {
            document.getElementById('container_payment_method_brippopayments_payment_element').style.display='block'
        }
    },

initializePaymentElement: function (json) {
        let self = this;

if (json.publishableKey) {
            // if (!self.stripe) {
                self.pkey = json.publishableKey;
                console.log(self.pkey);
                self.stripe = Stripe(self.pkey, {
                    apiVersion: "2020-08-27"
                });
            // }
            self.elements = self.stripe.elements(json.options);
            const paymentElement = self.elements.create("payment");
            paymentElement.mount("#stripeconnect-payment-element");
        }
        else {
            // todo show error
            console.log("Publishable key not set")
        }
    },

getPaymentRequestOptions: function (callback) {
        const self = this;

showPaymentError: function (message) {
        let finalMessage = message;
        if (typeof finalMessage === 'object') {
            finalMessage = finalMessage.message;
        }

if (BrippoExpressCheckout.prototype.isOSC()) {
            console.log(finalMessage);

BrippoExpressCheckout.prototype.restoreOSC();
            BrippoExpressCheckout.prototype.removeOverlay();
            alert(finalMessage);
        } else {
            let self = this;
            let span = document.getElementById(self.paymentMethodCode + '-payment-errors');

if (span == null) {
                let reviewArea = document.getElementById('review-buttons-container');
                let html = '<span id="' + self.paymentMethodCode + '-payment-errors" class="message error" style="display: none;"></span>';
                reviewArea.innerHTML = html + reviewArea.innerHTML;
                span = document.getElementById(self.paymentMethodCode + '-payment-errors');
            }
            span.innerHTML = finalMessage;
            span.style.display="block";
        }

resetPaymentErrors: function () {
        let span = document.getElementById(self.paymentMethodCode + '-payment-errors');
        if (span) {
            span.innerHTML = "";
            span.style.display = "none";
        }
    },

removeOverlay: function() {
        let  brippoOverlay = document.querySelector(".brippo-overlay");
        if (brippoOverlay !== null && brippoOverlay !== undefined) {
            brippoOverlay.remove();
        }
        document.body.style.pointerEvents = this.originalPointerEvents;
    },
    showOverlay: function() {
        this.removeOverlay();
        // Create the overlay div
        let overlay = document.createElement("div");
        overlay.classList.add("brippo-overlay");

// Create the spinner div
        let spinner = document.createElement("div");
        spinner.classList.add("brippo-spinner");

// Create the text div
        let text = document.createElement("div");
        text.classList.add("brippo-spinner-text");
        text.innerHTML = Translator.translate("Processing");

let container = document.createElement("div");
        container.classList.add("brippo-spinner-container");
        container.appendChild(spinner);
        container.appendChild(text);
        overlay.appendChild(container);

// Append the overlay div to the body element
        document.body.appendChild(overlay);
        try {
            this.originalPointerEvents = document.body.style.pointerEvents;
        } catch (e) {
            this.originalPointerEvents = "";
        }

document.body.style.pointerEvents = "none";
    }
};

window.dispatchEvent(new Event('BrippoPaymentElementLoaded'));