Skip to main content
knowledgecenter.avangate.com

Mobile checkout interface

Overview

The Avangate mobile shopping cart is optimized for mobile devices including smartphones and tablets. Once enabled for your account, shoppers purchasing products from your online store via their mobile smartphone or tablet will get to use the mobile version of the Avangate shopping cart. Device detection technology is designed to ensure that the Avangate system serves the dedicated mobile cart template to mobile users, automatically.

Use the Avangate mobile shopping cart to enable your shoppers using mobile devices to place orders for:

  • new product purchases (subscriptions);
  • subscriptions with recurring billing;
  • test orders - the Avangate mobile shopping cart comes with testing capabilities, enabling you to place test orders;
  • upgrades - once an update offering is added to cart, users of mobile devices will be able to complete the purchase using the Avangate mobile shopping cart.

Initial focus is placed on form factors powered by Apple iOS and Google Android, but support will be expanded to additional platforms. Designed as an answer to the needs of SaaS and ESD businesses alike, the Avangate mobile shopping cart optimizations are tailored to single- and multi-product cart scenarios involving service and software purchasing.

Technologies used include jQuery, jQuery mobile, HTML, PHP, CSS.

Availability

The Avangate mobile shopping cart dedicated package needs to be enabled for your account. Contact Avangate directly if you'd like to start using a shopping cart tailored to mobile platforms.

Note: When removing all products from the shopping cart, users of mobile devices will be automatically redirected to the mobile version of the empty shopping cart page, regardless of whether the Avangate mobile shopping cart package is enabled for your account or not.

Supported platforms:

  • Apple iOS 3.2-5.0, and later (running on iPhone and iPad);
  • Android 2.1-2.3, Android 3.1, Android 4.0, and later (running on smartphones and tablets);

Note: Additional platforms are also detected and supported, but optimizations of the Avangate mobile shopping cart targeted primarily iOS and Android.

Supported browsers: native OS browsers (Webkit): Safari and Chrome

Note: The future evolution of the Avangate mobile shopping cart will include tablet-specific improvements, and expanded support for new platforms/browsers/devices.

Device detection technology

Thanks to Avangate's device detection, the shopping cart adapts to supported platforms (desktop vs. mobile). Provided that the Avangate mobile package is enabled for your account, when Avangate detects a supported mobile device/platform , it automatically displays the mobile shopping cart to shoppers.

In scenarios in which device/platform detection fails or when shoppers are using a smartphone/tablet not supported by the Avangate mobile shopping cart, the system will serve the desktop version of the shopping cart instead.

Avangate's device detection technology adapts the shopping cart to supported desktop and mobile (smartphones and tablets) platforms and displays the optimal design to shoppers automatically. You can use the settings on the Ordering Options page (scroll down to the bottom) to control how device detection works:

  • Enable mobile device detection only for smartphones.
  • Enable mobile device detection only for tablets.

If unchecked, the desktop version of the shopping cart template will be displayed on mobile devices.

Buy link parameters

You will be able to use the same parameters to customize buy links for mobile shoppers as the ones used for the desktop version of the cart.

Exceptions: When users of mobile devices are detected certain parameters will be ignored such as CARD, PAY_TYPE for unsupported payment methods, ORDERSTYLE.

Optimized purchase flow

The Avangate mobile shopping cart uses a streamlined, one-page checkout flow, centralizing all stages of the purchase process on a single page. Shoppers will experience an optimized one page checkout when they'll view details of the product added to cart including pricing, and that will enable them to provide the billing information and their payment data, without the need for them to visit interstitial pages.

Optimizations introduced in the process of tailoring the shopping cart to mobile platforms include:

  • Redesigned, one-column template scalable and responsive to adapt to different screen sizes;
  • Touch-enabled UI providing single touch access to content;
  • Device orientation aware design working both in portrait and landscape;
  • Using native mobile controllers for tasks such as language and currency selection;
  • Streamlining the fields that shoppers use to provide their data.

Avangate supports mobile dedicated product pages in addition to the mobile shopping cart. This enables users shopping via mobile devices to view additional details, define quantity and select pricing options via a product page tailored to mobile devices, just as the rest of the Avangate mobile shopping cart.

Mobile product pages support both With base price and Without base price configurations, pricing options, volume discount, and scale pricing.

Supported payment methods:

  • Credit and debit cards: Visa, MasterCard, AMEX, JCB, Discover
  • PayPal

Localization capabilities

The Avangate system uses IP geo-location to detect shopper country. In addition, the language of the mobile shopping cart will match the browser language.

User interface customization

For the time being, the Avangate mobile shopping cart and its associated purchase flow supports basic customizations.

The mobile shopping cart displays your company's logo in the top right corner, provided that you uploaded one via the Company Logo section of Account Settings. Supported image file formats include *.jpg, *.gif, and *.png, and ideally the resolution should not be larger than 200 * 50 pixels (transparency is supported, such as for transparent PNGs). If you didn't provide a custom logo, your company's name is displayed instead as text.

Features and exceptions

The mobile version of the Avangate cart comes with a subset of the features of the desktop flavor.

Features

Availability

Company logo

Yes

Customization

No

Link to your homepage

Yes

Header and Footer (Terms & Conditions, Privacy Policy, Legal, Security and trust symbols)

Yes

Your product details - photo, price, name, and quantity

Yes

Custom content

No

Preview functionality

No

In-cart product management functionality (updating quantity, removing products)

Yes

Dedicated product pages

Yes

Pricing options

Yes

  • The mobile cart doesn't use tabs, or feature fields such as email address confirmation, phone number, 2nd address line - to streamline user interaction by restricting the number of fields required for shoppers to fill on their devices.
  • Security logos are static,  to avoid distracting users with pop-ups or new pages within the process.

For a streamlined mobile ordering experience, the following exceptions are in effect:

Type

Action in this version

Up-sell

Skip to checkout.php

Physical delivery / Different address delivery

Fallback to desktop version of the cart. The mobile shopping cart will not render for products with physical delivery.

Email marketing subscribe

Will not be displayed to shoppers.

Gift option

Will not be displayed to shoppers.

A/B testing

You will not be able to define an A/B test using the Control Panel covering the Avangate mobile cart. Also, any running A/B tests will not log visits/orders made by shoppers using mobile devices.

Backup Media

Will not be displayed to shoppers.

Download Insurance (DIS)

Will not be displayed to shoppers.

Instant electronic delivery

Delivery only happens via email.

 

Some advanced settings that are not included, like the presence of physical delivery, will swap the mobile cart for the desktop cart. Others will be bypassed completely, including up-sell, cross-sell, pricing options, and upgrade.

Cross-selling

The Avangate shopping cart supports both classic cross-selling and network cross-selling. This means that you'll be able to recommend both alternative products from your own store as well as third-party offerings from vendors in the Avangate system to your shoppers using mobile devices.

LAYOUT_TYPE parameter

LAYOUT_TYPE enables you to control which version of the shopping cart is served to shoppers. Possible values:

CLASSIC - the desktop variant of the shopping cart (using LAYOUT_TYPE=CLASSIC will always display the desktop version of the cart even to mobile device users);

MOBILE - Avangate mobile cart (using LAYOUT_TYPE=MOBILE will always display the mobile version of the shopping cart, even to users of desktop browsers).

For example, the following link:

https://secure.avangate.com/order/checkout.php?PRODS=1234567&CART=1&CARD=2

will always serve the mobile version of the cart to shoppers if customized as follows:

https://secure.avangate.com/order/checkout.php?PRODS=1234567&CART=1&CARD=2&LAYOUT_TYPE=MOBILE

Similarly, the desktop version of the cart will be displayed to shoppers if modified as this:

https://secure.avangate.com/order/checkout.php?PRODS=1234567&CART=1&CARD=2&LAYOUT_TYPE=CLASSIC

Free products

You're able to offer customers free products (with 0 value) via the Avangate mobile shopping cart.

Free and paid trials

Users of mobile devices can access both free and paid trials via the Avangate mobile shopping cart.

Test orders

You can place test orders using the Avangate mobile shopping cart. This functionality enables you to test the shopping experience for users of mobile devices.

Just add the following URL parameters LAYOUT_TYPE=MOBILE and DOTEST=1 to the Buy links you're generating.

For example, to place a test order using the Avangate mobile shopping cart, customize this link:

https://secure.avangate.com/order/checkout.php?PRODS=1234567&CART=1&CARD=2

as follows:

https://secure.avangate.com/order/checkout.php?PRODS=1234567&CART=1&CARD=2&LAYOUT_TYPE=MOBILE&DOTEST=1

Delete product from cart

The Avangate mobile shopping cart allows shoppers to completely remove products added to cart.

Mobile cart promotions (discount coupons)

The Avangate mobile shopping cart can feature a Discount coupon field for promotions configured using the Control Panel. Offer per-product, quantity and per-order discounts to customers using mobile devices for the shopping process.

Preview the Avangate mobile shopping cart

  1. The simplest way to test the Avangate mobile shopping cart is to generate a test buy link or an actual buy link and to use it with the browser of your smartphone or tablet.
  2. As an alternative, you can take advantage of built-in functionality or extensions (add-ons) that let you manually control the user agent of a desktop browser. A browser such as Google Chrome version 19.0 or later, enables you to load the Avangate desktop shopping cart, right click the page and select Inspect element, from the Settings menu accessible via the link at the bottom right hand side of the screen open up Settings, and change the User agent from the drop down menu available. Also check the checkbox for the Emulate touch events option.

Once you changed the user agent, right click the page where the cart is loaded, and select Reload from the contextual menu. The Avangate device detection technology will detect the new user agent and will display the mobile version of the shopping cart.

Alternatively, use the LAYOUT_TYPE=MOBILE to have the mobile version of the Avangate shopping cart displayed even when using a desktop browser. In this scenario, consider modifying the width of the browser window to mimic the screen of a mobile device.