LogoLogo
  • OKP APIs
  • Getting Started with OKP
  • API Documentation
    • Deposits API
      • Technical and Security Aspects
        • Calculating the Signature
      • Endpoints
        • Deposit Creation Endpoint
          • Notifications
        • Transactional Account Endpoint
          • Understanding the Solution
        • PCI Deposit Creation Endpoint
        • Deposit Status Endpoint
        • Payment Methods Endpoint
        • Currency Exchange Endpoint
        • Crypto Exchange Endpoint
        • Country States Codes Endpoint
        • Refund Creation Endpoint
          • Notifications
        • Refund Status Endpoint
      • Payment Methods
        • 🌎America
          • 🇧🇷Brazil
            • PIX Biometric
      • API Codes
    • Cashouts API
      • Technical and Security Aspects
        • Calculating the Payload-Signature
      • Endpoints
        • Cashout Creation Endpoint
          • Notifications
        • Cashout Status Endpoint
        • Cashout Update Status Endpoint
        • Cashout Cancellation Endpoint
        • Cashout Bank Codes
      • Countries Validations
        • American Countries
          • 🇧🇷Brazil
      • API Codes
    • Subscriptions API
      • Technical and Security Aspects
        • Calculating the Signature
      • Subscription Creation Endpoints
        • OneShot Subscription Creation
        • PCI Subscription Creation Endpoint
        • Notifications
      • Subscription Cancellation Endpoint
      • Subscription Status Endpoint
    • Quickpay
      • Endpoints
        • Deposit creation endpoint
          • Notifications
        • Deposit status endpoint
    • Bank Account Validation
      • Technical and Security Aspects
        • Calculating the Signature
      • Endpoints
        • Bank Account Validation Endpoint
          • Pix Key Validation and Details Endpoint
      • API Codes
    • KYC API
      • Technical and Security Aspects
        • Calculating the Signature
      • KYC Endpoint
      • API Codes
  • Deposits Tools
    • Cards SDK
      • With User Interface
        • 🚀Color Customization
      • Without User Interface
    • Java SDK
    • PHP SDK
  • Knowledge Base
    • Deposits with Cards SDK
      • With User Interface
      • Without User Interface
    • Countries Specifications
  • PLUGINS
    • WooCommerce
      • Installation
      • Configuration
  • Status Page
Powered by GitBook
On this page
  • colorSchema[] object
  • Visual references
  1. Deposits Tools
  2. Cards SDK
  3. With User Interface

Color Customization

Elevate your user experience with our advanced color customization feature. We provide a bespoke version of the theme to perfectly match the unique style of your websited's UI.

To fine-tune the colors, simply add a colorSchema[] object as illustrated in the example.

You don't need to send the entire object, you can include the sections you would like to change.

colorSchema[] object

 colorSchema = {
  //primary button is to complete the action like "Complete payment" and "Continue"
  "button": {
    "primary": {
      "background": {
        "default": "#3C5BFC",
        "hover": "#7087FF",
        "active": "#2E47C9"
      },
      "text": {
        "color": {
          "default": "#FFFFFF"
        }
      }
    },
    //this is the link button like "go back"
    "tertiary": {
      "text": {
        "color": {
          "default": "#3C5BFC"
        }
      }
    }
  },
  //This affect the inputs and select
  "input": {
    "background": {
      "default": "#FFFFFF",
      "locked": "#E6E7EB"
    },
    "border": {
      "color": {
        "default": "#373840",
        "locked": "#D5D6DE",
        "active": "#3C5BFC",
        "error": "#CF3434"
      }
    },
    "text": {
      "color": {
        "label": "#B0B3BF",
        "input": "#0B1130",
        "placeholderHint": "#B0B3BF"
      }
    }
  },
  //This affects the text that is not related to the inputs.
  "text": {
    "color": "#373840"
  },
  //This is the background color of the label on the input and select when add some value
  "label": {
    "background": "#FFFFFF"
  }
};

Visual references

In the images below you will find the visual references of the colorSchema parameters and color customization possibilities.

PreviousWith User InterfaceNextWithout User Interface

Last updated 11 months ago

🚀