PaymentDisplay.js

/**
 * PaymentDisplay for Amazon Pay
 *
 * @author Patrick Müller (www.pcsg.de)
 */
define('package/quiqqer/payment-amazon/bin/controls/PaymentDisplay', [

    'qui/controls/Control',
    'qui/controls/buttons/Button',

    'utils/Controls',

    'Ajax',
    'Locale'

], function (QUIControl, QUIButton, QUIControlUtils, QUIAjax, QUILocale) {
    "use strict";

    var pkg = 'quiqqer/payment-amazon';

    return new Class({

        Extends: QUIControl,
        Type   : 'package/quiqqer/payment-amazon/bin/controls/PaymentDisplay',

        Binds: [
            '$onImport',
            '$showAmazonPayBtn',
            '$onAmazonLoginReady',
            '$showAmazonWallet',
            '$showErrorMsg'
        ],

        options: {
            sandbox      : true,
            sellerid     : '',
            clientid     : '',
            orderhash    : '',
            authorization: false
        },

        initialize: function (options) {
            this.parent(options);

            this.$accessToken      = false;
            this.$orderReferenceId = false;
            this.$AuthBtnElm       = null;
            this.$WalletElm        = null;
            this.$PayBtn           = null;
            this.$MsgElm           = null;
            this.$OrderProcess     = null;

            this.addEvents({
                onImport: this.$onImport
            });
        },

        /**
         * Event: onImport
         */
        $onImport: function () {
            var self = this;
            var Elm  = this.getElm();

            this.$MsgElm     = Elm.getElement('.quiqqer-payment-amazon-message');
            this.$AuthBtnElm = Elm.getElement('#quiqqer-payment-amazon-btn');
            this.$WalletElm  = Elm.getElement('#quiqqer-payment-amazon-wallet');

            this.$showMsg(
                QUILocale.get(pkg, 'controls.PaymentDisplay.info')
            );

            QUIControlUtils.getControlByElement(
                Elm.getParent('[data-qui="package/quiqqer/order/bin/frontend/controls/OrderProcess"]')
            ).then(function (OrderProcess) {
                self.$OrderProcess = OrderProcess;

                if (self.getAttribute('authorization')) {
                    console.log("payment is authorized -> next()");

                    OrderProcess.next();
                    return;
                }

                self.$loadAmazonWidgets();
            });
        },

        /**
         * Load Amazon Pay widgets
         */
        $loadAmazonWidgets: function () {
            var widgetUrl = "https://static-eu.payments-amazon.com/OffAmazonPayments/eur/sandbox/lpa/js/Widgets.js";

            if (!this.getAttributes('sandbox')) {
                widgetUrl = ''; // @todo LIVE widget url
            }

            if (typeof amazon !== 'undefined') {
                this.$showAmazonPayBtn();
                return;
            }

            this.$OrderProcess.Loader.show();

            if (typeof window.onAmazonPaymentsReady === 'undefined') {
                window.onAmazonPaymentsReady = this.$showAmazonPayBtn;
            }

            if (typeof window.onAmazonLoginReady === 'undefined') {
                window.onAmazonLoginReady = this.$onAmazonLoginReady;
            }

            new Element('script', {
                async: "async",
                src  : widgetUrl
            }).inject(document.body);
        },

        /**
         * Execute if Amazon Login has loaded
         */
        $onAmazonLoginReady: function () {
            amazon.Login.setClientId(this.getAttribute('clientid'));
        },

        /**
         * Show Amazon Pay authentication widget (btn)
         */
        $showAmazonPayBtn: function () {
            var self = this;

            this.$OrderProcess.Loader.hide();

            // re-display if button was previously rendered and hidden
            this.$AuthBtnElm.removeClass('quiqqer-payment-amazon__hidden');

            OffAmazonPayments.Button(
                'quiqqer-payment-amazon-btn',
                this.getAttribute('sellerid'),
                {
                    type : 'PwA',
                    color: 'Gold',
                    size : 'x-large',

                    authorization: function () {
                        amazon.Login.authorize({
                            popup: true,
                            scope: 'payments:widget'
                        }, function (Response) {
                            if (Response.error) {
                                self.$showErrorMsg(
                                    QUILocale.get(pkg, 'controls.PaymentDisplay.login_error')
                                );

                                return;
                            }

                            self.$accessToken = Response.access_token;

                            self.$AuthBtnElm.addClass('quiqqer-payment-amazon__hidden');
                            self.$showAmazonWallet();
                        });
                    },

                    onError: function (Error) {
                        switch (Error.getErrorCode()) {
                            // handle errors on the shop side (most likely misconfiguration)
                            case 'InvalidAccountStatus':
                            case 'InvalidSellerId':
                            case 'InvalidParameterValue':
                            case 'MissingParameter':
                            case 'UnknownError':
                                self.$AuthBtnElm.addClass('quiqqer-payment-amazon__hidden');

                                self.$showErrorMsg(
                                    QUILocale.get(pkg, 'controls.PaymentDisplay.configuration_error')
                                );

                                self.$logError(Error);
                                break;

                            default:
                                self.$showErrorMsg(
                                    QUILocale.get(pkg, 'controls.PaymentDisplay.login_error')
                                );
                        }
                    }
                }
            );
        },

        /**
         * Show Amazon Pay Wallet widget
         */
        $showAmazonWallet: function () {
            var self = this;

            this.$showMsg(
                QUILocale.get(pkg, 'controls.PaymentDisplay.wallet_info')
            );

            var Options = {
                sellerId       : this.getAttribute('sellerid'),
                design         : {
                    designMode: 'responsive'
                },
                onPaymentSelect: function () {
                    self.$PayBtn.enable();
                },
                onError        : function (Error) {
                    switch (Error.getErrorCode()) {
                        // handle errors on the shop side (most likely misconfiguration)
                        case 'InvalidAccountStatus':
                        case 'InvalidSellerId':
                        case 'InvalidParameterValue':
                        case 'MissingParameter':
                        case 'UnknownError':
                            self.$showErrorMsg(
                                QUILocale.get(pkg, 'controls.PaymentDisplay.configuration_error')
                            );

                            self.$logError(Error);
                            break;

                        case 'AddressNotModifiable':
                        case 'BuyerNotAssociated':
                        case 'BuyerSessionExpired':
                        case 'PaymentMethodNotModifiable':
                        case 'StaleOrderReference':
                            self.$AuthBtnElm.removeClass('quiqqer-payment-amazon__hidden');
                            self.$showErrorMsg(Error.getErrorMessage());
                            break;

                        default:
                            self.$showErrorMsg(
                                QUILocale.get(pkg, 'controls.PaymentDisplay.wallet_error')
                            );
                    }
                }
            };

            if (!this.$orderReferenceId) {
                Options.onOrderReferenceCreate = function (orderReference) {
                    self.$orderReferenceId = orderReference.getAmazonOrderReferenceId();
                }
            } else {
                Options.amazonOrderReferenceId = this.$orderReferenceId;
            }

            if (!this.$PayBtn) {
                this.$PayBtn = new QUIButton({
                    disabled: true,
                    text    : QUILocale.get(pkg, 'controls.PaymentDisplay.btn_pay.text'),
                    texticon: 'fa fa-amazon',
                    events  : {
                        onClick: function () {
                            self.$OrderProcess.Loader.show();

                            self.$authorizePayment().then(function (success) {
                                self.$OrderProcess.Loader.hide();

                                if (!success) {
                                    self.$showErrorMsg(
                                        QUILocale.get(pkg, 'controls.PaymentDisplay.processing_error')
                                    );

                                    return;
                                }

                                console.log("payment is authorized -> OrderProcess->next()");
                                self.$OrderProcess.next();
                            }, function (error) {
                                self.$OrderProcess.Loader.hide();
                                self.$showErrorMsg(error.getMessage());

                                if (error.getAttribute('reRenderWallet')) {
                                    self.$showAmazonWallet();
                                }
                            });
                        }
                    }
                }).inject(this.getElm().getElement('#quiqqer-payment-amazon-btn-pay'));
            }

            new OffAmazonPayments.Widgets.Wallet(Options).bind('quiqqer-payment-amazon-wallet');
        },

        /**
         * Start the payment process
         *
         * @return {Promise}
         */
        $authorizePayment: function () {
            var self = this;

            return new Promise(function (resolve, reject) {
                QUIAjax.post('package_quiqqer_payment-amazon_ajax_authorizePayment', resolve, {
                    'package'       : pkg,
                    orderHash       : self.getAttribute('orderhash'),
                    orderReferenceId: self.$orderReferenceId,
                    accessToken     : self.$accessToken,
                    onError         : reject
                })
            });
        },

        /**
         * Show error msg
         *
         * @param {String} msg
         */
        $showErrorMsg: function (msg) {
            this.$MsgElm.set(
                'html',
                '<p class="message-error">' + msg + '</p>'
            );
        },

        /**
         * Show normal msg
         *
         * @param {String} msg
         */
        $showMsg: function (msg) {
            this.$MsgElm.set(
                'html',
                '<p>' + msg + '</p>'
            );
        },

        /**
         * Log an Amazon Pay widget/processing error
         *
         * @param {Object} Error - Amazon Pay widget error
         * @return {Promise}
         */
        $logError: function (Error) {
            return new Promise(function (resolve, reject) {
                QUIAjax.post('package_quiqqer_payment-amazon_ajax_logFrontendError', resolve, {
                    'package': pkg,
                    errorCode: Error.getErrorCode(),
                    errorMsg : Error.getErrorMessage(),
                    onError  : reject
                });
            });
        }
    });
});