Your design in the sheet

The sheet draws the design you published in Checkout Studio: colours, corners, fonts, button style and the order of payment methods, the same design your hosted pages and Watenga.js use.

From Checkout Studio

Nothing to do in code: when the sheet opens it reads the published design as checkout_native_appearance tokens. Publish a change in Checkout Studio and every app shows it on the next payment, with no release.

A design of its own

To give one screen its own look, export the appearance from the developer console's Checkout Builder and pass it as appearance, or set only the main colour with theme. Every colour pair is checked for readable contrast.

await initPaymentSheet({
  clientSecret: session.client_secret,
  amount: 25.0,
  currency: 'USD',
  reference: 'ORD-1001',
  theme: { primaryColor: '#1A3A6C' },
  // appearance: exportedAppearance, // from the Checkout Builder
  presentationStyle: 'modal', // or 'fullscreen'
  branding: true,             // false hides "Secured by Watenga"
});

Methods, wallets and currencies

The sheet offers what the server says your business accepts in the customer's market: card brands, the market's mobile wallets and their phone format, Zimswitch, and your currencies. Limit them with tabs (for example ['card', 'mobile_wallet']); nothing is hard-coded in the app.