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
}
Updated 3 months ago