How is the «Check out with PayPal» button implemented?

dmitry_fedyuk · April 21, 2017, 4:25am

Context:

How is the «Check out with PayPal» button implemented on the dropdown mini-cart?
How is the «Check out with PayPal» button implemented on the standalone cart page?

Case A: for the mini-cart dropdown
Case B: for the standalone cart page

1A. Magento_Checkout::minicart/content.html

magento/magento2/blob/c3040d36/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html#L55-L55


<div data-bind="html: getCartParam('extra_actions')"></div>

2A. Magento\Checkout\CustomerData\Cart::getSectionData()

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Checkout/CustomerData/Cart.php#L97-L97


'extra_actions' => $this->layout->createBlock(\Magento\Catalog\Block\ShortcutButtons::class)->toHtml(),

3A. Magento\Catalog\Block\ShortcutButtons::_beforeToHtml()

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Catalog/Block/ShortcutButtons.php#L66-L81


/**
 * Dispatch shortcuts container event
 * @return $this
 */
protected function _beforeToHtml()
{
    $this->_eventManager->dispatch(
        'shortcut_buttons_container',
        [
            'container' => $this,
            'is_catalog_product' => $this->_isCatalogProduct,
            'or_position' => $this->_orPosition
        ]
    );
    return $this;
}

1B. Magento\Checkout\view\frontend\layout\checkout_cart_index.xml

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml#L176-L181


<block class="Magento\Checkout\Block\Cart" name="checkout.cart.methods.bottom" template="Magento_Checkout::cart/methods.phtml">
    <container name="checkout.cart.methods" as="methods" label="Payment Methods After Checkout Button">
        <block class="Magento\Checkout\Block\Onepage\Link" name="checkout.cart.methods.onepage.bottom" template="Magento_Checkout::onepage/link.phtml" />
        <block class="Magento\Checkout\Block\QuoteShortcutButtons" name="checkout.cart.shortcut.buttons" />
    </container>
</block>

2B.

It is not needed.

3B. Magento\Checkout\Block\QuoteShortcutButtons::_beforeToHtml()

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Checkout/Block/QuoteShortcutButtons.php#L32-L49


/**
 * Dispatch shortcuts container event
 *
 * @return $this
 */
protected function _beforeToHtml()
{
    $this->_eventManager->dispatch(
        'shortcut_buttons_container',
        [
            'container' => $this,
            'is_catalog_product' => $this->_isCatalogProduct,
            'or_position' => $this->_orPosition,
            'checkout_session' => $this->_checkoutSession
        ]
    );
    return $this;
}

4. Magento/Paypal/etc/frontend/events.xml

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/etc/frontend/events.xml#L15-L17


<event name="shortcut_buttons_container">
    <observer name="paypal_shortcuts" instance="Magento\Paypal\Observer\AddPaypalShortcutsObserver"/>
</event>

5. Magento\Paypal\Observer\AddPaypalShortcutsObserver::execute()

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/Observer/AddPaypalShortcutsObserver.php#L42-L87


/**
 * Add PayPal shortcut buttons
 *
 * @param EventObserver $observer
 * @return void
 */
public function execute(EventObserver $observer)
{
    /** @var \Magento\Catalog\Block\ShortcutButtons $shortcutButtons */
    $shortcutButtons = $observer->getEvent()->getContainer();
    $blocks = [
        \Magento\Paypal\Block\Express\InContext\Minicart\Button::class =>
            PaypalConfig::METHOD_WPS_EXPRESS,
        \Magento\Paypal\Block\Express\Shortcut::class => PaypalConfig::METHOD_WPP_EXPRESS,
        \Magento\Paypal\Block\Bml\Shortcut::class => PaypalConfig::METHOD_WPP_EXPRESS,
        \Magento\Paypal\Block\WpsExpress\Shortcut::class => PaypalConfig::METHOD_WPS_EXPRESS,
        \Magento\Paypal\Block\WpsBml\Shortcut::class => PaypalConfig::METHOD_WPS_EXPRESS,
        \Magento\Paypal\Block\PayflowExpress\Shortcut::class => PaypalConfig::METHOD_WPP_PE_EXPRESS,
        \Magento\Paypal\Block\Payflow\Bml\Shortcut::class => PaypalConfig::METHOD_WPP_PE_EXPRESS
    ];
    foreach ($blocks as $blockInstanceName => $paymentMethodCode) {
        if (!$this->paypalConfig->isMethodAvailable($paymentMethodCode)) {
            continue;
        }


        $params = [
            'shortcutValidator' => $this->shortcutFactory->create($observer->getEvent()->getCheckoutSession()),
        ];
        if (!in_array('Bml', explode('\\', $blockInstanceName))) {
            $params['checkoutSession'] = $observer->getEvent()->getCheckoutSession();
        }


        // we believe it's \Magento\Framework\View\Element\Template
        $shortcut = $shortcutButtons->getLayout()->createBlock(
            $blockInstanceName,
            '',
            $params
        );
        $shortcut->setIsInCatalogProduct(
            $observer->getEvent()->getIsCatalogProduct()
        )->setShowOrPosition(
            $observer->getEvent()->getOrPosition()
        );
        $shortcutButtons->addShortcut($shortcut);
    }
}

6. Magento\Paypal\Block\Express\InContext\Minicart\Button::shouldRender()

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/Block/Express/InContext/Minicart/Button.php#L101-L113


/**
 * Check is Paypal In-Context Express Checkout button
 * should render in cart/mini-cart
 *
 * @return bool
 */
protected function shouldRender()
{
    return $this->payment->isAvailable($this->session->getQuote())
        && $this->isMiniCart
        && $this->isInContext()
        && $this->isVisibleOnCart();
}

7. Magento\Paypal\Block\Express\InContext\Minicart\Button

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/etc/frontend/di.xml#L89-L98


<type name="Magento\Paypal\Block\Express\InContext\Minicart\Button">
    <arguments>
        <argument name="data" xsi:type="array">
            <item name="template" xsi:type="string">Magento_Paypal::express/in-context/shortcut/button.phtml</item>
            <item name="alias" xsi:type="string">paypal.express-in-context.mini-cart</item>
            <item name="button_id" xsi:type="string">paypal-express-in-context-mini-cart</item>
        </argument>
        <argument name="payment" xsi:type="object">Magento\Paypal\Model\Express</argument>
    </arguments>
</type>

8. Magento_Paypal::express/in-context/shortcut/button.phtml

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/view/frontend/templates/express/in-context/shortcut/button.phtml#L7-L28


use Magento\Paypal\Block\Express\InContext\Minicart\Button;


/**
* @var \Magento\Paypal\Block\Express\InContext\Minicart\Button $block
*/
$config = [
   'Magento_Paypal/js/in-context/button' => [
       'id' => $block->getContainerId(),
       'paypalButton' => Button::PAYPAL_BUTTON_ID,
       'addToCartSelector' => $block->getAddToCartSelector()
   ]
];


?>
<div data-mage-init='<?php /* @noEscape */ echo json_encode($config); ?>'
    class="paypal checkout paypal-logo <?php /* @noEscape */ echo $block->getContainerId(); ?>-container">
   <a id="<?php /* @noEscape */ echo $block->getContainerId(); ?>" href="#">
       <img class="paypal-button-hidden"
            src="<?php /* @noEscape */ echo $block->getImageUrl() ?>"
            alt="Check out with PayPal" />
   </a>
</div>

9. Magento_Paypal/js/in-context/button

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/view/frontend/web/js/in-context/button.js#L40-L48


/**
 * @param {Object} event
 * @returns void
 */
click: function (event) {
    event.preventDefault();


    $('#' + this.paypalButton).click();
}

this.paypalButton is defined here:

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/view/frontend/templates/express/in-context/shortcut/button.phtml#L15-L15


'paypalButton' => Button::PAYPAL_BUTTON_ID,

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/Block/Express/InContext/Minicart/Button.php#L25-L25


const PAYPAL_BUTTON_ID = 'paypal-express-in-context-checkout-main';

10. Magento_Paypal::express/in-context/component.phtml

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/view/frontend/templates/express/in-context/component.phtml#L6-L37


use Magento\Paypal\Block\Express\InContext\Minicart\Button;


/** @var \Magento\Paypal\Block\Express\InContext\Component $block */


$configuration = [
'*' => [
    'Magento_Paypal/js/in-context/express-checkout' => [
        'id' => Button::PAYPAL_BUTTON_ID,
        'path' => $block->getUrl(
            'paypal/express/gettoken',
            [
                '_secure' => $block->getRequest()->isSecure()
            ]
        ),
        'merchantId' => $block->getMerchantId(),
        'button' => $block->isButtonContext(),
        'clientConfig' => [
            'locale' => $block->getLocale(),
            'environment' => $block->getEnvironment(),
            'button' => [
                Button::PAYPAL_BUTTON_ID,
            ],
        ]
    ]
]
];


?>
<div style="display: none;" id="<?php /* @noEscape */ echo Button::PAYPAL_BUTTON_ID; ?>"></div>
<script type="text/x-magento-init">
<?php /* @noEscape */ echo json_encode($configuration); ?>
</script>

11. Magento_Paypal/view/frontend/layout/default.xml

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/view/frontend/layout/default.xml#L10-L18


<referenceContainer name="after.body.start">
    <block class="Magento\Paypal\Block\Express\InContext\Component"
           name="paypal.express-in-context.component"
           template="Magento_Paypal::express/in-context/component.phtml">
        <arguments>
            <argument name="is_button_context" xsi:type="boolean">true</argument>
        </arguments>
    </block>
</referenceContainer>

12. Magento_Paypal/js/in-context/express-checkout

github.com

magento/magento2/blob/c3040d36/app/code/Magento/Paypal/view/frontend/web/js/in-context/express-checkout.js#L79-L89


initClient: function () {
    _.each(this.clientConfig, function (fn, name) {
        if (typeof fn === 'function') {
            this.clientConfig[name] = fn.bind(this);
        }
    }, this);


    paypalExpressCheckout.checkout.setup(this.merchantId, this.clientConfig);


    return this;
}