LogoLogo
Explore with DeepWikiJoin Slack CommunityContact Us
  • About Hyperswitch
    • Exploration Guide
    • Overview
    • Payments Suite
    • Payments Modules
      • Cost Observability
      • Revenue Recovery
      • Vault
        • Server to Server Vault tokenization
        • Vault SDK Integration
        • Hyperswitch Vault: Pass Through Proxy Payments
      • Intelligent Routing
      • Reconciliation
        • Getting Started with Recon
      • Alternate Payment Method Widgets
        • Hyperwidget Integration Guide
    • Roadmap - Q2 2025
      • Previous Roadmap - Q1 2025
      • Previous Roadmap - Q4 2024
      • Previous Roadmap - Q3 2024
      • Previous Roadmap - Q2 2024
      • Previous roadmap - Q1 2024
      • Previous roadmap - Q4 2023
  • Use-Cases
    • For SaaS Businesses
    • For B2B SaaS Businesses
    • For E-Commerce Businesses
    • For Marketplace/Platforms
  • Explore Hyperswitch
    • Payment Orchestration
      • Accept Payments
        • Connectors
          • Activate Connector on Hyperswitch
          • Try a Payment
          • Available Connectors
            • ACI
            • Adyen
            • Airwallex
            • Authorizedotnet
            • Bambora
            • Bank of America
            • Billwerk
            • Bluesnap
            • Braintree
            • Checkout
            • Coinbase
            • Cybersource
              • Apple Pay
              • Google Pay
            • dLocal
            • Fiserv
            • GlobalPayments
            • GoCardless
            • Klarna
            • Mollie
            • MultiSafepay
            • Nuvei
            • OpenNode
            • Paypal
            • PayU
            • Prophetpay
            • Rapyd
            • Shift4
            • Stripe
            • TrustPay
            • Volt
            • Worldline
            • Worldpay
            • Zen
            • Netcetera
              • Authenticating Payments via Netcetera Through HyperSwitch SDK
        • Setup Payment Methods
          • Cards
          • Wallets
            • Apple Pay
              • Web Domain
              • iOS Application
            • Google Pay
            • PayPal
          • Pay Later
          • Banks
            • Bank Debits
            • Bank Redirects
            • Bank Transfers
            • Open Banking
          • Crypto
          • Test Credentials
        • Payment Links
          • Configurations
          • Create Payment Links
          • Secure Payment Links
          • Setup Custom Domain
        • Save a Payment Method
        • Manual Capture
        • Incremental Authorization
        • Tokenization & Card Vault
          • Network Tokenisation
        • Supported Payment Workflows
        • Co-badged Cards
        • Webhooks
      • Process Payouts
        • Getting Started with Payouts
        • Using Saved Payment Methods
        • Smart Router for Payouts
        • Smart Retries in Payout
        • Payout Links
      • Smart Routing
        • Rule Based Routing
        • Volume Based Routing
        • Default Fallback Routing
      • Smart Retries
        • 3DS Step-up Retries
      • 3DS / Strong Customer Authentication
        • Setting up 3DS Decision Manager
        • Native 3DS Authentication
        • External Authentication for 3DS
      • Fraud & Risk Management
        • Activating FRM in Hyperswitch
        • Fraud Blocklist
      • Subscriptions
        • PG Agnostic Card Forwarding
        • Zero Amount Authorization
      • Split Payments
        • Stripe Split Payments
        • Adyen Split Payments
        • Xendit Split Payments
    • Checkout Experience
      • Customizable and Native Integrations
        • Web
          • Node And React
          • Customization
          • Error Codes
          • Node and HTML
          • Vanilla JS and REST API Integration
        • Android
          • Kotlin with Node Backend
          • Customization
          • Features
        • iOS
          • Swift with Node Backend
          • Customization
          • Features
        • React Native
          • React Native with Node Backend
          • Card Widget
          • Customization
        • Flutter
          • Flutter with Node Backend
          • Customization
        • Headless SDK
        • Server Setup
      • Click To Pay
        • Visa Click to Pay: V1 to V2 Migration
      • Payment Methods Management
    • Payment Operations
      • Managing Accounts and Profiles
        • ⚙️Control Centre Account setup
        • Hyperswitch Account Structure
      • Manage Your Team
      • Analytics & operations
        • Exporting payments data
      • Disputes / Chargebacks
      • Surcharge
        • Surcharge Setup guide
      • Multi-Tenancy
      • Data migration
        • Import data to Hyperswitch
        • Export data from Hyperswitch
    • Security and Compliance
      • PCI Compliance
      • Data Security
      • GDPR compliance
      • Identity and Access Management
    • E-commerce Platform Plugins by Hyperswitch
      • 🔌WooCommerce Plugin
        • Setup
        • Roadmap
        • Compatibility
        • FAQs
      • Saleor App
        • Setup
      • Automatic Tax calculation for Express Checkout wallets
  • Hyperswitch open source
    • Overview
      • Run Hyperswitch Locally Using Docker
        • Run Additional Services
      • Development Environment Setup
        • Backend
          • Configure and Run the Application
          • Try out APIs
        • SDK (Frontend)
        • Control Center
    • Deploy on AWS
      • Deploy on AWS using CloudFormation
      • Component-wise Deployment
        • Deploy app server
        • Deploy Control Center
        • Deploy web client
          • Production ready deployment
          • Integrate web client on your web app
          • Playground deployment for prototyping (optional)
        • Deploy Card Vault
          • Production ready deployment on AWS
          • Cloud setup guide
    • Deploy on Kubernetes
      • Deploy on GCP Using Helm Charts
      • Deploy on Azure Using Helm Charts
    • Account setup
      • Using Hyperswitch Control Center
      • Test a payment
      • Using postman
    • Troubleshooting
  • Testing Payments
  • Check list for Production
    • Going live
      • For SaaS Setup
      • For On-Prem Setup
        • Monitoring
        • PCI compliance
          • Get started
          • Completing the SAQ
        • Data Security
        • Updates
  • Learn more
    • API Reference
    • Connectors Supported
    • SDK Reference
      • React
      • JS
      • Custom Events
    • Hyperswitch architecture
      • Router
      • Storage
      • A Payments Switch with virtually zero overhead
    • Payment flows
    • Blog
  • Community Guidelines
Powered by GitBook

Compliance

  • Vulnerability Disclosure
  • PCI DSS 4.0
  • ISO 27001:2022

Community

  • Slack
  • Discord
  • GitHub Discussion
On this page
  • Colors
  • Configuration and Appearance
  • Custom Placeholders And Branding
  • Shadow
  • Shapes
  • Languages
  • Next step:

Was this helpful?

  1. Explore Hyperswitch
  2. Checkout Experience
  3. Customizable and Native Integrations
  4. Flutter

Customization

Visual customization: Colors, shapes, specific UI components

You can customize the Flutter Unified Checkout to supports visual customization, which allows you to match the design of your app

You can modify colors, fonts, and more by using the instance of appearance class.

Colors

Customize the colors in the mobile Payment Element by modifying the color categories. Each color category determines the color of one or more components in the UI. For example, primary defines the color of the Pay button

Color Category
Usage

primary

Primary defines the color of the Pay button and selected items

background

The color used for the background of your Payment page

componentBackground

The color used for the background of inputs, tabs, and other components

componentBorder

The color used for the external border of inputs, tabs, and other components in your PaymentSheet

componentDivider

The color used for the internal border (meaning the border is shared with another component) of inputs, tabs, and other components in your PaymentSheet

primaryText

The color of the header text in your Payment page

secondaryText

The color of the label text of input fields

componentText

The color of the input text in your PaymentSheet components, such as the user's card number or zip code

placeholderText

The color of the placeholder text of input fields

icon

The color used for icons in your Payment Sheet, such as the close (x) button

error

The color used to indicate errors or destructive actions in your Payment Sheet

For using custom colors for SDK, you should create an instance of ColorsObject class by passing the above attributes to its constructor. Now, you have to create an instance of DynamicColors class by invoking its constructor and passing the object of ColorsObject class created earlier. Finally, you have to create an instance of Appearance class by passing the object of DynamicColors class.

Consider the below code for your reference.

ColorsObject colorsObject = ColorsObject(
     primary: '#F8F8F2',
      background: '#00FF00',
      componentBackground: '#E6DB74',
      componentBorder: '#FD971F',
      componentDivider: '#FD971F',
      primaryText: '#F8F8F2',
      secondaryText: '#75715E',
      componentText: '#AE81FF',
      placeholderText: '#E69F66',
      icon: '#F92672',
      error: '#F92672'
    );

    DynamicColors colors =
        DynamicColors(light: colorsObject);
    PrimaryButton primaryButton = PrimaryButton(colors: colors);

    Appearance appearance = Appearance(
      colors: colors,
      primaryButton: primaryButton,
    );

Configuration and Appearance

Now, create an instance of Configuration class by invoking its constructor and passing the object of Appearance class created above. Then, you have to create an instance of PaymentSheetParams class by invoking its constructor and passing the object of Configuration class created earlier.

Consider the below code for your reference.

  Configuration configuration= Configuration(appearance: appearance)
  configuration.displaySavedPaymentMethods: true,
  configuration.displaySavedPaymentMethodsCheckbox: true,
 
  PaymentSheetParams params = PaymentSheetParams(
      publishableKey: "YOUR_PUBLISHABLE_KEY",
      clientSecret: clientSecret,
      configuration: configuration,
    );

Set displaySavedPaymentMethods to false to disable saved cards.

Set displaySavedPaymentMethodsCheckbox to false to stop your users from saving their payment methods. Set disableBranding to false to disable Hyperswitch branding. Set primaryButtonLabel to "Pay Button Text" to display custom text Set paymentSheetHeaderLabel to "Heading Text" to display custom heading

Custom Placeholders And Branding

To set custom placeholder text for card number, expiry date or cvv input fields, you may set the placeholder property for these as shown below.

configuration.placeholder.cardNumber = "YOUR_CUSTOM_CARD_NUMBER_PLACEHOLDER"
configuration.placeholder.expiryDate = "YOUR_CUSTOM_EXPIRY_DATE_PLACEHOLDER"
configuration.placeholder.cvv = "YOUR_CUSTOM_CVV_PLACEHOLDER"

To disable Hyperswitch branding in the SDK, you may set the disableBranding property to true

configuration.disableBranding = true

Note To support dark mode, pass objects of ColorsObject class for both light and dark colors to constructor of DynamicColors class like below.

ColorsObject lightColorsObject = ColorsObject(
     primary: '#F8F8F2',
      background: '#00FF00',
      componentBackground: '#E6DB74',
      componentBorder: '#FD971F',
      componentDivider: '#FD971F',
      primaryText: '#F8F8F2',
      secondaryText: '#75715E',
      componentText: '#AE81FF',
      placeholderText: '#E69F66',
      icon: '#F92672',
      error: '#F92672'
    );
    
 ColorsObject darkColorsObject = ColorsObject(
      primary: '#00ff0099',
      background: '#ff0000',
      componentBackground: '#ff0080',
      componentBorder: '#62ff08',
      componentDivider: '#d6de00',
      primaryText: '#5181fc',
      secondaryText: '#ff7b00',
      componentText: '#00ffff',
      placeholderText: '#00ffff',
      icon: '#f0f0f0',
      error: '#0f0f0f',
    );

DynamicColors colors = DynamicColors(light: lightColorsObject,dark: darkColorsObject);

Shadow

You can customize the border radius, border width, and shadow used throughout the mobile Payment Element. Using an Object of inbuilt class Shapes.

Shape Category
Usage

color

shadow color of components of the payment page

intensity

shadow intensity across input fields, tabs and other components

Shadow shadow = Shadow(color:10.0, intensity: 10.0);

Shapes

You can customize the border radius, border width, and shadow used throughout the mobile Payment Element. Using an Object of inbuilt class Shapes.

Shape Category
Usage

borderRadius

radius of the border of the input fields, tabs and other components of the payment page

borderWidth

width of the border used to across input fields, tabs and other components

shadow

add Shadow to components

Shapes shapes = Shapes(borderRadius:10.0, borderWidth: 10.0, shadow: shadow);

Now you can test the payments on your app and go-live!

Languages

Hyperswitch Flutter SDK supports localization in 6 languages. The default locale is English (en). To override, you can send locale in the appearance object. You may refer the below code for your reference.

Appearance appearance = Appearance(
     ...
      locale: 'LOCALE_CODE'
    );

We support the following locales -

  • Arabic (ar)

  • Hebrew (he)

  • German (de)

  • English (en)

  • English (en-GB )

  • Japanese (ja)

  • French (fr)

  • French (Belgium) (fr-BE)

  • Spanish (es)

  • Catalan (ca)

  • Portuguese (pt)

  • Italian (it)

  • Polish (pl)

  • German (de)

  • Dutch (nl)

  • Dutch (Belgium) (nl-BE)

  • Swedish (sv)

  • Russian (ru)

  • Lithuanian (lt)

  • Czech (cs)

  • Slovak (sk)

  • Icelandic (is)

  • Welsh (cy)

  • Greek (el)

  • Estonian (et)

  • Arabic (ar)

  • Finnish (fi)

  • Norwegian (nb)

  • Bosnian (bs)

  • Danish (da)

  • Malay (ms)

  • Turkish (tr-CY)

Next step:

Last updated 1 year ago

Was this helpful?

Finally, you can pass the object of PaymentSheetParams to initPaymentSheet as shown in the previous .

Setup Payment Methods
section