@cybrid/cybrid-sdk-ui-js
v0.0.471
Published
A javascript library of web components that integrate with Cybrid's api. View our documentation at https://github.com/Cybrid-app/cybrid-sdk-web/
Downloads
2,108
Maintainers
brent-cybridReadme
@cybrid/cybrid-sdk-ui-js
This package includes a bundled javascript web component (application) containing a variety of styled components that interface with Cybrid's api.
Install
npm install @cybrid/cybrid-sdk-ui-js@latest --saveQuick Start
Cross-Origin Resource Sharing (CORS)
The following URL's will have to be whitelisted to properly view the components:
Crypto currency icon assets: https://images.cybrid.xyz/
HTML
To use the application via html load it into your index.html as a script.
The script registers cybrid-app as a web-component in your window.
NOTE: If you are embedding this library in an Angular application you will want to omit
cybrid-sdk-ui.polyfills.jsto avoid duplication ofzone.js
<!DOCTYPE html>
<html lang="en">
<head>
<title>Host Application</title>
// Omit if already importing zone.js in an Angular application
<script type="module" src="cybrid-sdk-ui.polyfills.js"></script>
// Main, runtime, and css bundle
<script type="module" src="cybrid-sdk-ui.min.js"></script>
</head>
<body>
<cybrid-app
[auth]="token"
[config]="config"
[component]="component"
></cybrid-app>
</body>
</html>Javascript
You can generate the application in Javascript instead of using the selector in HTML:
NOTE: You must still reference
'cybrid-app'indocument.createElement()
<script>
const cybrid = document.createElement('cybrid-app');
cybrid.auth = 'your_JWT';
cybrid.config = 'config';
cybrid.component = 'component';
document.body.append(cybrid);
</script>If you want to append the application elsewhere than the body try:
document.getElementById('your-element').append(cybrid);Configuration
You can change configuration during runtime. The application:
- Accepts an
auth,config, andcomponentproperty - Emits events via
eventLoganderrorLog
auth (required)
Expects a JSON Web Token. The component won't display unless the bound JWT is valid.
Example:
<cybrid-app auth="ey...."></cybrid-app>hostConfig (required)
A default component configuration is set if no config is bound. The full configuration object must be defined.
NOTE: Config is currently required due to the necessity of a customer GUID. In the future this will be removed and revert to a default config if undefined. The customer GUID will be embedded in the JWT.
interface ComponentConfig {
refreshInterval: number;
routing: boolean;
locale: string;
theme: string;
customer: string;
fiat: string;
features: Array<string>;
environment: string;
redirectUri?: string;
}Example:
your_config = {
refreshInterval: 10000,
routing: true,
locale: 'fr-CA',
theme: 'DARK',
customer: '969c744a02b11ed', //example GUID,
fiat: 'USD',
features: ['kyc_identity_verifications'],
environment: 'sandbox',
redirectUri: 'https://app.com/bank-account-connect'
};<cybrid-app [config]="your_config"></cybrid-app>Parameters
refreshInterval
The number in milliseconds the component waits before refreshing data. Default: 5000
routing
A routing flag to enable or disable internal routing between components. Default: true
NOTE: Disabling routing will also remove routing elements from the ui, like the back button in
trade. The app will still fire events where routing would have occurred such as completing a trade, or clicking an asset in theprice-list. See 'Events' below for more information.
locale
The current locale. Supports: 'en-US' | 'fr-CA' Default: 'en-US'
theme
Light mode or dark mode styling. Supports: 'LIGHT' | 'DARK' Default: 'LIGHT'
fiat
The current fiat currency (counter asset for all value calculation). Supports: 'USD | CAD' Default: 'USD'
features
The banks features. Supports: 'attestation_identity_records' | 'kyc_identity_verifications' Default: []
environment
The environment that you are authenticated against. Supports: 'sandbox' | 'production'
``redirectUri`
The redirect Uri that the Plaid SDK uses to return from a mobile OAuth flow. It must be registered with Cybrid so that we may add it to an internal Plaid allow-list. If this is undefined and on web-mobile the bank-account-connect component will return an Error, and serve a message to the user that explains mobile access is unavailable. The query parameter 'oauth_state_id' returned from Plaid must be present in the url when you re-render the bank-account-connect component after authentication.
NOTE: We cannot register a URI that uses a hash location strategy, ex: https://app.com/#/bank-account-connect
component (optional)
The currently displayed component. By default, the price-list component is rendered.
Components:
price-listtradeaccount-listidentity-verification(Kyc configured banks only)bank-account-connect(Plaid configured banks only)bank-account-list(Plaid configured banks only)transfer(Plaid configured banks only)
Example:
<cybrid-app component="trade"></cybrid-app>bank-account-connect
Query params:
oauth_state_id. Returned by Plaid during a mobile OAuth flow. Completes the OAuth flow.external_bank_account. An external bank account guid. Pass to reconnect a bank account in therefresh_requiredstate.
Events
An event logging service that can be subscribed to. Emits application events and errors as an eventLog Object:
interface EventLog {
level: LEVEL;
code: CODE;
message: string;
data?: any;
}Example:
<cybrid-app (eventLog)="handleEvent($event)"></cybrid-app>Javascript:
cybridApp.addEventListener('eventLog', (event) => {
console.log(event.detail);
});Errors
An error logging service that can be subscribed to. Emits application errors, as well as pass through api errors as an errorLog Object:
interface ErrorLog {
// 'Error' for an application error or the status code from an http error
code: number | string;
message: string;
data?: any;
}Example:
<cybrid-app (errorLog)="handleError($event)"></cybrid-app>Javascript:
cybridApp.addEventListener('errorLog', (event) => {
console.log(event.detail);
});License
This project is licensed under Apache 2.0, found in LICENSE