<span>Empower your platform with seamless financial integration using these White Label UI Components. Designed for easy customisation and seamless integration, our UI components offer: <br/><b>Customisation:</b> Tailor the look and feel to match your bra
npm install react-native-wlcEmpower 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!
- 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`
`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 (
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 |string
| token | true | | Generate the token and pass it to the LMSProvider. Read the doc to generate the token. |InfoType
| info | true | | 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 |light
| theme | false | or dark | You can pass theme mode like light or dark |Theme palette
| palette | false | | For more info see the theme section |string[]
| font | false | | 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.
`typescript jsx
import React, { useState } from 'react'
import { RegisterFinance } from 'react-native-wlc'
export const Component = () => {
return
}
`
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. |
`typescript jsx
import React, { useState } from 'react'
import { FinanceApplicationForm } from 'react-native-wlc'
export const Component = () => {
return
}
`
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. |
`typescript jsx
import React, { useState } from 'react'
import { RepaymentModal } from 'react-native-wlc'
export const Component = () => {
return
}
`
| Parameter | Required? | Type | Description |
|-----------|:---------:|------------|--------------------------------------------------------------------------------|
| loanId | true | string | once you receive the loan object get the loan id and pass it to this component |function
| onSuccess | false | | It will fire, whenever your request successfully saved with us. |boolean
| open | true | | It will set the visibility of the modal |function
| onClose | false | | It will trigger once user clicks on the close, cancel button |
`typescript jsx
import React, { useState } from 'react'
import { SummaryCard } from 'react-native-wlc'
export const Component = () => {
const { userDetail } = useLMS()
return
/ 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 |
`typescript jsx
import React, { useState } from 'react'
import { LoanDetails } from 'react-native-wlc'
export const Component = () => {
const { userDetail } = useLMS()
return
onRecordClick={() => {
// do something
}}
isRepayment={false}
/>
}
`
| Parameter | Required? | Type | Description |
|---------------|:---------:|------------|-------------------------------------------------------------|
| loanId | true | string | Pass the loan id to see the loan details |boolean
| isRepayment | false | | pass if you want default tab selected to "Repayment" |function
| onRecordClick | false | | it will call whenever user clicks on Record payments button |
`typescript jsx
import React, { useState } from 'react'
import { Banner } from 'react-native-wlc'
export const Component = () => {
const { userDetail } = useLMS()
return
}}
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.REGISTER_FOR_FINANCING
Available types: REVIEW_SIGN_CONTRACTREGISTER_AGAINAPPLY_FINANCING |function
| onClose | false | | It will call when user click on the close icon |
`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 |function
| onViewClick | false | | it will return you type : `LOAN` or `APPLICATION` and selected loan |number
| tableMaxHeight | false | | Table max height for both Loan and Application |
`typescript jsx
import React, { useState } from 'react'
import { Profile } from 'react-native-wlc'
export const Component = () => {
return
}
`
`typescript jsx
import React, { useState } from 'react'
import { RequestEdit } from 'react-native-wlc'
export const Component = () => {
return
}
`
`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 |
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)",
},
};
``