> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pesaswap.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Configurations

### Configure Payment Links UI

> **Note:** Payment Links can currently only be configured via APIs. Dashboard-based configuration is under development and this section will be updated once available.

***

### Available Configurations

#### UI Configurations

Payment Link UI can be configured at the **business profile level**, and this configuration is used when payment links are created under that profile.
You can also override this by providing UI configurations during individual payment link creation.

#### Sample Configuration:

```json theme={"system"}
{
  "theme": "String", // Primary color of the payment link
  "logo": "String", // Logo displayed in the details section
  "seller_name": "String", // Merchant's name in the details section
  "transaction_details": [PaymentLinkTransactionDetails], // Dynamic merchant-related details for the UI
  "background_image": PaymentLinkBackgroundImageConfig, // Background image config for the details section
  "details_layout": "api_enums::PaymentLinkDetailsLayout", // Layout configuration for the details section
  "sdk_layout": "String", // Layout for the payment widget
  "display_sdk_only": true, // Show only the payment widget
  "enabled_saved_payment_method": true, // Show option to save payment methods (secure links only)
  "hide_card_nickname_field": true, // Hide the card nickname input field
  "show_card_form_by_default": true, // Show card form by default
  "payment_button_text": "String" // Custom text for the Pay button
}
```

***

### UI Customization Options

#### Primary Color

The primary color of the payment link UI can be set using the theme field in the configuration. This color is represented as a hex value.

Example: `"#2167AE"`

Primary theme

#### Merchant Logo

You can display a custom logo in the details section of the payment links by providing a URL.

Example: `https://Pesaswap.io/favicon.ico`

Primary theme

#### Merchant Name

Customize the display name shown in the details section of the payment links.

Example: `"Pesaswap Inc."`

Custom seller name

#### Dynamic Details

Include a list of key-value pairs in the details section of payment links. This list can be customized with optional configurations for each entry.

<Info> Note: The list is displayed in the specified order. Use the position attribute to control the sequence of entries.</Info>

**Example:**

```json theme={"system"}
[
  { "key": "Business Country", "value": "Germany" },
  {
    "key": "Policy Number",
    "value": "938478327648",
    "ui_configuration": {
      "is_key_bold": false,
      "is_value_bold": false,
      "position": 2
    }
  },
  { "key": "Product Name", "value": "Life Insurance Elite" }
]
```

#### Background Image

Customize the background image of the details section.
**Example:**

```json theme={"system"}
{
  "url": "https://img.freepik.com/free-photo/abstract-blue-geometric-shapes-background_24972-1841.jpg",
  "position": "bottom",
  "size": "cover"
}
```

The url specifies the image source, while position and size define its placement and scaling.

For available options, refer to the API reference here.

Background image

#### Details Section Layout

Choose a layout for the details section of the payment links.

Default Layout

<img src="https://imgstorepesaswap.blob.core.windows.net/images/condiguration1.png" />

Layout 2

> Contact support for custom layout additions.

#### SDK Layout

Configure the layout for the payment widget using available SDK layouts.

Example: `"accordion"` or `"tabs"`

<img height="400" noZoom src="https://mintcdn.com/pesaswap/Ee45nIVuYpeGeoDW/logo/pesa78.png?fit=max&auto=format&n=Ee45nIVuYpeGeoDW&q=85&s=982b3589a01b9a6175402f345fdf6949" data-path="logo/pesa78.png" />

Accordion layout

#### Display Only the Payment Widget

Set a boolean value to render only the payment widget in the payment links. Defaults to false.

<img height="400" noZoom src="https://mintcdn.com/pesaswap/Ee45nIVuYpeGeoDW/logo/pesa79.png?fit=max&auto=format&n=Ee45nIVuYpeGeoDW&q=85&s=af23cc090ed8f136bcddef056d422736" data-path="logo/pesa79.png" />

Render only the payment widget

#### Enable Saved Payment Methods

Enable rendering of saved payment methods and allow customers to save new ones in the payment widget. This is available only for secure payment links.

<img height="400" noZoom src="https://mintcdn.com/pesaswap/Ee45nIVuYpeGeoDW/logo/pesa80.png?fit=max&auto=format&n=Ee45nIVuYpeGeoDW&q=85&s=c767b1e6a7e62a20b39abd131d613fad" data-path="logo/pesa80.png" />

Save payment method checkbox

<img height="400" noZoom src="https://mintcdn.com/pesaswap/Ee45nIVuYpeGeoDW/logo/pesa82.png?fit=max&auto=format&n=Ee45nIVuYpeGeoDW&q=85&s=33dd9be0d415da53bd9c4f701b2373a4" data-path="logo/pesa82.png" />

Saved payment methods

#### Hide Card Nickname Field

Set `hide_card_nickname_field: true` to remove the nickname input for saved cards.

<img height="400" noZoom src="https://mintcdn.com/pesaswap/Ee45nIVuYpeGeoDW/logo/pesa83.png?fit=max&auto=format&n=Ee45nIVuYpeGeoDW&q=85&s=f93ba2d50f9e0597232caf59f9cce931" data-path="logo/pesa83.png" />

Hidden card nickname field when card is requested to be saved

<img height="400" noZoom src="https://mintcdn.com/pesaswap/Ee45nIVuYpeGeoDW/logo/pesa84.png?fit=max&auto=format&n=Ee45nIVuYpeGeoDW&q=85&s=63b0e0cd0d60f6ad17f76e17b1479220" data-path="logo/pesa84.png" />

Visible card nickname field when card is requested to be saved

#### Show Card Form by Default

Set a boolean value to control the default form rendered in the payment widget. Enabling this shows the card payment form by default when a payment link is opened.

#### Payment Button Text

Customize the call-to-action button.
Example: `"Proceed to Payment!"`

<img height="400" noZoom src="https://mintcdn.com/pesaswap/Ee45nIVuYpeGeoDW/logo/pesa85.png?fit=max&auto=format&n=Ee45nIVuYpeGeoDW&q=85&s=72f3a63ace77c80a55e5475218137fa3" data-path="logo/pesa85.png" />

Custom text for payment widget's button

### Other Configurations (Business Profile Level Only)

```json theme={"system"}
{
  "domain_name": "String", // Custom domain for hosting links
  "business_specific_configs": { "style_id": PaymentLinkConfigRequest }, // Multiple UI styles
  "allowed_domains": ["domain1.com", "domain2.com"], // Domains where secure links can be embedded
  "branding_visibility": false // Show or hide Pesaswap branding
}
```

***

#### Domain Name

Set a custom domain for hosting payment links.

> Must be enabled before use. See docs on \[Custom Domain Setup].

#### Multiple Style IDs

Define multiple styles under a profile using style IDs.

**Example:**

```json theme={"system"}
{
  "style1": {
    "theme": "#3B845E",
    "logo": "https://Pesaswap.io/favicon.ico",
    "seller_name": "Pesaswap Inc.",
    "display_sdk_only": true
  },
  "style2": {
    "theme": "#B202FF",
    "logo": "https://i.pinimg.com/736x/4d/83/5c/4d835ca8aafbbb15f84d07d926fda473.jpg",
    "seller_name": "Shopping Store",
    "enabled_saved_payment_method": true
  }
}
```

Use the `payment_link_config_id` field when creating a payment link to apply a specific style.

#### Allowed Domains

List of trusted domains (used only for secure links) where payment links can be embedded in an iframe.
Example: `["localhost:5500", "my.custom.domain.com"]`

#### Branding Visibility

Control whether Pesaswap branding appears in the payment links.

<img height="400" noZoom src="https://mintcdn.com/pesaswap/vFjFgaswQK7WrKjo/logo/pesa86.png?fit=max&auto=format&n=vFjFgaswQK7WrKjo&q=85&s=ae54a563281df64e1675c5fc816ef9c4" data-path="logo/pesa86.png" />

Visible branding (default behaviour)

Hidden branding

* `true` → Branding shown (default)
* `false` → Branding hidden

### Configure Payment Links via API (Business Profile Level)

Use the following API to set default configurations:

```bash theme={"system"}
curl --location '{{BASE_URL}}/account/{{MERCHANT_ID}}/business_profile/{{PROFILE_ID}}' \
--header 'Content-Type: application/json' \
--header 'api-key: {{ADMIN_API_KEY}}' \
--data '{
  "payment_link_config": {
    "theme": "#4E6ADD",
    "logo": "https://Pesaswap.io/favicon.ico",
    "seller_name": "Pesaswap Inc.",
    "sdk_layout": "accordion",
    "display_sdk_only": true,
    "enabled_saved_payment_method": true,
    "hide_card_nickname_field": true,
    "show_card_form_by_default": true,
    "payment_button_text": "Proceed to Payment!",
    "transaction_details": [
      {
        "key": "Policy Number",
        "value": "297472368473924",
        "ui_configuration": {
          "position": 5,
          "is_key_bold": true,
          "is_value_bold": true
        }
      }
    ],
    "business_specific_configs": {
      "style1": {
        "theme": "#3B845E",
        "logo": "https://Pesaswap.io/favicon.ico",
        "seller_name": "Pesaswap Inc.",
        "display_sdk_only": true
      },
      "style2": {
        "theme": "#B202FF",
        "logo": "https://i.pinimg.com/736x/4d/83/5c/4d835ca8aafbbb15f84d07d926fda473.jpg",
        "seller_name": "Shopping Store",
        "enabled_saved_payment_method": true
      }
    },
    "allowed_domains": ["localhost:5500"],
    "domain_name": "my.custom.domain.com",
    "branding_visibility": false
  }
}'
```

***

### Default Configuration Values

```json theme={"system"}
{
  "theme": "#212E46",
  "logo": "https://live.Pesaswap.io/payment-link-assets/Merchant_placeholder.png",
  "seller_name": "merchant_name",
  "transaction_details": null,
  "background_image": null,
  "details_layout": "layout1",
  "sdk_layout": "tabs",
  "display_sdk_only": false,
  "enabled_saved_payment_method": false,
  "hide_card_nickname_field": false,
  "show_card_form_by_default": true,
  "payment_button_text": "Pay Now"
}

```