Pre-filling user information

Overview

You can pre-fill user information and order amounts using the defaultValues property to enhance the user experience. For each field (except fiatAmount), you can specify whether it should be editable or locked, giving you control over which information users can modify.

Available fields

User information fields

phone: User's phone number
email: User's email address
targetAddress: Cryptocurrency wallet address where funds will be sent

Order information fields

fiatAmount: Default fiat amount for the purchase (number only, always editable)

Field configuration

Each user information field supports the following configuration:

type DefaultValue = {
  value: string;     // The default value to display
  editable: boolean; // Whether users can modify this value
};

Example usage

Complete configuration

const defaultValues = {
  phone: {
    value: "19998885522",
    editable: false, // User cannot change this phone number
  },
  email: {
    value: "user@example.com",
    editable: true, // User can modify this email
  },
  targetAddress: {
    value: "0x4E549404D2F883cA6c94135B7144b28Eb9B1CEA5",
    editable: false, // User cannot change the target address
  },
  fiatAmount: 200, // Default to $200
};
 
const widget = new SwipeluxWidget({
  apiKey: "YOUR_PUBLISHABLE_API_KEY",
  defaultValues: defaultValues,
});

Locked target address

When you want to ensure funds are sent to a specific address:

const widget = new SwipeluxWidget({
  apiKey: "YOUR_PUBLISHABLE_API_KEY",
  defaultValues: {
    targetAddress: {
      value: "0x4E549404D2F883cA6c94135B7144b28Eb9B1CEA5",
      editable: false
    }
  },
});

Pre-filled but editable information

When you have user information but want to allow modifications:

const widget = new SwipeluxWidget({
  apiKey: "YOUR_PUBLISHABLE_API_KEY",
  defaultValues: {
    email: {
      value: "user@example.com",
      editable: true
    },
    fiatAmount: 100
  },
});

Type definitions

export type DefaultValue = {
  value: string;
  editable: boolean;
};
 
export type DefaultValues = {
  targetAddress?: DefaultValue;
  phone?: DefaultValue;
  email?: DefaultValue;
  fiatAmount?: number;
};

On this page