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 in a new tab

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 embedded in your application

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.

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

<iframe src="{checkout_url}" 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).

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 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.