Customization
You can customize your screen texts, colors, images, and buttons.
There are 4 flows:
PinEnrollment: This flow allows the user to register their PIN for the first time, then register their biometricsPinVerification: This is used to verify the user's biometrics or use PIN.PinReset: This is used to reset user's pin if they forgot the pin by sending a code to their email or phone number.PinChange: This is used to change the user's pin if they know what the current pin is.
- Screen names for Pin Enrollment flow:
PinEnrollmentEnterPin,PinEnrollmentReEnterPin - Screen names for Pin Verification flow:
PinVerification - Screen names for Pin Reset flow:
PinReset,PinResetEnterPin,PinResetReEnterPin - Screen names for Pin Change flow:
PinChangeVerifyPin,PinChangeEnterPin,PinChangeReEnterPin
To customize the Header of each screen, call
Cotter.strings.setHeaders(<ScreenName>, <YourHeader>). Do this right after your call
Cotter.init, before starting any flow.Cotter.init(this.getApplicationContext(), "https://www.cotter.app/api/v0",
getString(R.string.user_id), // user id
getString(R.string.api_key_id), // api key id
getString(R.string.api_secret_key)); // api secret key
// Setting strings for Headers
Cotter.strings.setHeaders(ScreenNames.PinEnrollmentEnterPin, "Activate PIN");
Cotter.strings.setHeaders(ScreenNames.PinEnrollmentReEnterPin, "Confirm PIN");
Cotter.strings.setHeaders(ScreenNames.PinVerification, "Verification");
Cotter.strings.setHeaders(ScreenNames.PinChangeVerifyPin, "Change PIN");
Cotter.strings.setHeaders(ScreenNames.PinChangeEnterPin, "New PIN");
Cotter.strings.setHeaders(ScreenNames.PinChangeReEnterPin, "Confirm New PIN");
Cotter.strings.setHeaders(ScreenNames.PinReset, "Reset PIN");
Cotter.strings.setHeaders(ScreenNames.PinResetEnterPin, "Activate New PIN");
Cotter.strings.setHeaders(ScreenNames.PinResetReEnterPin, "Confirm New PIN");
This is the first screen on the
PinEnrollment flow.
PinEnrollment Flow
To set the text for a specific element on a screen, specify the screen name, the name of the element, and the value.
The syntax is like the following:
Cotter.strings.set___<ScreenName>___Strings(Strings.__<ElementName>__, <ValueYouWant>)
For example, if you want to update the Title to "Enter PIN":
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.Title, "Enter PIN");
Put this below Cotter.init before you start any flow.
As shown in the picture, there are 3 main colors that you can set:
ColorAccentColorPrimaryColorDanger
Cotter.colors.setColorPrimary("#5E9051");
Cotter.colors.setColorAccent("#53228B");
Cotter.colors.setColorDanger("#B00020");
There are 3 different places where errors may pop up:
PinEnrollmentEnterPin: Error happens when the PIN is too weak, with the errorStrings.ErrorCombination. To update:
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.ErrorCombination, "Your PIN is too weak!");
PinEnrollmentReEnterPin: Error happens when the PIN is not the same as the PIN entered originally, with the errorStrings.ErrorNoMatch. To update:
Cotter.strings.setPinEnrollmentReEnterPinStrings(Strings.ErrorNoMatch, "Your PINs don't match");
PinVerification: Error happens when the user entered an invalid PIN, with the errorStrings.ErrorInvalid. To update:
Cotter.strings.setPinVerificationStrings(Strings.ErrorInvalid, "Invalid PIN");
To change the image, add the image in your
/drawable directory, and add the following:Cotter.colors.setSuccessImage(R.drawable.check);
PinVerification and PinReset screen
// PinVerification
Cotter.strings.setPinVerificationStrings(Strings.ForgotPin, "Lupa PIN");
// PinReset
Cotter.strings.setPinReset(Strings.Title, "Verification Code");
Cotter.strings.setPinReset(Strings.Subtitle, "We have sent the code to");
Cotter.strings.setPinReset(Strings.ResendCode, "Reset Code");
Cotter.strings.setPinReset(Strings.ErrorInvalid, "The code you entered is wrong");
There are 2 places where an AlertDialog will pop-up:
PinEnrollmentEnterPin: AlertDialog pop up when the user clicks 'X' to exit the screen.PinVerification: On a very rare occasion, the signature generated by the biometrics may be invalid. In which case, the AlertDialog will pop up.
To update the AlertDialog strings on the
PinEnrollmentEnterPin screen:Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogTitle, "Are you sure you don't want to setup PIN?");
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogSubtitle, "Setting up your PIN is important to secure your account.");
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogPositiveButton, "Setup PIN");
Cotter.strings.setPinEnrollmentEnterPinStrings(Strings.DialogNegativeButton, "Next Time");
There are 2 screens where the BiometricPrompt will pop up:
PinEnrollmentSuccess: when Pin Enrollment is successful, user can then enroll their biometricsPinVerification: When user's default authentication method is biometrics, user will be prompted to verify their biometrics when an authentication is required.
See the full list of API for:
MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initialize Cotter
Cotter.init(this.getApplicationContext(), "https://www.cotter.app/api/v0","<your user id>", "<your api key id>", "<your api secret key>");
// ------ Setting strings for Headers ------ //
Cotter.strings.setHeaders(ScreenNames.PinEnrollmentEnterPin, "Aktivasi PIN");
Cotter.strings.setHeaders(ScreenNames.PinEnrollmentReEnterPin, "Konfirmasi PIN");
Cotter.strings.setHeaders(ScreenNames.PinVerification, "Verifikasi");
Cotter.strings.setHeaders(ScreenNames.PinChangeVerifyPin, "Ganti PIN");
Cotter.strings.setHeaders(ScreenNames.PinChangeEnterPin, "PIN Baru");
Cotter.strings.setHeaders(ScreenNames.PinChangeReEnterPin, "Konfirmasi PIN Baru");
Cotter.strings.setHeaders(ScreenNames.PinReset, "Reset PIN");
Cotter.strings.setHeaders(ScreenNames.PinResetEnterPin, "Aktivasi PIN Baru");
Cotter.strings.setHeaders(ScreenNames.PinResetReEnterPin, "Konfirmasi PIN Baru");
// ----- SETTING STRINGS FOR PIN VERIFICATION -----//
// Pin Verification page
Cotter.strings.setPinVerificationStrings(Strings.Title, "Masukkan PIN");
Cotter.strings.setPinVerificationStrings(Strings.ForgotPin, "Lupa PIN");
Cotter.strings.setPinVerificationStrings(Strings.ErrorInvalid, "PIN tidak sesuai.");
// Biometric prompt
Cotter.strings.setPinVerificationStrings(Strings.BiometricTitle, "Verifikasi");
Cotter.strings.setPinVerificationStrings(Strings.BiometricSubtitle,
"Sentuh sensor sidik jari untuk melanjutkan");
Cotter.strings.setPinVerificationStrings(Strings.BiometricNegativeButton, "Input PIN");
// Alert dialog when biometric signature is not valid
Cotter.strings.setPinVerificationStrings(Strings.DialogTitle, "Biometric kamu tidak bisa diverifikasi");
Cotter.strings.setPinVerificationStrings(Strings.DialogSubtitle, "Kamu boleh masukkan PIN atau coba lagi.");
Cotter.strings.setPinVerificationStrings(Strings.DialogPositiveButton, "Input PIN");
Cotter.strings.setPinVerificationStrings(Strings.DialogNegativeButton, "Coba lagi");
// ----- END SETTING STRINGS FOR PIN VERIFICATION -----//
// Setting colors
Cotter.colors.setColorPrimary("#5E9051");
Cotter.colors.setColorAccent("#53228B");
Cotter.colors.setColorDanger("#B00020");
}
public void openPinEnrollment(View view) {
Cotter.PinEnrollment.startFlow(view, <CallbackScreen>.class, "PIN_ENROLLMENT");
}
public void openPinVerification(View view) {
Cotter.user.setUserInformation("Emily", "[email protected]", "EMAIL");
Cotter.PinVerification.startFlow(view, <CallbackScreen>.class, "LOGIN");
}
Pin Enrollment Flow
Last modified 3yr ago