Empower your platform with seamless financial integration using these White Label UI Components. Designed for easy
customisation and seamless integration, our UI components offer:

Customisation: Tailor the look and feel to match your brand.

Modularity: Choose functionalities that fit your needs.

Security: Industry-leading standards to protect user data.

Scalability: Reliable performance for any user load.

Get started today with our developer-friendly APIs and comprehensive documentation!

White Label Components

These are the available white label components.

- Register Finance
- Finance Application Form
- Repayment Modal
- Summary Card
- Loan Details
- Banner
- Loan List
- Profile
- Request Edit

First install the react-native-sdk by running one of these command

``yarn add react-native-wlc`

Or

`npm install react-native-wlc`







Configure

`typescript jsx
import React, { useCallback, useEffect, useState } from 'react'
import './App.css'
import { LMSProvider } from 'react-native-wlc'


function App() {
const [token, setToken] = useState('')

const fetchToken = useCallback(async () => {
// generate the token and assign to the setToken hook
}, [])

useEffect(() => {
fetchToken()
}, [fetchToken])

return (
base_url={/ provide the base url/}
token={token}
info={{
// Pass one of these information
email: '',
contactNumber: '',
ntn: '',
external_user_id: ''
}}
font={['Poppins']}
>
{/ children /}

)
}

export default App


`

Wrap your top level-component with LMSProvider.
`Note: White label component works inside LMSProvider`

| Parameter | Required? | Type | Description |
|-----------|:---------:|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| base_url | true | string | Read the doc for the base url or connect with our team (partnerships@creditbook.pk) for the base url |
| token | true | string | Generate the token and pass it to the LMSProvider. Read the doc to generate the token. |
| info | true | InfoType | Pass one of these information email, contactNumber, ntn, external_user_id. If you are new the pass one of these value with empty string like { ntn : '' }. You can set later by using useLMS() hook |
| theme | false | light or dark | You can pass theme mode like light or dark |
| palette | false | Theme palette | For more info see the theme section |
| font | false | string[] | Pass font name. eg: ['Arial']. Remember if you have custom font then integrate in your project and pass the string. |

Now Configuration is done. You are free to use any white label component if you business is already register.









RegisterFinance

`typescript jsx
import React, { useState } from 'react'
import { RegisterFinance } from 'react-native-wlc'

export const Component = () => {
return console.log('business', business)} />
}

`

It will help you to register your business information with us.

| Parameter | Required? | Type | Description |
|-----------|:---------:|------------|------------------------------------------------------------------------------------|
| onSuccess | false | function | it will return business type object, once you successfully submitted your request. |










FinanceApplicationForm

`typescript jsx
import React, { useState } from 'react'
import { FinanceApplicationForm } from 'react-native-wlc'

export const Component = () => {
return console.log('loan', loan._id)} />
}

`

You can apply your loan via this component

| Parameter | Required? | Type | Description |
|-----------|:---------:|------------|--------------------------------------------------------------------------------|
| onSuccess | false | function | it will return loan type object, once you successfully submitted your request. |










RepaymentModal

`typescript jsx
import React, { useState } from 'react'
import { RepaymentModal } from 'react-native-wlc'

export const Component = () => {
return console.log('loan', loan)} />
}

`

| Parameter | Required? | Type | Description |
|-----------|:---------:|------------|--------------------------------------------------------------------------------|
| loanId | true | string | once you receive the loan object get the loan id and pass it to this component |
| onSuccess | false | function | It will fire, whenever your request successfully saved with us. |
| open | true | boolean | It will set the visibility of the modal |
| onClose | false | function | It will trigger once user clicks on the close, cancel button |










SummaryCard

`typescript jsx
import React, { useState } from 'react'
import { SummaryCard } from 'react-native-wlc'

export const Component = () => {
const { userDetail } = useLMS()

return onClick={() => {
/ Write your business logic, eg: navigate to the other screen /
}}
/>
}

`

| Parameter | Required? | Type | Description |
|-----------|:---------:|------------|---------------------------------------------------------|
| onClick | false | function | It will call whenever user click on Apply for financing |










LoanDetails

`typescript jsx
import React, { useState } from 'react'
import { LoanDetails } from 'react-native-wlc'

export const Component = () => {
const { userDetail } = useLMS()

return loanId={'65d8c8034a5df5b079172dec'} // pass your loanId
onRecordClick={() => {
// do something
}}
isRepayment={false}
/>
}

`

| Parameter | Required? | Type | Description |
|---------------|:---------:|------------|-------------------------------------------------------------|
| loanId | true | string | Pass the loan id to see the loan details |
| isRepayment | false | boolean | pass if you want default tab selected to "Repayment" |
| onRecordClick | false | function | it will call whenever user clicks on Record payments button |










Banner

`typescript jsx
import React, { useState } from 'react'
import { Banner } from 'react-native-wlc'

export const Component = () => {
const { userDetail } = useLMS()

return onClick={() => {

}}
onClose={() => {// it will fire whenever user click on the close icon
}}
/>
}

`

| Parameter | Required? | Type | Description |
|-----------|:---------:|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| onClick | false | function | it will fire whenever user clicks on the button, it will return type and contractUrl.
Available types:
REGISTER_FOR_FINANCING
REVIEW_SIGN_CONTRACT
REGISTER_AGAIN
APPLY_FINANCING |
| onClose | false | function | It will call when user click on the close icon |










LoanList

`typescript jsx
import React, { useState } from 'react'
import { Banner } from 'react-native-wlc'

export const Component = () => {
const { userDetail } = useLMS()

return {
// it will return you selected loan
}}
onViewClick={(type, loan) => {
// it will return you type : 'LOAN'|'APPLICATION' and selected loan detail
}}
tableMaxHeight={300}
/>
}

`

| Parameter | Required? | Type | Description |
|----------------------|:---------:|------------|-----------------------------------------------------------------------------|
| onRecordPaymentClick | false | function | It will return you selected loan |
| onViewClick | false | function | it will return you type : `LOAN` or `APPLICATION` and selected loan |
| tableMaxHeight | false | number | Table max height for both Loan and Application |










Profile

`typescript jsx
import React, { useState } from 'react'
import { Profile } from 'react-native-wlc'

export const Component = () => {
return
}

`










RequestEdit

`typescript jsx
import React, { useState } from 'react'
import { RequestEdit } from 'react-native-wlc'

export const Component = () => {
return
}

`










Hooks

$3

`const { TOKEN, BASE_URL, axiosInstance, EMAIL, setEmail, userDetail } = useLMS()`

| Name | Description |
|---------------|-------------------------------------------------------------------------------------|
| TOKEN | It will return current token |
| BASE_URL | It will return current base url |
| axiosInstance | You can use use axiosInstance, if you wanna call the server directly |
| EMAIL | It will return current email |
| setEmail | if you wanna change the email you can call this function. setEmail('abc@gmail.com') |
| userDetail | it will return IBusiness type object.
IBusiness - current user status |

Theme

Default Palette

`typescript
const palette = {
colors: {
primary: "rgb(38, 119, 85)",
onPrimary: "rgb(255, 255, 255)",
primaryContainer: "rgb(240, 219, 255)",
onPrimaryContainer: "rgb(44, 0, 81)",
secondary: "rgb(102, 90, 111)",
onSecondary: "rgb(255, 255, 255)",
secondaryContainer: "rgb(237, 221, 246)",
onSecondaryContainer: "rgb(33, 24, 42)",
tertiary: "rgb(128, 81, 88)",
onTertiary: "rgb(255, 255, 255)",
tertiaryContainer: "rgb(255, 217, 221)",
onTertiaryContainer: "rgb(50, 16, 23)",
error: "rgb(186, 26, 26)",
onError: "rgb(255, 255, 255)",
errorContainer: "rgb(255, 218, 214)",
onErrorContainer: "rgb(65, 0, 2)",
background: "rgb(255, 251, 255)",
onBackground: "rgb(29, 27, 30)",
surface: "rgb(29, 27, 30)",
onSurface: "rgb(29, 27, 30)",
surfaceVariant: "rgb(233, 223, 235)",
onSurfaceVariant: "rgb(74, 69, 78)",
outline: "rgb(124, 117, 126)",
outlineVariant: "rgb(204, 196, 206)",
shadow: "rgb(0, 0, 0)",
scrim: "rgb(0, 0, 0)",
inverseSurface: "rgb(50, 47, 51)",
inverseOnSurface: "rgb(245, 239, 244)",
inversePrimary: "rgb(220, 184, 255)",
elevation: {
level0: "transparent",
level1: "rgb(248, 242, 251)",
level2: "rgb(244, 236, 248)",
level3: "rgb(240, 231, 246)",
level4: "rgb(239, 229, 245)",
level5: "rgb(236, 226, 243)",
},
surfaceDisabled: "rgba(29, 27, 30, 0.12)",
onSurfaceDisabled: "rgba(29, 27, 30, 0.38)",
backdrop: "rgba(51, 47, 55, 0.4)",
},
};

``