Embedded Flow

Mobile & E-Commerce / Sample UX Flows

Right now, this user flow is only available for users of the LevelUp Enterprise SDK, or partners integrating with a LevelUp client who is leveraging the Enterprise SDK. If you’re interested, please email support@thelevelup.com.

You can embed your e-commerce or online ordering mobile experience into an app running the LevelUp SDK to create a seamless log-in/checkout experience. This experience is extremely compelling for the user:

  • Open the app running the LevelUp SDK
  • Press the tab that brings them to the in-app commerce section
  • This section loads up your mobile-optimized e-commerce experience in an emdedded web-browser and passes along a limited use access_token to auto log in the user and provide you with the ability to charge them for that order. We pass that access token as a URL parameter in the format: https://www.yourbaseurl.com?token=access_token (must be https)
  • The user creates their cart and proceeds to checkout like normal
  • The user simply hits “Pay with LevelUp” and you hit the Create Orders endpoint with the access token securely syndicated to your mobile commerce site within the app

Best Practices:

When using the embedded login flow, there are several best practices we recommend to avoid user confusion:

  • Only One Account Of Record: While your service may also be maintaining an account for the user also, since the user is auto-logging-in with LevelUp, this second account should not be exposed to the user. For example, the user should not be able to manage their profile or log in / log out from the embedded e-commerce flow. Those controls will be handled within the main app running LevelUp SDK. So please do not include links to “My Account” or “Manage Profile” or “Log Out” or even “Order History” as all those will be shown/managed within the core applications running the LevelUp SDK.
  • Pre-Fill Information: If your integration requires user information (such as first name, last name, email, shipping address etc…) do your best to pull that information dynamically from the LevelUp API once the user is authenticated. This will make the experience feel more seamless and also simplify user checkout.
  • Use Responsive Design: Remember that the user will be using your application within an embedded webview running in a LevelUp powered app. Make sure that your UX is designed to be responsive to smaller screens sizes and that all buttons and text entry fields are sized appropriately for the smaller screen real estate.
  • Branding Guidelines: If your integrated experience is intended to be embedded into a “White-Label” application, you should expect that the LevelUp-branding throughout the app will be lightweight. The user may view their account not as a LevelUp account, but as a Merchant-Branded account, powered by LevelUp. This will be clear to the user because, after all, they started the flow by being logged into that specific application already. Given this, if you’re leveraging the embedded login flow, avoid phrases like “Pay with LevelUp” and simply go with “Pay” or “Checkout”. Somewhere in the application, either at the bottom of the screen or where you include attributions, you should include “Payments powered by LevelUp” with a link to TheLevelUp.com.