Customization

Theme the payment sheet to match your app.

Theme

Pass a theme on the sheet config. primaryColor drives the pay button, the active-tab underline and accents; it also themes the in-WebView card widget.

await initPaymentSheet({
  amount: 25.0,
  currency: 'USD',
  reference: 'INV-001',
  theme: {
    primaryColor: '#2f2f2f',
  },
  // Optional: 'modal' (default) or 'fullscreen'
  presentationStyle: 'modal',
  // Optional: hide the "Secured by Watenga" footer
  branding: true,
});

Design tokens

The full set of checkout design tokens (colors, radii, spacing, typography) lives in @watenga/shared (design-tokens.ts) and is the single source of truth shared by the web widget and every mobile SDK.