5

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.

1 Answer 1

3
<?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.

2
  • 2
    Works very well!
    – dawhoo
    Jun 7, 2019 at 19:11
  • 1
    Thank you for the code, it worked great for me on Magento 2.4.3.
    – Clayton-a
    Feb 25, 2022 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.