Customize the experience

At MoonPay, we understand the importance of offering a tailored user experience that aligns with your brand identity and complies with your specific terms and conditions. This page provides you with insights into customizing the partner experience using the MoonPay Authenticate SDK.

Custom terms and conditions

If your business requires unique terms and conditions as part of the authentication process, you can seamlessly integrate your specific agreements. Whether you need users to accept terms of service, privacy policies, or other legal requirements, MoonPay allows you to implement your custom terms.

Please note that changes to custom terms and conditions are currently managed through direct contact with our support team. We will work closely with you to ensure that your terms and conditions are accurately reflected in the authentication process.

Theming UI/UX

At MoonPay, we recognize the significance of branding and ensuring that authentication processes seamlessly integrate with your brand identity. With the MoonPay Authenticate SDK, you now have the capability to customize the user interface to align with your preferences.

Custom themes

With the latest advancements, you can now employ custom themes to tailor the authentication flows. This feature allows you to specify a range of colors and styles, from brand colors to button hover effects, ensuring a consistent and visually appealing user journey.

Usage

import { CustomThemeStyles } from '@moonpay/auth-sdk';

Define your custom theme:

const theme: CustomThemeStyles = {
  light: {
    brandColor: '#1E90FF',
    accentPrimaryColor: '#FF6347',
    accentSecondaryColor: '#32CD32',
    // ... fill in all other light mode attributes here ...
    autoTintSecondaryColor: '#FFD700',
  },
  dark: {
    brandColor: '#4682B4',
    accentPrimaryColor: '#FF4500',
    accentSecondaryColor: '#228B22',
    // ... fill in all other dark mode attributes here ...
    autoTintSecondaryColor: '#FF8C00',
  },
};

Integrate the custom theme into the SDK configuration:

const sdk = new MoonPayAuthSDK('your_publishable_key', {  
  customTheme: theme,  
  // ... (other configurations)  
});

Try out the theme builder here: Builder

Embeddable Options

The MoonPay Authenticate SDK provides flexibility in embedding authentication components directly into custom user interfaces. This allows for a seamless user experience tailored to your application's design.

Embedding Methods

You have two primary methods to embed the SDK:

Inline Embedding: This method allows developers to embed the SDK directly inline within the HTML content of their web pages.
Iframe Overlay: Alternatively, you can utilize an iframe overlay to encapsulate and display the authentication components.

By default, the SDK will opt for the iframe overlay if the embeddableOptions are not provided during initialization.

Configuration

When setting up your SDK, ensure you specify the embeddable options:

const sdk = new MoonPayAuthSDK('your_publishable_key', {
  embeddableOptions: {
    elementId: 'custom-div', // ID of the custom div element where the embeddable component will be rendered.
    width: 500,              // Width of the embeddable component.
    height: 300,             // Height of the embeddable component.
  },
})

Once configured, the SDK will embed authentication components within the specified element.

Try out the demo here: Demo