Move Paypal Express Checkout button to top of the checkout page in magento 2

1.2k views Asked by At

I want to move Paypal express checkout button from the payment section to the top of the checkout page in Magento 2.

2

There are 2 answers

0
Preston PHX On

Magento's Paypal configuration has an option to display a PayPal shortcut on the "View cart" page, which is the main thing you should absolutely do. It enables people to add something to their cart, then click to go to PayPal and not have to type in all their address and payment information mangually into Magento, because it just gets pulled in from their Paypal account.


You can also display the same PayPal shortcut on each product page.

0
Dhairya Shah On

I have achieved by this way.

Custom/Module/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">            
            <block class="Magento\Paypal\Block\Express\InContext\Minicart\SmartButton" name="checkout.right.logo" template="Custom_Module::express/in-context/shortcut/button.phtml" before="-">                
            </block>            
        </referenceContainer>        
    </body>
</page>

Custom/Module/view/frontend/templates/express/in-context/shortcut/button.phtml

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

/**
 * @var \Magento\Paypal\Block\Express\InContext\Minicart\SmartButton $block
 */
$widget = $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonDecode($block->getJsInitParams());
$widgetConfig = $this->helper(\Magento\Framework\Json\Helper\Data::class)->jsonEncode($widget['Magento_Paypal/js/in-context/button']);
?>
<div data-mage-init='{"Magento_Paypal/js/in-context/button":<?= /* @noEscape */ $widgetConfig ?>}'
     class="paypal checkout paypal-logo paypal-express-in-context-mini-cart-container">
</div>