Skip to content

Localisation basic kyc #524

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ayinloya wants to merge 6 commits into
base: localisation-ekyc
Choose a base branch
from
+182 −37
Open

Localisation basic kyc #524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a9fee85
localisation basic kyc
ayinloya Dec 23, 2025
42202c4
Merge branch 'localisation-ekyc' into localisation-basic-kyc
ayinloya Dec 23, 2025
27eaded
Fix lint
ayinloya Dec 23, 2025
1de8329
Fix spinner position in rtl display
ayinloya Dec 23, 2025
af7d3eb
Merge branch 'localisation-ekyc' into localisation-basic-kyc
ayinloya Dec 23, 2025
9a6cdb6
Merge branch 'localisation-ekyc' into localisation-basic-kyc
ayinloya Dec 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 117 additions & 26 deletions packages/embed/src/basic-kyc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ <h1>
crossorigin="anonymous"
></script>

<main>
<main hidden>
<section id="loading-screen" class="flow center">
<div class="nav justify-right">
<button data-type="icon" type="button" class="close-iframe">
Expand Down Expand Up @@ -98,12 +98,18 @@ <h1>
<br />
<p class="spinner"></p>

<h1 style="--flow-space: 4rem">Setting up</h1>
<h1 style="--flow-space: 4rem" data-i18n="pages.loading.title">
Setting up
</h1>

<p>
Just a few more seconds
<span data-i18n="pages.loading.subtitle"
>Just a few more seconds</span
>
<br />
We are setting up your verification flow
<span data-i18n="pages.loading.description"
>We are setting up your verification flow</span
>
</p>

<p class="center credits" hidden>
Expand Down Expand Up @@ -197,26 +203,48 @@ <h1 style="--flow-space: 4rem">Setting up</h1>
>
</button>
</div>
<h1 class="center font-size-500 max-width:100ch">Select ID Type</h1>
<h1
class="center font-size-500 max-width:100ch"
data-i18n="pages.idSelection.title"
>
Select ID Type
</h1>

<form name="hosted-web-config" class="flow flow-space:800">
<div class="split-pair flow-space:400">
<div class="flow input-group">
<label for="country"> Select Country </label>
<label for="country" data-i18n="pages.idSelection.selectCountry">
Select Country
</label>
<select disabled required id="country" name="country">
<option value="">--Please Select--</option>
<option value="" data-i18n="pages.idSelection.placeholder">
--Please Select--
</option>
</select>
</div>

<div class="flow input-group">
<label for="id_type"> Select ID Type </label>
<label for="id_type" data-i18n="pages.idSelection.selectIdType">
Select ID Type
</label>
<select required id="id_type" name="id_type" disabled>
<option value="" disabled>Select Country First</option>
<option
value=""
disabled
data-i18n="pages.idSelection.selectCountryFirst"
>
Select Country First
</option>
</select>
</div>
</div>

<button data-variant="solid" type="submit" id="submitConfig">
<button
data-variant="solid"
type="submit"
id="submitConfig"
data-i18n="common.continue"
>
Continue
<svg
aria-hidden="true"
Expand Down Expand Up @@ -275,7 +303,11 @@ <h1 class="center font-size-500 max-width:100ch">Select ID Type</h1>
/>
</svg>
</button>
<div class="back-button-text" style="color: var(--color-default)">
<div
class="back-button-text"
style="color: var(--color-default)"
data-i18n="common.back"
>
Back
</div>
</div>
Expand All @@ -301,7 +333,9 @@ <h1 class="center font-size-500 max-width:100ch">Select ID Type</h1>
>
</button>
</div>
<h1 class="center">Enter ID Information</h1>
<h1 class="center" data-i18n="pages.idInfo.title">
Enter ID Information
</h1>
<p class="demo-tip" data-variant="yellow" hidden>
<svg
aria-hidden="true"
Expand Down Expand Up @@ -336,20 +370,34 @@ <h1 class="center">Enter ID Information</h1>

<form name="user-details" class="flow">
<fieldset hidden id="bank-code" data-variant="start">
<label class="required" for="bank_code"> Bank </label>
<label
class="required"
for="bank_code"
data-i18n="pages.idInfo.bank"
>
Bank
</label>

<select
aria-required="true"
name="bank_code"
id="bank_code"
required
>
<option key="" value="">--Select Bank--</option>
<option key="" value="" data-i18n="pages.idInfo.selectBank">
--Select Bank--
</option>
</select>
</fieldset>

<div hidden id="id-number" class="input-group flow">
<label class="required" for="id_number"> ID Number </label>
<label
class="required"
for="id_number"
data-i18n="pages.idInfo.idNumber"
>
ID Number
</label>

<input
aria-required="true"
Expand All @@ -361,7 +409,13 @@ <h1 class="center">Enter ID Information</h1>

<fieldset hidden id="names" class="split-pair" data-variant="start">
<div class="input-group flow">
<label class="required" for="first_name"> First Name </label>
<label
class="required"
for="first_name"
data-i18n="pages.idInfo.firstName"
>
First Name
</label>

<input
aria-required="true"
Expand All @@ -374,7 +428,13 @@ <h1 class="center">Enter ID Information</h1>
</div>

<div class="input-group flow">
<label class="required" for="last_name"> Last Name </label>
<label
class="required"
for="last_name"
data-i18n="pages.idInfo.lastName"
>
Last Name
</label>

<input
aria-required="true"
Expand All @@ -387,25 +447,39 @@ <h1 class="center">Enter ID Information</h1>
</div>
</fieldset>
<fieldset hidden id="citizenships" data-variant="start">
<label class="required" for="citizenship"> Citizenship </label>
<label
class="required"
for="citizenship"
data-i18n="pages.idInfo.citizenship"
>
Citizenship
</label>

<select
aria-required="true"
name="citizenship"
id="citizenship"
required
>
<option key="" value="">Select Citizenship Type</option>
<option
key=""
value=""
data-i18n="pages.idInfo.selectCitizenship"
>
Select Citizenship Type
</option>
<option value="Kenyan">Kenyan</option>
<option value="Alien">Alien</option>
</select>
</fieldset>
<fieldset hidden id="dob" class="flow">
<legend>Date of Birth</legend>
<legend data-i18n="pages.idInfo.dateOfBirth">Date of Birth</legend>

<div class="dob">
<div class="input-group flow">
<label class="required" for="day"> Day </label>
<label class="required" for="day" data-i18n="pages.idInfo.day">
Day
</label>

<input
aria-required="true"
Expand All @@ -418,7 +492,13 @@ <h1 class="center">Enter ID Information</h1>
</div>

<div class="input-group flow">
<label class="required" for="last_name"> Month </label>
<label
class="required"
for="month"
data-i18n="pages.idInfo.month"
>
Month
</label>

<input
aria-required="true"
Expand All @@ -431,7 +511,13 @@ <h1 class="center">Enter ID Information</h1>
</div>

<div class="input-group flow">
<label class="required" for="year"> Year </label>
<label
class="required"
for="year"
data-i18n="pages.idInfo.year"
>
Year
</label>

<input
aria-required="true"
Expand All @@ -445,7 +531,12 @@ <h1 class="center">Enter ID Information</h1>
</div>
</fieldset>

<button data-variant="solid" type="button" id="submitForm">
<button
data-variant="solid"
type="button"
id="submitForm"
data-i18n="common.continue"
>
Continue
<svg
aria-hidden="true"
Expand Down Expand Up @@ -505,9 +596,9 @@ <h1 class="center">Enter ID Information</h1>
/>
</svg>

<h1>Submission Complete</h1>
<h1 data-i18n="pages.complete.title">Submission Complete</h1>

<p id="thank-you-message">
<p id="thank-you-message" data-i18n="pages.complete.defaultMessage">
That's all you need to verify your identity
</p>

Expand Down
11 changes: 8 additions & 3 deletions packages/embed/src/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
--color-active: #2d2b2a;
--color-default: #001096;
--color-disabled: #848282;
--spinner-offset: -50%;
}

[dir='rtl'] {
--spinner-offset: 50%;
}

*,
Expand Down Expand Up @@ -408,10 +413,10 @@ button[data-type='icon'] {

@keyframes spin {
0% {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
transform: translate3d(var(--spinner-offset), -50%, 0) rotate(0deg);
}
100% {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
transform: translate3d(var(--spinner-offset), -50%, 0) rotate(360deg);
}
}

Expand All @@ -428,7 +433,7 @@ button[data-type='icon'] {
will-change: transform;
position: relative;
top: 5rem;
left: 50%;
inset-inline-start: 50%;
}

@keyframes rotate {
Expand Down
Loading
Loading