Exploring UI/UX Styles

Connect API supports 3 different UI/UX styles for your webstore. The Connect simulator supports these 3 styles plus 1 additional 'debug' style just for testing.

Use the simulator to explore the different styles and find the one that is best for your needs. You can switch between styles in the simulator settings (see below).

UI/UX Styles

1. Classic: a plain version of the payment form, designed to fit smaller screen sizes.
2. Mobile: a responsive form, all centre-aligned. Form input fields have rounded corners. Best suited for handheld mobile devices.
3. Combined: a fully responsive page built to fit both desktop and mobile devices. It can only can be used if transactions payment mode is set to "payonly". The Combined style is not supported in “payplus” or “fullpay” payment modes.
4. Developer: almost no UI styling. Available to use only in the simulator evironment. Useful for debugging and testing the raw transaction parameters before you switch on one of the styled modes. "Developer" is the default mode on the Connect simulator.

Switching Styles

It’s super easy to switch between styles in the Developer Playground:

1. Go to the “Settings” tab on the Connect simulator
2. Go to the “Redirect Mode” section
3. Select the mode you want (default setting is "Developer mode")
4. Save the changes.
5. Then try another transaction.