Web SDK UI Customizations

This document describes the different customizable sections of the Programmable Wallet SDK customization API. To get the most flexibility from the SDK, use this reference with the SDK API.

Colors

setThemeColor(themeColor: ThemeColor)

#ThemeColor propertyNote
A1backdropModal backdrop color, e.g. '#000000'.
A2backdropOpacityModal backdrop opacity, e.g. 0.5.
A3dividerDivider border color, e.g. '#808080' or 'grey'.
A4bgModal background color, e.g. '#FFFFFF' or 'white'.
A5successSuccess text color, e.g. '#008000' or 'green'.
A6errorError text color, e.g. '#FF0000' or 'red'.
A7textMainPrimary color, e.g. '#000000' or 'black'.
A8textMain2Secondary color, e.g. '#000000' or 'black'.
A9textAuxiliaryPrimary auxiliary color, e.g. '#000000' or 'black'.
A10textAuxiliary2Secondary auxiliary color, e.g. '#000000' or 'black'.
A11textSummarySummary text color, e.g. '#000000' or 'black'.
A12textSummaryHighlightSummary highlight text color, e.g. '#000000' or 'black'.
A13textPlaceholderText input placeholder color, e.g. '#808080' or 'grey'.
A14pinDotBaseFill color for pincode input dot, e.g. '#FFFFFF' or 'white'.
A15pinDotBaseBorderStroke color for pincode input dot, e.g. '#000000' or 'black'.
A16pinDotActivatedFill color for inputted pincode input dot, e.g. '#0000ff' or 'blue'.
A17inputBorderFocusedOutline color for text input on focused, e.g. '#0000ff' or 'blue'.
A18inputBorderFocusedErrorOutline color for text input when error, e.g. '#FF0000' or 'red'.
A19inputBgBackground color for text input, e.g. '#FFFFFF' or 'white'.
A20inputBgDisabledBackground color for disabled text input, e.g. '#FFFFFF' or 'white'.
A21dropdownBgBackground color for dropdown, e.g. '#FFFFFF' or 'white'.
A22dropdownBorderIsOpenOutline color for dropdown is open, e.g. '#0000ff' or 'blue'.
A23dropdownBorderErrorOutline color for dropdown when error, e.g. '#FF0000' or 'red'.
A24mainBtnTextText color for primary button, e.g. '#FFFFFF' or 'white'.
A25mainBtnTextDisabledText color for disabled primary button, e.g. '#FFFFFF' or 'white'.
A26mainBtnTextOnHoverText color for primary button on hover, e.g. '#FFFFFF' or 'white'.
A27mainBtnBgBackground color for primary button, e.g. '#000000' or 'black'.
A28mainBtnBgOnHoverBackground color for primary button on hover, e.g. '#000000' or 'black'.
A29mainBtnBgDisabledBackground color for disabled primary button, e.g. '#000000' or 'black'.
A30secondBtnTextText color for secondary button, e.g. '#000000' or 'black'.
A31secondBtnTextDisabledText color for disabled secondary button, e.g. '#000000' or 'black'.
A32secondBtnTextOnHoverText color for secondary button on hover, e.g. '#000000' or 'black'.
A33secondBtnBorderOutline color for secondary button, e.g. '#000000' or 'black'.
A34secondBtnBorderOnHoverOutline color for secondary button on hover, e.g. '#000000' or 'black'.
A35secondBtnBgOnHoverBackground color for secondary button on hover, e.g. '#FFFFFF' or 'white'.
A36secondBtnBorderDisabledOutline color for disabled secondary button, e.g. '#FFFFFF' or 'white'.
A37plainBtnTextText color for plain text button, e.g. '#000000' or 'black'.
A38plainBtnTextDisabledText color for disabled plain text button, e.g. '#000000' or 'black'.
A39plainBtnTextOnHoverText color for plain text button on hover, e.g. '#000000' or 'black'.
A40plainBtnBgBackground color for plain text button, e.g. '#FFFFFF' or 'white'.
A41plainBtnBgOnHoverBackground color for plain text button on hover, e.g. '#FFFFFF' or 'white'.
A42recoverPinHintTitleText color for recover pincode hint title, e.g. '#FFFFFF' or 'white'.
A43recoverPinHintTitleBgBackground color for recover pincode hint title, e.g. '#FFFFFF' or 'white'.
A44recoverPinHintext color for recover pincode hint, e.g. '#FFFFFF' or 'white'.
A45titleGradientsBackground color for linear-gradient text, e.g. ['#B090F5', '#1AA3FF'].
A46inputTextText color for text input, e.g. '#000000' or 'black'.
A47enteredPinTextText color for entered pincode input, e.g. '#000000' or 'black'.

Create your PIN


Re-enter your PIN to Confirm


Set up your Recovery Method

Security Questions Customization

Please reference the Security Question section in the SDK for how to customize the question by using setSecurityQuestions method.

Security Questions Summary

Security Questions Confirmation


Enter your PIN


Recover your PIN

Custom security questions

#FunctionNote
B1setCustomSecurityQuestions(  questions?: SecurityQuestion[] | null,  requiredCount = 2,  securityConfirmItems?: string[])Set the array of security questions
B2setCustomSecurityQuestions(  questions?: SecurityQuestion[] | null,  requiredCount = 2,  securityConfirmItems?: string[])Set the required count of security questions. The value is 2 by default.
B3setCustomSecurityQuestions(  questions?: SecurityQuestion[] | null,  requiredCount = 2,  securityConfirmItems?: string[])Set the array of customized disclaimers on the SecurityConfirm screen. The value is undefined by default.
B4setOnForgotPin(onForgotPin: () => void)Set the callback of onForgotPin

Resources

setResource(resources: Resources)

#Resources PropertyNote
C1naviCloseClose icon url for the navigation bar.
C2naviBackBack icon URL for the navigation bar.
C3securityIntroMainSecurity intros image URL for the security intros page.
C4dropdownArrowArrow icon URL for the dropdown.
C5selectCheckMarkSelected item icon URL for the dropdown.
C6securityConfirmMainSecurity confirm image URL for the security confirm page.
C7errorInfoError icon for form validation.
C8fontFamilyFont-family for customization.E.g. { name: 'Edu TAS Beginner', URL: 'https\://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght\@400;500;600;700\&display=swap' }.

Create your PIN


CustomLinks

setCustomLinks(customLinks: CustomLinks)

#Custom Links PropertyNote
D1learnMoreUrlExternal link for the learn more button link.

Localizations

setLocalizations(localizations: Localizations)

#Localizations PropertyNote
E1~E3confirmPincodeHolds localization settings for ConfirmPincode screen.
F1~F4enterPincodeHolds localization settings for EnterPincode screen.
G1~G3newPincodeHolds localization settings for NewPincode screen.
H1~H5recoverPincodeHolds localization settings for RecoverPincode screen.
I1~I5securityConfirmHolds localization settings for SecurityConfirm screen.
J1~J4securityIntrosHolds localization settings for SecurityIntros screen.
K1~K8securityQuestionsHolds localization settings for SecurityQuestions screen.
L1~L2securitySummaryHolds localization settings for SecuritySummary screen.

confirmPincode

#Property NameNote
E1headlineHeadline textKeep the placeholder like this:E.g. `Re-enter your {{pin}} to confirm`
E2headline2Headline text 2The text will replace the {{pin}} placeholder in the headline text
E3subheadSubhead text

enterPincode

#Property NameNote
F1headlineHeadline textKeep the placeholder like this:E.g. `Enter your {{pin}}` or `輸入你的 {{pin}}`
F2headline2Headline text 2The text will replace the {{pin}} placeholder in the headline text
F3subheadSubhead text
F4forgotPinForgot pin text

newPincode

#Property NameNote
G1headlineHeadline textKeep the placeholder like this:E.g. `Enter your {{pin}}` or `輸入你的 {{pin}}`
G2headline2Headline text 2The text will replace the {{pin}} placeholder in the headline text
G3subheadSubhead text

recoverPincode

#Property NameNote
H1headlineHeadline text
H2headline2Headline text 2
H3subheadSubhead text
H4answerInputHeaderAnswer input header text
H5answerInputPlaceholderAnswer input placeholder text

securityConfirm

#Property NameNote
I1titleTitle text
I2headlineHeadline text
I3inputHeadlineInput headline text
I4inputPlaceholderInput placeholder text
I5inputMatchInput match text

securityIntros

#Property NameNote
J1headlineHeadline text
J2headline2Headline text 2
J3descriptionDescription text
J4linkLink text

securityQuestions

#Property nameNote
K1titleTitle text
K2questionHeaderQuestion header text
K3questionPlaceholderQuestion placeholder text
K4requiredMarkRequired mark text
K5answerHeaderAnswer header text
K6answerPlaceholderAnswer placeholder text
K7answerHintHeaderAnswer hint header text
K8answerHintPlaceholderAnswer hint placeholder text

securitySummary

#Property NameNote
L1titleTitle text
L2questionThe question text keeps the placeholder like this: E.g. {{ordinal}}. You are not required to place an ordinal value into the placeholder. The web SDK will do it for you.