Merchant Setup

The Merchant Setup component allows merchants to connect and configure their preferred payment processor and configure what payment options are available at checkout. It is delivered as an iFrame designed to exist within the platform's admin portal for the merchant, eg under a "Configure Payments" menu option.

Integration Style

Shuttle offers two distinct integration styles to accommodate different platforms looking for a full-stack payment solution (Powered by Shuttle) vs platforms looking to simply add additional payment processors via an app store type interface on their platform (Enhanced by Shuttle). To use Shuttle in the app store mode, pass the processor parameter to the Merchant Setup component.

Powered by Shuttle

Using Shuttle as a full stack payment solution is the most powerful, allowing you to connect multiple different payment processes and compose them into a holistic checkout.

Enhanced by Shuttle

Using Shuttle within an app store model is possible (ie the merchant selects which payment processor they wish to use outside of Shuttle in some form of integration app store). In this scenario, you will have one payment processor per instance and composing multiple payment processes into a checkout becomes the responsibility of the software platform. This option is designed for platforms maintaining legacy integrations.

Tip! You can convert an app store model into a full stack payment solution through the omission of the processor parameter, however you cannot convert it back again unless no additional payment processors have been added (even if now archived)

Features

Legal T&Cs
- Shuttle encapsulates payment processors' T&Cs within its own
- Platforms can use Shuttle's T&Cs or incorporate them into their own
Payment Processor Configuration
- 30+ payment processors available via OAuth or API key
- Processor-specific settings (AVS, 3D Secure, etc.)
Fraud Tool Integration
- Support for third party fraud prevention with easy enablement
Checkout Customisation
- Toggle payment methods on/off, and which processor to use
- Configure advanced rules (e.g., limit payment methods by transaction amount)
Preview & Styling
- Live checkout preview with transaction status indicators
- Non-opinionated design with basic CSS customisation (fonts, spacing, colors)

UX Design

Positioning Within Your App

The Merchant Setup component is designed to be presented within your merchant admin screens, inline as such

You can adjust key CSS elements such as font, text-size and colors to make it feel more natural within your app.

While we've tried to make the UX feel natural in any environment, if it is too different, we suggest presenting it in a modal dialog, such as:

A Javascript message of type SETUP_DISPLAY will be raised every page render with the vertical height of the component so you can adjust your page if required, this also includes a modal flag to indicate if a modal dialog is being presented should you want to obscure your page.

What the merchant sees

The screens themselves are documented in the Merchant Setup user guide, one page per screen, with the controls and what each one does. Read those when you need to know what a merchant will be looking at, or when you are writing your own help material for them.

Screen	What the merchant does there	Guide
Terms and conditions	Accepts Shuttle's T&Cs on first use, unless you have incorporated them into your own	Accepting the terms
Your integrations	Sees every connected processor, which payment methods route to each, and adds another	Your integrations
Adding a processor	Picks a processor, filtered to those that onboard merchants in their country	Adding a payment processor
Entering connection details	Completes an OAuth login in a popup, or enters API keys inline with the processor's connection instructions	Entering connection details
Managing a connection	Changes a processor's settings, sees how many saved cards it holds, disconnects it	Managing a connection
Payment method rules	Disables a payment method for a currency, or above or below an amount	Payment method amount rules

What each of those controls is allowed to do, and what the API would allow that the screen does not, is in Business Rules.

Two things worth knowing before you embed

Terms and conditions. Shuttle's T&Cs cover Shuttle's own requirements and any additional terms the payment processors require. You can incorporate them into your own terms, or let Shuttle prompt the merchant to accept them on first use. This is a choice you make per application, not per merchant — see Customisations below.

Multiple processors are normal. A merchant connects more than one processor for two reasons: they are switching, and want new transactions on the new connection while the old one still holds saved cards and can refund old transactions; or they are routing different payment methods to different processors. A processor with no payment methods routed to it is still doing work if it holds saved cards, and the connection screen shows how many.

App Store Mode

When you pass the processor parameter to the Merchant Setup component (eg `"processor": "STRIPE"), you will be presented with a single processor configuration screen, this is the app store mode.

In this mode, the user will be prompted to connect a payment processor, and then be able to configure it. This is the mode you would use if you are looking to add a payment processor to your platform via an app store interface.

Configuring it

Merchant Setup is not one fixed experience. Which processors a merchant may choose from, whether they see Shuttle's terms or yours, and whether they get the checkout customisation and preview sections at all are yours to set — as defaults on your application, or per deep link.

The one that changes the shape of the integration rather than the screen is processor: passing it puts the instance into app store mode, as above.

See Merchant Setup Options for the full list.