Checkout UI Approaches

UX Approaches

There are two UX approaches available for directing the customer to the Banxa checkout flow. The choice between the two will largely depend on the experience that you want to build.

1. Redirect to Banxa Site

This approach will redirect the customer to the Banxa site to complete their order. The customer’s order page will be pre-filled with the order details that have been passed through to Banxa via the API. It is recommended that you pass as many parameters as possible, as this will streamline the order experience and improve conversion.

2. Widget / iFrame (Beta)

By implementing a widget, you are hosting the Banxa site in an iFrame and allowing the customer to complete the checkout process within this iFrame. The choice between embedding an iFrame as opposed to a redirect will depend on the user experience you want to build. This is done by creating a location for the iFrame to be hosted and using the checkout_iframe that is returned in the Create Order response. Note, this will only be returned if you send the iframe_domain in the request body.

The iframe should be loaded within a modal div and below is the recommended iframe format:

<iframe src="{checkout_iframe}" style="border:0; width: 100%; min-height: 80vh;"></iframe>

Pros to this approach

• A more integrated experience for your customers. In most cases, the customer will stay on your site for the entirety of their checkout experience (see below for details).
• We are able to offer minimal cosmetic changes to display your logo and apply your primary color in order to maintain your brand’s look and feel

Cons to this approach

• If the customer’s browser does not support 3rd party cookies, e.g. Safari, the widget will force a redirect. Cookies allow the Order to maintain its state, and if this cannot be saved, then the customer will be redirected to the Banxa site to complete their order.

Redirect Scenarios

The Widget will force a redirect to the Banxa site in the following scenarios:

• If the customer needs to complete KYC. Due to the potential restrictions of accessing the camera from an iFrame, if the customer requires KYC then they will be redirected to the Banxa site to complete their order. Note that when the customer makes their next order it will all be done from the widget.
• If the customer uses an incompatible payment method. For security reasons, some payment methods such as POLi, ApplePay and iDEAL do not work within iFrames and therefore we need to redirect the customer in order to have them log into their bank. They will then be redirected to the order status page on our site where they can then redirect back to the partner site.