Specific Settings

Overview

The Swipelux widget can be customized through various configuration options to match your application's needs. Below is the complete reference of available settings:

type ExternalID = string | () => string | () => Promise<string>;

type Settings = {
  apiKey: string;                // Required: Your API key for authentication
  closeOnSuccess?: boolean;      // Optional: Auto-close widget after successful transaction
  externalId?: ExternalID;       // Optional: Your system's order identifier
  availablePayCurrency?: string; // Optional: Preset payment currency
  availableReceiveCurrency?: string | { // Optional: Preset receive currency
    code: string,
    protocol?: string
  };
  orderToken?: string;           // Optional: Pre-created order token
  defaultValues?: DefaultValues; // Optional: Pre-filled user data
  colors?: {                     // Optional: UI customization
    main?: string;
    background?: string;
    processing?: string;
    warning?: string;
    success?: string;
    link?: string;
  }
};

Visual Customization

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%))

const defaultColors = {
  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 Implementation:

<script>
  const settings = {
    apiKey: "YOUR-API-KEY",
    colors: {
      main: "#fff",
      background: "#000",
    },
  };
  const specificSettingsParam = encodeURIComponent(JSON.stringify(settings));
  const url = `https://track.swipelux.com/?specificSettings=${specificSettingsParam}`;
  open(url);
</script>

Mapping your orders

External ID

Use externalId to correlate transactions with your system's order identifiers.

• Maximum length: 64 characters

Currency Settings

Payment Currency

Specify the fiat currency for payment:

const widget = new window.SwipeluxWidget(root, {
  apiKey: "YOUR-API-KEY",
  availablePayCurrency: "USD"
});

Receive Currency

Configure the cryptocurrency to receive:

// Simple configuration
const widget = new window.SwipeluxWidget(root, {
  apiKey: "YOUR-API-KEY",
  availableReceiveCurrency: "ETH"
});

// With protocol specification
const widget = new window.SwipeluxWidget(root, {
  apiKey: "YOUR-API-KEY",
  availableReceiveCurrency: {
    code: "USDT",
    protocol: "TRC20"
  }
});

User Experience

Default Values

Pre-fill user information and transaction amounts:

type DefaultValue = {
  value: string;
  editable: boolean;
};

type DefaultValues = {
  phone?: DefaultValue;    // User's phone number
  email?: DefaultValue;    // User's email
  fiatAmount?: number;     // Initial payment amount
};

Implementation Example:

const defaultValues = {
  phone: {
    value: "19998885522",
    editable: false,
  },
  email: {
    value: "test@gmail.com",
    editable: true,
  },
  fiatAmount: 200,
};

const root = document.getElementById("widget");
const widget = new window.SwipeluxWidget(root, {
  apiKey: "YOUR-API-KEY",
  defaultValues: defaultValues,
});

Best Practices

1. Always test configurations in sandbox environment first
2. Use dynamic externalId generation to prevent duplicates
3. Implement proper error handling for async operations
4. Keep API keys secure and never expose them in client-side code
5. Validate user input before passing to default values

For additional support or questions, contact our team at support@swipelux.com.