User Manual - Smart One Step Checkout

Magento 2 Smart One Step Checkout ensures the flawless checkout process with a one-step checkout page. With the module, you can configure newsletter subscription, delivery dates, address auto completion, GeoIP detection, customizing billing and shipping sections, etc. Analytical reports demonstrate general and detailed (per form) checkout abandonment stats.

Compatibility: Magento Open Source 2.3.X - 2.4.X, Magento Commerce 2.3.X - 2.4.X

 

 

 

 

 

Installing M2 One Step Checkout

Command Line Installation

  1. Backup your web directory and store database
  2. Download the Smart One Step Checkout installation package
  3. Upload the contents of the Smart One Step Checkout installation package to your store root directory
  4. In the SSH console of your server, navigate to your store root folder:
cd path_to_the_store_root_folder

run:

php -f bin/magento module:enable Aheadworks_OneStepCheckout

then:

php -f bin/magento setup:upgrade

after:

php -f bin/magento setup:static-content:deploy

   5. Flush store cache; log out from the backend and log in again

Make sure the installation is done from the FTP Administrator account. Otherwise, set 775 permissions to the store root directory after the extension is deployed.

Composer Installation

  1. If you are installing an extension from Aheadworks for the first time, you need to add our composer repository to your Magento store:

Login to your ssh console and navigate to your store folder:

cd path_to_the_store_root_folder

Run the following command:

composer config repositories.aheadworks composer https://dist.aheadworks.com/

On successful execution of the command you will be able to use the composer to install the extensions.

To install the extension:

     2. Login to your ssh console and navigate to your store folder:

cd path_to_the_store_root_folder

3. Run the following command to install the latest version of the extension:

composer require aheadworks/module-onestepcheckout

if you need to install a specific version, run this command:

composer require aheadworks/module-onestepcheckout:<version>

 

Specify the version of the extension in <version>

When prompted, enter Public Key (Username) and Private Key (Password):

Both Public Key (Username) and Private Key (Password) can be found in My Projects and Licenses in your personal account on our site:

4. Enable the extension:

php -f bin/magento module:enable Aheadworks_OneStepCheckout

Next, register the extension:

bin/magento setup:upgrade

Recompile your Magento store if you are in the Production mode:

bin/magento setup:di:compile

To verify that the extension is enabled, run this command:

bin/magento module:status

Clean store cache, by running the following command:

bin/magento cache:clean

Log out and Log in the backend again.

To upgrade the extension:

5. To update or upgrade an extension:

Download the updated extension file. Take note of the module-name and version. Export the contents to your Magento root.

If a composer package exists for the extension, run one of the following.

Update per module name:

composer update aheadworks/module-onestepcheckout

Updater per version:

composer require aheadworks/module-onestepcheckout:<version>

Run the following commands to upgrade, deploy, and clean the cache.

php bin/magento setup:upgrade --keep-generated 
php bin/magento setup:static-content:deploy
php bin/magento cache:clean

 

 

 

 

 

Uninstalling M2 One Step Checkout 

Manual Removal

1. Disable the module by executing the following commands:

php bin/magento module:disable Aheadworks_OneStepCheckout 
php bin/magento setup:upgrade

2. Remove the extension files from the following folder:

app/code/Aheadworks/OneStepCheckout

Automatic Removal (via Composer)

1. Disable the module by executing the following commands:

php bin/magento module:uninstall Aheadworks_OneStepCheckout

 

 

 

 

 

Introducing M2 Smart One Step Checkout

The Magento 2 Smart One Step Checkout extension converts the native multi-step checkout page into the single-step one with all the required options at a customer's hand. Moreover, it introduces the following powerful features:

  • Best checkout practices;
  • Advanced built-in analytics;
  • Flexible checkout settings;
  • Form auto completion and default values;
  • Delivery date and notice fields.

Extension Logic

Once installed, the module replaces the native Magento checkout with a full-fledged single-step checkout page. There, the customer can find all the required options: login, payment and shipping info, etc. Moreover, the page enhances customer experience with field auto-completion, country IP auto-detection, Google form auto-completion, and other features. An admin, in turn, can rename and rearrange checkout fields at their convenience.

To cover all aspects of the checkout process and provide a store owner with a constant possibility to improve, the extension comes with a set of checkout progression reports. The reports show overall and detailed checkout abandonment stats (checkout field completion rates) for quick and meaningful checkout page adjustments.

What's new?

The latest versions of the extension (2.0.0) feature: 

  • UX/UI update
  • Phone number validation
  • Merge Coupon Code and Gift Card fields 
  • Custom Address Fields
  • Customer Information Fields
  • Fields Relations
  • Integration with Braintree Payments by Gene module
  • Integration with new Amazon Pay module
  • SplitIt payment support 
  • GraphQL support
  • Select Location of Place Order button 
  • Disable configurable options change
  • Statistics are collected via Beacon API

 

 

 

Extension Settings

The extension settings page can be found under Stores → Configuration → AHEADWORKS EXTENSIONS → One Step Checkout. On this page, you can control the overall extension behavior, adjust checkout field names, display orders, upload trust seals, and more.

General Settings

The General section comes with the following settings:

  • Title - defines the title of the one-step checkout page;
  • Description - adds a message below the checkout page's title;
  • Apply Discount Code Enabled - defines if customers can apply discount coupons right on the checkout page;
  • Order Notes Enabled - defines if customers can leave notes to the admin. Order notes are available on the order details page;
  • Enable Address Autocomplete Suggestions - enables automated address suggestions provided by the Google Maps service;
  • Google API Key (available when 'Yes' in the above) - the Google Maps API key required to identify your store;
  • Expand mini cart by default -  sets the default layout for the mini cart;
  • Display Top Menu - enables/disables the top menu of the store at checkout;
  • Enable Checkout Reports - enables/disables reporting. When disabled, the report pages are unavailable from the menu;
  • Merge Gift Card and Coupon Code in One Field - enables/disables to merge gift card and coupon code in one field on the checkout;
  • Display Place Order Button Near Payment Methods - defines where to display the Place Order button;
  • Allow Edit Configurable Options - enables/disables configurable options change
    • When it's Yes, attributes are displayed in the dropdown and they can be edited on the checkout;
    • When it’s No, options are displayed in the text and they can't be edited.

Newsletter Subscription Option

The Newsletter Subscription Option block controls the behavior of the newsletter subscription field if it is available on the checkout page.

  • Enabled - defines if customers can subscribe to the newsletter right from the checkout page;
  • Checked by Default - defines if the subscribe to newsletter checkbox is checked by default.

Default Values

The Default Values section controls whether particular fields have predefined values. Helpful for the stores that mostly ship the goods to a single country or work with a particular shipping or payment method company.

  • Country - selects the predefined value for the country checkout field;
  • Region/State - defines the default region/state;
  • City - defines the default city;
  • Shipping Method - specifies the default shipping method;
  • Payment Method - defines the default payment method.

Delivery Date Options

This configuration section defines the date and time slots available for order delivery and whether customers can specify a delivery date and time.

  • Show Delivery Date - defines if the Delivery Date and Delivery Time fields are available on the checkout page;
  • Available Weekdays - defines on which days of the week orders can be delivered to customers;
  • Available Time Slots - defines on which time slots orders can be delivered to customers;
  • Delivery is not Available During These Days and Periods - defines which time periods are excluded from the available delivery options;
  • Days Between Order and Delivery Dates - defines the number of days from the order date when customers can start booking delivery.

In the Delivery is not Available During These Days and Periods section, you are presented with a set of available periods:

  • Single Day - excludes a particular date from the delivery options (useful for national holidays);
  • Recurrent Day of Week - excludes a particular day of the week from the delivery options (for example, if you don't deliver on weekends);
  • Recurrent Day of Month - excludes a particular day of the month from the delivery options (for example, if you have to perform accounting);
  • Period, From-To - excludes a particular period from the delivery options (for example, your best delivery guy went on vacation).

You can combine these periods and dates by clicking the Add button.

To display delivery dates in order confirmation emails, you need to manually insert the following Magento 2 variables into the template:

  • Order Delivery Date;
  • Order Delivery Time.

Addresses Settings

Here is only one setting:

When Billing and Shipping Addresses are the Same by Default option is:

  • set to No, checkbox My Billing and Shipping addresses are the same in unchecked by default.

Customer Information Fields Customization

  • Display Customer Information Section - enables/disables to display additional customer information section with customer attributes on the checkout;
    • When it’s set to Yes, block Email on the checkout is renamed to Customer Information.
  • Display Customer Information fields for Logged Users -  enables/disables to display already filled attributes in the Customer Information section for logged users on the checkout
    • When it’s set to No, fields with already filled values will be hidden on the checkout page for logged-in users.

How to add a new customer information field on the checkout page?

First, you need to install the Customer Attributes module if you’re using Magento Open Source (for Magento Commerce native customer attributes are used). 

There are 2 ways of adding an attribute

  1. Stores → Configuration → Aheadworks Extensions → One Step Checkout → there is a new tab Customer Information Fields Customization, which contains a dropdown Display Customer Information Section. Set to Yes to display additional sections with customer attributes on the checkout. When it’s set to Yes, block Email on the checkout is renamed to Customer Information;
  2. The section will feature the same attributes as listed in Customers → Customer Attributes by Aheadworks→ Customer Attributes → Attribute Edit Page (For Magento Commerce: Stores → Attributes → Customer Attributes → Attribute Edit Page).

There are 2 ways to add a customer attribute:

  1. Customer → Customer Attributes by Aheadworks → Customer Attributes. (In Magento Commerce attributes can be found in Stores → Attributes → Customer Attributes). When opening the page, there is a grid with all default customer attributes. To create a new field on the checkout page, click Add New Attribute button;
  2. Stores → Configuration → Aheadworks Extensions → One Step Checkout → in Customer Information Fields Customization section there is a button Add a Customer Attribute, by clicking which a new attribute edit page will be opened.

After the attribute is saved, it’s displayed in OSC configuration: Stores → Configuration → Aheadworks Extensions → One Step Checkout → in Customer Information Fields Customization section. You can change its order, set it as required or not, enable or disable, etc.

For custom fields on checkout and when creating order from the admin panel following input, types are not supported: File (attachment) and Image File.

 

Find out about installation instructions for the Customer Attributes module here.

 

Please make sure that your attributes on One Step Checkout have the same value for Required field as on the attribute edit page (For Magento Commerce: Stores → Attributes → Customer and Customer Address Attributes → Attribute Edit Page, for Magento Open Source: Customers → Customer Attributes by Aheadworks→ Customer and Customer Address Attributes → Attribute Edit Page). Otherwise, errors may happen.

 

When a customer attribute is set as Required in the Attribute configuration and it wasn’t filled by a logged-in customer when opening the checkout page the customer will be redirected to the customer edit page in the My Account.

 

Attributes Last Name, First Name, Prefix, Middle name, and Name suffix are not displayed on Customer information block in the configuration and on the frontend, they belong to Customer Address Attributes.

Shipping and Billing Field Customization

With these two configuration sections, you can rearrange fields in the shipping and billing address blocks, mark fields as Mandatory, and furthermore, rename fields.

Some of the shipping and billing address fields cannot be disabled because most of the payment methods require them present and will not process payments that lack customer information. This is done to avoid conflicts with payment processors.

Almost every field of this section can be either enabled or set as required. Required fields are mandatory, customers will not be able to complete checkout leaving them blank. Use the correspondent checkbox to enable/disable fields.

To rearrange the field blocks on the checkout page, use the mouse to drag & drop them. Arrange the fields in an ordered layout with the Move next to the previous field option.

Add a Customer Address Attribute

How to add a new address field on the checkout page?

First you need to install the Customer Attributes module if you’re using Magento Open Source (for Magento Commerce native customer attributes are used). There are 2 ways of adding an attribute: 

  • Customer → Customer Attributes by Aheadworks → Customer Address attributes. (In Magento Commerce attributes can be found in Stores → Attributes → Customer Address). When opening the page, there is a grid with all default customer address attributes. To create a new field on the checkout page, click Add New Attribute button. 
  • Stores → Configuration → Aheadworks Extensions → One Step Checkout → in Billing Fields Customization and Shipping Fields Customization sections there is a button Add a Customer Address Attribute, by clicking which a new attribute edit page will be opened.

To display the field on the checkout page, Show on Storefront must be enabled to Yes and in Display on forms at least Customer Address Registration option must be selected. Other details regarding the Customer Attributes module can be found here.

For custom fields on checkout and when creating order from the admin panel following input types are not supported: File (attachment) and Image File

 

Please make sure that your attributes on One Step Checkout have the same value for Required field as on attribute edit page (For Magento Commerce: Stores → Attributes → Customer and Customer Address Attributes → Attribute Edit Page, for Magento Open Source: Customers → Customer Attributes by Aheadworks→ Customer and Customer Address Attributes → Attribute Edit Page). Otherwise errors may happen.

To save the attribute click on the Save button.

After the attribute is saved, it’s displayed in OSC configuration: Stores → Configuration → Aheadworks Extensions → One Step Checkout → in Billing Fields Customization and Shipping Fields Customization sections. You can change its order, set it as required or not, enable or disable, etc.

Fields Relations

For CE Customer Attributes module will already include that functionality.

The Manage Relations option of attributes allows to display a field only when certain options were selected by the customer in a previous field.

The block is available for the Yes/No and Dropdown only. It becomes active once the previous three sections have been completed and the attribute has been saved.

Make sure you have created dependent attributes first to see them in the Dependent Attribute field as alternatives for choice. The Option field shows the options for dropdown (Yes or No, in case of the Yes/No type) as indicated on the previous step.

Example

If customer selects Yes in the field “Are you a member of our club?”, a new field will be displayed “Member Card number”

For the example above there has been created an attribute “Are you a member of our club?” with Yes/No type. In Manage Relations section a dependent attribute Member Card Number was selected to the corresponding Yes option. When No is chosen, no field is displayed.

 

For EE: to support the functionality it’s mandatory to install module-customer-attributes-relation.

It supports attribute relations for customer account/address and checkout the same way as the Aheadworks Customer Attributes module.

There is one limitation: It is not possible to synchronize attribute options and options for relations on the fly. First, you have to select options (Manage Label/Options) then save attributes, after that, they become available for Relations.

Trust Seals Block

With the Trust Seals Block setting section, you can upload the security badges provided by payment processors.

  • Enabled - defines if the trust seals displayed below the dropdown;
  • Secure Payment Label - defines the wording that anticipates the trust seals;
  • Trust Seals - uploads trust seals to the checkout page;
  • Custom Text - the additional text block to be displayed below the uploaded trust seals. Most of the payment processors offer a couple of lines of code to insert trust seals into the page. You can upload multiple seals by clicking on the Add button.

Trust seals might be useful for introducing new payment methods and gaining customers' trust.

JS is not supported.

GeoIP Settings

The GeoIP Settings section provides you with the address detection by IP functionality.

  • GeoIP2 Library - downloads and installs the GeoIP2 library;
  • License Key - your license key to the GeoIP solution in use;
  • GeoIP2 Database - downloads or updates the existing GeoIP2 database;
  • Enable IP Detection - enables the functionality if the GeoIP library is installed.

If specified, the Default Country option has a higher priority over the above functionality.

 

How can I get a License Key?

Expand the text below for sample guidance on retrieving a license key from the MaxMind GeoIP solution.

Follow the steps below to retrieve a license key from the MaxMind GeoIP solution:

  1. Start your account at https://www.maxmind.com/
  2. Log in and go to Account → Services → License Key

3. Click on Generate new licence key and complete the form

4. Click on the Confirm button

5. You can now copy-paste your license key

 

 

Checkout Performance Reports

The extension is the first extension on the market to offer a full range of checkout performance reports for meaningful checkout page layout adjustments.

The checkout performance reports can be found under Reports → One Step Checkout by Aheadworks.

Abandoned Checkout Statistics Report

The Abandoned Checkout Statistics report shows the number of abandoned checkouts, the abandoned checkout revenue (the additional possible revenue), the number of orders, the order revenue, and checkout conversion rates for the set period.

For simple segmentation, the reports come with filtering options. Those include the store view and customer group filters.

The date range can be selected in the flexible calendar:

In the provided calendar, you can specify any date or date range either by clicking the required dates or by indicating the interval manually. Once the date has been selected, click Apply to refresh the report page.

Below the checkout conversion chart, you can see the reporting table and chart providing an abandoned checkout overview.

You can also define which values should be displayed in the chart.

Checkout Behavior Report

The Checkout Behavior Report provides you with the per-field statistics of the checkout page's performance. Thus, you can make the appropriate changes to the checkout page depending on how well particular fields perform in terms of conversion rates.

 

 

 

Getting Around

The one-step checkout page introduced by the extension provides all the necessary functionality in one place.

The extension is designed in a way to minimize the number of customers leaving the checkout page.

Login and Shipping Address

The first checkout block offers customers to log in

Customers are suggested to enter an email address. If there is already an account at the store with such an email, the system will recognize it and provide the appropriate suggestions.

Additionally, customers can click the Login here active link to log in manually. Whenever the link is clicked, customers will see a pop-up window suggesting to enter their login data.

This block will be renamed to Customer Information when it is enabled on the backend. 

If the Customer Address Attributes option is enabled and configured from the backend the field will display on the checkout page. 

Only numbers, whitespace, and some special symbols (-, +, () ) can be entered in the Phone Number field on the checkout. 

Shipping Address

Below the login and registration fields, you can see the Shipping Address block. If from the backend, you configured the Default Values section, then all information will be displayed on the frontend. With every field, all the entered information is cached within the session.

If the unexpected page reloads take place, all the already submitted info will be saved.

If a customer has already registered in your store, his/her shipping address will be automatically saved and will be used in future purchases.

Shipping Method

Let your customers select the preferred Shipping Method and define a delivery date and time (if allowed by the extension settings) at the checkout.

The Delivery Date and Delivery Time options are flexible and set in the admin area. Any dates and time intervals can be specified depending on the delivery options available.

Preferred delivery date and time are displayed on the order details page.

Payment Method

Next comes the Payment Method block.

Here customers are suggested to specify the preferred payment method and billing address if it doesn't correspond to the shipping address.

Depending on the selected payment method, customers will be either suggested to fill in the required fields or redirected to the payment method side. This solely depends on the configuration and peculiarities of the chosen payment method.

Also, you can enable using billing and shipping addresses as the same.

The checkbox is automatically checked when a payment method is selected on the checkout.

Order Review

On the right side of the checkout page, customers are presented with the Order Review block.

The block provides an overview of all the products added to the cart. Here, customers can remove products, change product quantity, color and size, and apply discount codes. Whenever the product quantity is adjusted or the product is removed from the cart, the order total is adjusted automatically without page reloading.

Know your customers! Should they be eager to place orders with 150+ products, limit the number of items featuring in the Overview section to prevent page freezing. To do so, go to Stores → Configuration → Sales → Checkout → Maximum Number of Items to Display in Order Summary, enable the field and indicate the value.

In the Coupon Code and Gift Card fields, a customer can enter a coupon code or gift card. When Coupon Code is entered, the button Apply is replaced to Cancel and a customer isn’t able to apply for a Gift card.

If the Gift Card extension by Aheadworks is disabled, only the coupon code field will be displayed.

The loading speed will be a bit lower because of two inquiries sent at one time.

In the Adding Notes and Placing an Order area customers can leave any note to the admin that will be available on the order details page.

Additionally, the admin can upload trust seals of the payment methods available and specify a secure payment label.

Here customers can leave any note to the admin that will be available on the order details page. Additionally, the admin can upload trust seals of the payment methods available and specify a secure payment label. In the above image, you can see the uploaded official PayPal trust seal and the '100% Secure Payment' secure payment label specified.

Supported Payment Options

Smart One Step Checkout is integrated with several Aheadworks extensions, including Payment Restrictions, Shipping Restrictions, Store Credit and Refund, Gift Card, and Reward Points

Further to the above, the extension supports a few payment methods and payment gateways: B2B Company Credit, NET.30Authorize.net, Bambora APAC, NMI, PayPal Payflow, Affirm, Klarna, SplitIt payment support, Amazon Pay module, and Braintree Payments by Gene module.

Authorize.net

The extension is compatible with the new Authorize.Net payment method that has been added to M2.3.1 instead of Authorize.Net Direct Post (Deprecated).

When using Authorize.net, make sure each customer profile is set up to include up to 10 payment profiles and up to 100 shipping profiles (this is an official restriction by Authorize.net).

Bambora APAC

Bambora payment support is possible with a standalone module Bambora APAC, available for purchase on the Aheadworks store.

NMI

NMI payment support is possible with a standalone module NMI Payment available on the Aheadworks store.

On Credit Payment

The On-Credit payment support is possible with a standalone module B2B Company Credit available on the Aheadworks store.

NET 30 Deferred Payment

Deferred payment (NET 30) support is possible with a standalone module NET 30 available on the Aheadworks store.

Klarna

We added Klarna payment method, which means that your customers can make payments in your Magento website using Klarna.

SplitIt payment support 

Now One Step Checkout 2.0.0 is integrated with the Splitit payment module (version 2.X).

Amazon Pay module

Now One Step Checkout 2.0.0 is integrated with the official Amazon Pay module (version 5.X).

Braintree Payments by Gene module

Now One Step Checkout 2.0.0 is integrated with Braintree Payments by Gene module (version 4.X).

To configure payment methods to be available at checkout, please refer to Stores > Settings > Configuration > Sales > Payment Methods. The official Magento 2 guide will be of help here. To extend the native Magento 2 functionality and specify payment methods to be available at checkout to selected groups of customers install the Payment Restrictions module (extra fee may apply). 

 

 

 

Tips and Tricks

Custom Email Variable

The Smart One Step Checkout extension comes with a single custom email variable:

{{var order.getAwOrderNote()}}

The variable inserts the notice a customer left for an order into a notification email.

We added the compatibility with the themes that do not support LESS compilation. To enable the compatibility, you need to find the following lines in the app / code / Aheadworks / OneStepCheckout / view / frontend / layout / onestepcheckout_index_index.xml file:

<head>
<!-- Uncomment to enable compatibility with themes that do not support LESS compilation -->
<!-- <css src="Aheadworks_OneStepCheckout::css/aw_osc_styles.css"/> -->
</head>

and change them to:

<head>
<!-- Uncomment to enable compatibility with themes that do not support LESS compilation -->
<css src="Aheadworks_OneStepCheckout::css/aw_osc_styles.css"/>
</head>

 

Product Page

Report incorrect information

Still Have Questions?

Our customer care team is here for you!

Contact Us