Skip to main content
Everything on the phone below is drawn from the SDK’s own layout constants, artwork, copy and colour rules, so what you brand here is what a cardholder sees. Pick a screen, play the whole flow, tap a card, and change the brand, the sale or the outcome while you watch.

​
What the simulator reproduces

  • The screens. Preparing, tap, processing, PIN, approved, declined, failed and cancelled, with the SDK’s dimensions, fonts, contactless artwork, acceptance marks and the copy in Brazilian Portuguese and English.
  • The colour rules. primaryColor, headerTextColor, iconColor and backgroundType are applied exactly as CheckoutConfig applies them, including the header text switching to dark ink on the TRANSPARENT wash and the fixed green and red of the outcomes.
  • The certified PIN pad. Its layout is the PIN provider’s own and is fixed by PCI rules. Only the nav bar colour and text, the entered-digit dots and the progress bar follow your brand. SHIFTED and SHUFFLED behave as they do on a device.
  • The retry rules. A decline never offers a retry with the same card; a technical fault offers Try again only when ErrorCatalog[code].retriable is true, code by code as listed in Results and errors.
  • The sandbox rules. The outcome follows the last two digits of the amount you set in the Sale section, the way the sandbox decides it: 51, 05, 54 and 14 decline, 96 fails. Any other amount approves unless you pick another outcome in the Scenario section.
The approval sound and haptics, the exact timing of each step and the card reader’s own guidance depend on the device and the card. The PIN pad shown here is drawn from screenshots of the certified pad, which covers the whole screen on a device.

​
Share a configuration

The link in the Copy link button carries the brand, the sale, the language and the scenario in the URL. Send it to a designer or a colleague and they open the simulator in the same state. Nothing is stored anywhere else.

​
Use the code panel

The Kotlin panel is the CheckoutConfig and CheckoutRequest that produce the screens you are looking at, with the result handler your app registers. Defaults are left out, so a brand that only sets a merchant name gets a one-line config. When you set the tap headline or supporting line, a second tab shows the same two lines as string resources, for teams that prefer to translate them per locale. After you tap Done on an outcome, the panel shows the PaymentResult your callback receives for that outcome.

​
Next steps

Customization

Every CheckoutConfig field, what you cannot change, and how to override the copy.

Results and errors

What your app receives after a checkout, and what each error code means.