Instant purchase (optional)

Owned by Patrycja Niestrój
Last updated: May 02, 2023 by Tomasz Drabik
2 min read

https://github.com/magesuite/instant-purchase

This module extends default instant-purchase functionality of Magento, providing the possibility to quickly reorder previously bought items and also rebuy them with one click using payment methods that integrate with Magento vault.

It replaces FE implementation with our custom components.

Installation

This module is optional.

"creativestyle/magesuite-instant-purchase": "^1.0.0"

Admin settings

There are no additional settings available for this module. It is enabled by default.

Additional settings for Mollie Payments to make Rebuy possible. Go to: Stores -> Configuration -> Mollie

  1. Enable Mollie Vault General -> Settings -> Enable Magento Vault

2. Allow to save credit card data: Payment Methods -> Credit Card -> Enable Single Click Payments

Backend

Frontend

Frontend screens

With this feature enabled there is a modified order history table available in user area:

With those modifications user can easily add chosen items from previous orders to cart.

Additional feature available here is Rebuy. It requires mollie payment usage. For this one to be available user has to have credit card data stored from previous orders. Once this data is available, Rebuy button is available. Using this feature client can order selected products with one click → Rebuy now.

In the flyout user can check summary. There are also possibilities to change shipping and billing address (to be chosen from customers addresses book) and shipping method.

After confirmation order is created and customer is redirected to success page.

Styling

As the module is optional styling is not provided by default. The following import must be uncommented in a child theme that inherits from theme-creativeshop, in src/entries/customer.ts file:

import 'MageSuite_InstantPurchase'; import 'MageSuite_InstantPurchase/user-area';

Scripts

  • magesuite-instant-purchase/view/frontend/web/js/model/instant-purchase.js

  • magesuite-instant-purchase/view/frontend/web/js/view/instant-purchase.js

  • magesuite-instant-purchase/view/frontend/web/js/action/instant-purchase-create.js

  • magesuite-instant-purchase/view/frontend/web/js/action/instant-purchase-place-order.js

  • magesuite-instant-purchase/view/frontend/web/js/instant-purchase-form.js

are the most important scripts with instant-purchase logic.

Additionally following mixin is added to MagSuite Pwa module scripts:

mixins: { 'MageSuite_Pwa/js/pwa-a2hs-guide': { 'MageSuite_InstantPurchase/js/pwa-a2hs-guide-ext': true, }, },