Designing a Payment Flow

Creating modular and flexible systems

Overview:
With the release of https://js.recurly.com/ new sample forms were needed for the documentation. The goal was to supply our users with a set of templates that were modular, systematic, and flexible. We wanted to encourage the usage of branded checkout flows but reduce the amount of time spent on developing them.


You can test the live samples here

Kale Krate is a sample subscription business created to illustrate the capabilities of a minimal checkout form. We’ve designed the form to reduce a lot of pain points that are commonly seen with checkout flows. For instance in this form, we are able to auto detect credit card types as the number is entered. This allows the user to instantly verify acceptable payment methods our platform allows. The initial goal was to create a smart checkout like this one:

https://www.youtube.com/embed/XUa5pfHdVwQ

Due to some technical limitations with processing payments, we weren’t able to implement this. However, sometimes too clever might not be the right solution for our users.


Desired Outcomes:

  1. Ability to have multiple plans, quantities, currencies
  2. Ability to include add on items
  3. Include advanced billing requirements

The advanced form is much more complex and can be directly embedded into a merchant’s site. With that in mind, allowing our users to brand their forms was not a crucial factor. The primary needs were to execute on the desired outcomes. We automated a lot of the form so when a customer manipulated any part of the form it would be reflected in the order summary area.

Anyone interested in some kale? :)

Be sure to check out the live version here.