Domanda

UPDATE June 7, 2019: Thank you to @crashtestxxx

With their help, here is the full code I am using and it works well on Desktop and Mobile - file located at

app/design/frontend/YOUR/TEMPLATE/Magento_Payment/templates/transparent/iframe.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/** @var \Magento\Payment\Block\Transparent\Iframe $block */
$params = $block->getParams();
?>
<html>
    <head>
        <script>
        <?php if (isset($params['redirect'])): ?>
            window.location="<?= $block->escapeUrl($params['redirect']) ?>";
        <?php elseif (isset($params['redirect_parent'])): ?>
            var require = window.top.require;
            require(
                [
                    'jquery'
                ],
                function($) {
                    var parent = window.top;
                    $(parent).trigger('clearTimeout');
                    parent.location="<?= $block->escapeUrl($params['redirect_parent']) ?>";
                }
            );
    <?php elseif (isset($params['error_msg'])): ?>
        var require = window.top.require;
        require(
            [
                'jquery',
                'Magento_Ui/js/model/messageList',
                'mage/translate',
                'Magento_Checkout/js/model/full-screen-loader',
                'Magento_Ui/js/modal/alert'
            ],
            function($, globalMessageList, $t, fullScreenLoader, alert) {
                var parent = window.top;
                $(parent).trigger('clearTimeout');
                fullScreenLoader.stopLoader();
                alert({
                    title: 'Payment Declined',
                    content: '<?= /* @escapeNotVerified */ json_encode($params['error_msg'])?>',
                    actions: {
                        always: function(){
                            window.scrollTo(0,0);
                            globalMessageList.addErrorMessage({
                                message: $t(<?= /* @escapeNotVerified */ json_encode($params['error_msg'])?>)
                            });
                        }
                    }
                });
            }
        );
        <?php elseif (isset($params['multishipping'])): ?>
            var require = window.top.require;
            require(
                [
                    'jquery'
                ],
                function($) {
                    var parent = window.top;
                    $(parent).trigger('clearTimeout');
                    $(parent.document).find('#multishipping-billing-form').submit();
                }
            );
        <?php elseif (isset($params['order_success'])): ?>
            window.top.location = "<?= $block->escapeUrl($params['order_success']) ?>";
        <?php else: ?>
            var require = window.top.require;
            require(
                [
                    'jquery',
                    'Magento_Checkout/js/model/quote',
                    'Magento_Checkout/js/action/place-order',
                    'Magento_Checkout/js/action/redirect-on-success',
                    'Magento_Checkout/js/model/full-screen-loader'
                ],
                function($, quote, placeOrderAction, redirectOnSuccessAction, fullScreenLoader) {
                    var parent = window.top;

                    $(parent).trigger('clearTimeout');
                    $.when(
                        placeOrderAction({'method': quote.paymentMethod().method})
                    ).done(
                        function () {
                            redirectOnSuccessAction.execute();
                        }
                    ).fail(
                        function () {
                            var parent = window.top;
                            $(parent).trigger('clearTimeout');
                            fullScreenLoader.stopLoader();
                        }
                    );
                }
            );
        <?php endif; ?>
        </script>
    </head>
    <body></body>
</html>

Here's how it looks on mobile, but it was Chrome simulated so may be different on actual iPhone and mobile.

enter image description here

How would I trigger a pop-up modal to show the error, when a card is declined or and AVS error?

Checkout errors seem to be set inside the file below

app/design/frontend/YOUR/TEMPLATE/Magento_Payment/templates/transparent/iframe.phtml in this section.

<?php elseif (isset($params['error_msg'])): ?>
            var require = window.top.require;
            require(
                [
                    'jquery',
                    'Magento_Ui/js/model/messageList',
                    'mage/translate',
                    'Magento_Checkout/js/model/full-screen-loader'
                ],
                function($, globalMessageList, $t, fullScreenLoader) {
                    var parent = window.top;
                    $(parent).trigger('clearTimeout');
                    fullScreenLoader.stopLoader();
                    globalMessageList.addErrorMessage({
                        message: $t(<?= /* @escapeNotVerified */ json_encode($params['error_msg'])?>)
                    });
                }
            );

I'm trying to figure out how to pass/trigger the error into display inside a pop-up modal, because most people don't see the error message, and on a mobile, it's almost impossible to see before the message disappears.

I've made it to where the message last longer, but having a pop-up modal would be ideal, however I've yet to figure out how to implement it.

On GitHub there are mentions of the use of modal, but no code to do so.

This is for Authorize.net on 2.2.8

How would I trigger a pop-up modal to show the error, when a card is declined or and AVS error?

The error message can be static, but would prefer if the message were inside the modal. I had asked before, but can confirm, it can be done, via GitHub posts about the same subject.

È stato utile?

Soluzione 

<?php elseif (isset($params['error_msg'])): ?>
        var require = window.top.require;
        require(
            [
                'jquery',
                'Magento_Ui/js/model/messageList',
                'mage/translate',
                'Magento_Checkout/js/model/full-screen-loader',
                'Magento_Ui/js/modal/alert'
            ],
            function($, globalMessageList, $t, fullScreenLoader, alert) {
                var parent = window.top;
                $(parent).trigger('clearTimeout');
                fullScreenLoader.stopLoader();
                alert({
                    title: 'YOUR RECENT TRANSACTION HAS BEEN DECLINED BY YOUR BANK.',
                    content: '<?= /* @escapeNotVerified */ json_encode($params['error_msg'])?>',
                    actions: {
                        always: function(){
                            window.scrollTo(0,0);
                            globalMessageList.addErrorMessage({
                                message: $t(<?= /* @escapeNotVerified */ json_encode($params['error_msg'])?>)
                            });
                        }
                    }
                });
            }
        );

Above is what it used to be working up until Magento 2.3 came out.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a magento.stackexchange
scroll top