A React component for loan application with multi-step process and DocuSign integration
npm install loan-genieA React component for loan application with multi-step process and DocuSign integration.
- Multi-step loan application process
- DocuSign document signing integration
- Responsive design optimized for mobile
- TypeScript support
- Configurable API endpoints
- Customizable styling
``bash`
npm install loan-genie
`tsx
import React from 'react';
import { LoanBanner } from 'loan-genie';
const App = () => {
const config = {
apiBaseUrl: 'https://api.softsmartinc.com/Services/vNew',
authorizationToken: 'your-auth-token',
appName: 'YourAppName'
};
return (
config={config}
onLoanAccepted={(loanData) => {
console.log('Loan accepted:', loanData);
}}
onError={(error) => {
console.error('Error:', error);
}}
onStepChange={(step) => {
console.log('Current step:', step);
}}
/>
);
};
export default App;
`
`tsx
import React from 'react';
import { LoanBanner } from 'loan-genie';
const App = () => {
const config = {
apiBaseUrl: 'https://api.softsmartinc.com/Services/vNew',
authorizationToken: 'your-auth-token',
appName: 'YourAppName',
apiTimeout: 30000
};
const customStyle = {
maxWidth: '600px',
margin: '0 auto'
};
return (
config={config}
className="my-loan-banner"
style={customStyle}
onLoanAccepted={(loanData) => {
// Handle loan acceptance
console.log('Loan accepted:', loanData);
}}
onError={(error) => {
// Handle errors
console.error('Error:', error);
}}
onStepChange={(step) => {
// Track step changes
console.log('Current step:', step);
}}
/>
);
};
export default App;
`
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| email | string | Yes | User's email address |config
| | LoanBannerConfig | Yes | API configuration object |onLoanAccepted
| | (loanData: any) => void | No | Callback when loan is accepted |onError
| | (error: Error) => void | No | Callback for error handling |onStepChange
| | (step: number) => void | No | Callback when step changes |className
| | string | No | Additional CSS class name |style
| | React.CSSProperties | No | Inline styles |
`typescript`
interface LoanBannerConfig {
apiBaseUrl: string; // Base URL for API calls
apiTimeout?: number; // Request timeout in milliseconds (default: 30000)
authorizationToken: string; // Bearer token for API authentication
appName?: string; // Application name for API headers
}
The component expects the following API endpoints:
- POST /LoanGenie/GetOffer - Get loan offer dataPOST /DocuSign/Envelopes/Create
- - Create DocuSign envelopePOST /DocuSign/Documents/List
- - List documents in envelopePOST /DocuSign/Documents/Download
- - Download signed documentPOST /LoanGenie/SaveOffer
- - Save loan offerPOST /LoanGenie/AcceptOffer
- - Accept loan offer
The component includes built-in CSS styles. You can customize the appearance by:
1. CSS Classes: Override specific CSS classes
2. Inline Styles: Use the style prop
3. CSS Modules: Import and override styles
- .loan_banner_container - Main container.loan-offer
- - Initial offer step.loan-terms
- - Terms selection step.loan-summary-page
- - Summary step.loan-agreement
- - Document signing step.deposit-funds
- - Account selection step.loan-accept
- - Final acceptance step.thank-you
- - Completion step
`bash`
npm run build
`bash`
npm run dev
- React (>=16.8.0)
- React DOM (>=16.8.0)
- Axios (^1.11.0)
- Moment.js (^2.30.1)
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
MIT
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature'
3. Commit your changes ()git push origin feature/amazing-feature`)
4. Push to the branch (
5. Open a Pull Request
For support, email support@example.com or create an issue in the repository.