@tropykus/tropykus-widget
v0.1.2
Published
This widget is the gateway for third parties to access the savings and borrowing products of Tropykus in few lines of codes
Readme
Tropykus Widget
This widget is the gateway for third parties to access the savings and borrowing products of Tropykus in few lines of codes
Installation as an standalone component
This project was built using ReactJS v18.2 and it works as a widget that can be rendered using simple HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tropykus Widget</title>
<!-- Your code -->
</head>
<body>
<!-- ... Your code ... -->
<!-- You can add custom styles for the container-->
<style>
.widget-container {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
</style>
<div class="widget-container">
<div id="root"></div>
<!-- The widget will mount here -->
<script
type="module"
src="https://unpkg.com/tropykus-widget/dist/standalone/main.js"
></script>
</div>
<!-- ... Your code ... -->
</body>
</html>Installation as react in React or NextJS component
Install the widget ussing npm
npm install tropykus-widgetIn the destination app import the widget and render it:
import TropykusWidget from 'tropykus-widget'
function App() {
return (
<>
{/* Rest of your code ... */}
<TropykusWidget />
{/* ... Rest of your code */}Tropykus team will provide you with a CLIENT_ID, an API_KEY and an API_AUTH_URL so you can get an Auth Token that you will have to pass it as a parameter in the TropykusWidget Component: This is an example using React:
import axios from 'axios'
//@ts-expect-error Types not ready yet
import TropykusWidget from '@tropykus/tropykus-widget'
import { useEffect, useState} from 'react'
function App() {
const [token, setToken] = useState('')
const API_KEY= import.meta.env.VITE_WIDGET_API_KEY
const CLIENT_ID= import.meta.env.VITE_WIDGET_CLIENT_ID
const API_AUTH_URL= import.meta.env.VITE_WIDGET_API_AUTH_URL
useEffect(() => {
const clientToken= async()=>{
const res = await axios.post( API_AUTH_URL,
{apiKey: API_KEY,
clientId: CLIENT_ID})
setToken(res.data.token)
}
clientToken()
}, [API_AUTH_URL, API_KEY, CLIENT_ID])
return (
<>
<TropykusWidget token={token}/>
</>
)
}Configuration
For a custom configuration please contact the Tropykus team at [email protected]
Tests
Run units tests locally with any of these commands:
npm run test
npm run test-verboseCI
Every time a PR is opened from any branch to "develop", tests are performed automatically