Rails/Our OnRamp/Client-side Integration/Widget customization

Widget appearance

Customize the visual appearance of the onramp widget

Colors

Customize the widget's appearance by modifying color values. All colors are optional and support the following formats:

HEX (e.g., #F24F21)
RGB (e.g., rgb(213 47 47))
HSL (e.g., hsl(0deg 0% 0%))

Supported color keys and their default values

const colors = {
  main: "#000000",        // Primary UI elements
  background: "#FFFFFF",  // Widget background
  processing: "#FFA400",  // Processing state
  warning: "#ED0A34",     // Warning messages
  success: "#58CB4E",     // Success states
  link: "#F24F21",        // Interactive links
};

Example usage

const widget = new SwipeluxWidget({
  apiKey: "YOUR_PUBLISHABLE_API_KEY",
  colors: {
    main: "#000000",
    background: "#FFFFFF",
  },
});

Color types

export type Color =
  | `rgb(${number}, ${number}, ${number})`
  | `rgba(${number}, ${number}, ${number}, ${number})`
  | `hsl(${string})`
  | `#${string}`;
 
export type ThemeColors = {
  main: Color;
  background: Color;
  processing: Color;
  warning: Color;
  success: Color;
  link: Color;
};

Widget customization

Complete guide to customizing the Swipelux onramp widget

Widget branding

Customize branding and signature elements of the onramp widget