Customizing the Payment Embed

To enhance the user experience, you can customize the MoneyHash payment embed using the EmbedStyle properties. This guide will walk you through the process of defining and applying styles to the submit button, loader, and input fields across Android, iOS, and Flutter platforms.

Overview of EmbedStyle

The EmbedStyle serves as a container for styling various components of the payment embed. It includes styles for the submit button, loader, and input fields.

Properties:

submitButton: Defines the style for the submit button.
loader: Defines the style for the loader.
input: Defines the style for the input fields.

class EmbedStyle {
  final EmbedButtonStyle? submitButton;
  final EmbedLoaderStyle? loader;
  final EmbedInputStyle? input;
}

data class EmbedStyle(
    val submitButton: EmbedButtonStyle? = null,
    val loader: EmbedLoaderStyle? = null,
    val input: EmbedInputStyle? = null,
)

public struct EmbedStyle: Codable {
    let submitButton: EmbedButtonStyle?
    let loader: EmbedLoaderStyle?
    let input: EmbedInputStyle?
    
    public init(submitButton: EmbedButtonStyle? = nil,loader: EmbedLoaderStyle? = nil, input: EmbedInputStyle? = nil) {
        self.submitButton = submitButton
        self.loader = loader
        self.input = input
    }
}

Customizing the Submit Button

The EmbedButtonStyle class allows you to customize the submit button in different states: base, hover, and focus.

Properties

base: Style for the button in its default state.
hover: Style for the button when hovered over.
focus: Style for the button when focused.

class EmbedButtonStyle {
  final EmbedButtonViewStyle? base;
  final EmbedButtonViewStyle? hover;
  final EmbedButtonViewStyle? focus;
}

data class EmbedButtonStyle(
    val base: EmbedButtonViewStyle? = null,
    val hover: EmbedButtonViewStyle? = null,
    val focus: EmbedButtonViewStyle? = null,
)

public struct EmbedButtonStyle: Codable {
    let base: EmbedButtonViewStyle?
    let hover: EmbedButtonViewStyle?
    let focus: EmbedButtonViewStyle?
    
    public init(base: EmbedButtonViewStyle? = nil, hover: EmbedButtonViewStyle? = nil, focus: EmbedButtonViewStyle? = nil) {
        self.base = base
        self.hover = hover
        self.focus = focus
    }
}

Defining Button View Styles

The EmbedButtonViewStyle class allows you to set various visual properties for the button.

Properties

color: Text color.
fontFamily: Font family.
fontWeight: Font weight.
fontSize: Font size.
fontSmoothing: Font smoothing.
lineHeight: Line height.
textTransform: Text transformation (e.g., uppercase).
letterSpacing: Letter spacing.
background: Background color.
padding: Padding around the text.
borderRadius: Border radius.
boxShadow: Box shadow.
borderStyle: Border style (e.g., solid, dashed).
borderColor: Border color.
borderWidth: Border width.

class EmbedButtonViewStyle {
  final String? color;
  final String? fontFamily;
  final String? fontWeight;
  final String? fontSize;
  final String? fontSmoothing;
  final String? lineHeight;
  final String? textTransform;
  final String? letterSpacing;
  final String? background;
  final String? padding;
  final String? borderRadius;
  final String? boxShadow;
  final String? borderStyle;
  final String? borderColor;
  final String? borderWidth;

  EmbedButtonViewStyle({
    this.color,
    this.fontFamily,
    this.fontWeight,
    this.fontSize,
    this.fontSmoothing,
    this.lineHeight,
    this.textTransform,
    this.letterSpacing,
    this.background,
    this.padding,
    this.borderRadius,
    this.boxShadow,
    this.borderStyle,
    this.borderColor,
    this.borderWidth,
  });
}

data class EmbedButtonViewStyle(
    val color: String? = null,
    val fontFamily: String? = null,
    val fontWeight: String? = null,
    val fontSize: String? = null,
    val fontSmoothing: String? = null,
    val lineHeight: String? = null,
    val textTransform: String? = null,
    val letterSpacing: String? = null,
    val background: String? = null,
    val padding: String? = null,
    val borderRadius: String? = null,
    val boxShadow: String? = null,
    val borderStyle: String? = null,
    val borderColor: String? = null,
    val borderWidth: String? = null
)

public struct EmbedButtonViewStyle {
    let color: String?
    let fontFamily: String?
    let fontWeight: String?
    let fontSize: String?
    let fontSmoothing: String?
    let lineHeight: String?
    let textTransform: String?
    let letterSpacing: String?
    let background: String?
    let padding: String?
    let borderRadius: String?
    let boxShadow: String?
    let borderStyle: String?
    let borderColor: String?
    let borderWidth: String?
}

Customizing Input Fields

The EmbedInputStyle class allows you to customize the input fields in different states: base, error, and focus.

Properties

base: Style for the input fields in their default state.
error: Style for the input fields when an error occurs.
focus: Style for the input fields when they are focused.

class EmbedInputStyle {
  final EmbedInputViewStyle? base;
  final EmbedInputViewStyle? error;
  final EmbedInputViewStyle? focus;

  EmbedInputStyle({
    this.base,
    this.error,
    this.focus,
  });
}

data class EmbedInputStyle(
    val base: EmbedInputViewStyle? = null,
    val error: EmbedInputViewStyle? = null,
    val focus: EmbedInputViewStyle? = null,
)


public struct EmbedInputStyle: Codable {
    let base: EmbedInputViewStyle?
    let error: EmbedInputViewStyle?
    let focus: EmbedInputViewStyle?
}

Defining Input View Styles

The EmbedInputViewStyle class allows you to set various visual properties for the input fields.

Properties

height: Height of the input field.
padding: Padding inside the input field.
background: Background color.
borderRadius: Border radius.
boxShadow: Box shadow.
borderStyle: Border style (e.g., solid, dashed).
borderColor: Border color.
borderWidth: Border width.
color: Text color.
fontFamily: Font family.
fontWeight: Font weight.
fontSize: Font size.
fontSmoothing: Font smoothing.
lineHeight: Line height.

class EmbedInputViewStyle {
  final String? height;
  final String? padding;
  final String? background;
  final String? borderRadius;
  final String? boxShadow;
  final String? borderStyle;
  final String? borderColor;
  final String? borderWidth;
  final String? color;
  final String? fontFamily;
  final String? fontWeight;
  final String? fontSize;
  final String? fontSmoothing;
  final String? lineHeight;

  EmbedInputViewStyle({
    this.height,
    this.padding,
    this.background,
    this.borderRadius,
    this.boxShadow,
    this.borderStyle,
    this.borderColor,
    this.borderWidth,
    this.color,
    this.fontFamily,
    this.fontWeight,
    this.fontSize,
    this.fontSmoothing,
    this.lineHeight,
  });
}

data class EmbedInputViewStyle(
    val height: String? = null,
    val padding: String? = null,
    val background: String? = null,
    val borderRadius: String? = null,
    val boxShadow: String? = null,
    val borderStyle: String? = null,
    val borderColor: String? = null,
    val borderWidth: String? = null,
    val color: String? = null,
    val fontFamily: String? = null,
    val fontWeight: String? = null,
    val fontSize: String? = null,
    val fontSmoothing: String? = null,
    val lineHeight: String? = null
)

public struct EmbedInputViewStyle: Codable {
    let height: String?
    let padding: String?
    let background: String?
    let borderRadius: String?
    let boxShadow: String?
    let borderStyle: String?
    let borderColor: String?
    let borderWidth: String?
    let color: String?
    let fontFamily: String?
    let fontWeight: String?
    let fontSize: String?
    let fontSmoothing: String?
    let lineHeight: String?
}

Customizing the Loader

The EmbedLoaderStyle class allows you to customize the loader's appearance.

Properties

backgroundColor: Background color of the loader.
color: Color of the loader.

class EmbedLoaderStyle {
  final String? backgroundColor;
  final String? color;

  EmbedLoaderStyle({
    this.backgroundColor,
    this.color,
  });
}

data class EmbedLoaderStyle(
    val backgroundColor: String? = null,
    val color: String? = null,
)

public struct EmbedLoaderStyle: Codable {
    let backgroundColor: String?
    let color: String?
}

Applying Styles to the Embed

To apply the custom styles to the MoneyHash payment embed, pass the EmbedStyle object when using the renderForm function.

await moneyhashSDK.renderForm(
  "Intent id is here",
  IntentType.payment,
  embedStyle // Your embedStyle instance
);

moneyHash.renderForm(
  intentId = paymentIntentId,
  intentType = IntentType.Payment,
  launcher = intentResultContract, // Activity result launcher
  resultType = ResultType.RESULT_SCREEN_WITH_CALLBACK, // Or Just CALLBACK
  embedStyle = embedStyle // Your optional embedStyle instance
)

moneyHashSDK.renderForm(
  on: self, // Your current ViewController
  intentId: "Your intent id",
  embedStyle: embedStyle, // Your optional embedStyle instance
  intentType: .payment
) { res in
  // Handle the result here
}