Customers have come to expect convenience, simplicity, and speed when completing activities online. This expectation is especially true when shopping and completing purchases on a mobile device.

With cart abandonment rates for mobile devices topping 85% last year, and the average across device types at over 77%, merchants have an opportunity to increase revenue by offering the best mobile checkout experience possible. Businesses must scrutinize their mobile flow to ensure that they are maximizing revenue and reducing cart abandonment. This is especially important for subscription commerce where a merchant doesn't just lose a single sale, they lose an entire stream of revenue from future subscription renewals.

Recurly is focused on providing the best tools to create a frictionless checkout experience, with the mobile user top of mind. The Recurly.js enhancements listed below will allow subscription businesses to build a seamless flow, simply and elegantly.  

#1: Card Hosted Fields to collect credit card information

Recurly.js provides the ability for merchants to use Recurly’s card hosted fields to securely collect credit card information from subscribers. With the available level of customization, merchants can optimize the checkout flow across devices to reduce cart abandonment.

Recurly offers two separate ways to collect card information: merchants can use four separate iFrame fields, or they can use Recurly’s new single iFrame field. The single Card Hosted Field iFrame is fully customizable and responsive and is a fast and simple integration. Most importantly, both options maintain PCI DSS SAQ A compliance.

#2: Take a photo of credit card to populate credit card fields

Allowing the user take a photo of their card with their smartphone saves the subscriber from having to manually input their credit card info and reduces the likelihood that they make a mistake entering the credit card information. This functionality reads all the pertinent information and then populates each related field. (Note: Only Safari browsers support this functionality, so it’s only available on iPhones and iPads.)

#3: Dropdowns for expiration-date fields on mobile devices

Checkout forms on mobile devices should include drop-down fields for expiration dates, similar to date and other numerical fields in native smartphone apps. These dropdowns are easier to use and result in fewer data input errors as the user no longer has to manually type data into each field.

#4: Tabbing between hosted fields and other page elements

Many merchants have complex checkout pages, which include hosted fields, merchant fields, and merchant page elements such as logos or tooltips. On these pages, the ability to tab into, between, and out of Recurly.js hosted fields can be challenging to achieve due to the secure nature of hosted fields. Recurly has resolved this pain point, enabling merchants to configure tabbing with Recurly’s hosted fields and other checkout elements. By solving this, Recurly.js allows merchants to ensure their checkout flow is as frictionless as possible

#5: External form fills for credit card autofill

Allow apps and extensions such as LastPass, Google’s Chrome browser, and iCloud Keychain to pull in credit card information and automatically populate it (except for CVV) if the user has previously stored it in an external source. This allows the user to quickly complete the payment method portion of the checkout flow, with accurate data, whether on a mobile device or desktop computer.

By providing subscribers with an easier, frictionless checkout experience, they are more likely to complete their purchase. They are happier, more efficient, and the business adds another subscriber they might otherwise have lost due to frustrations with a clunky, inefficient process.

To learn more, visit our Recurly.js documentation.