@yieldx/embed
v0.1.7-sky-update-readme.0
Published
JS and TS Utilities for integrating with [YieldX Embedded Apps](https://yieldx.app/)
Downloads
1,366
Readme
@yieldx/embed
JS and TS Utilities for integrating with YieldX Embedded Apps
Install
With npm:
npm install @yieldx/embed --saveWith yarn
yarn add -E @yieldx/embedPure browser support
openYieldxEmbed is exported by @yieldx/embed
openYieldxEmbed will configure the embedded app and inject it into the page
If a dom identifier is passed to the configuration option
container, the iframe will be added to that element
openYieldxEmbed({
app: "inpaas",
token: "eyadsfvva....asdf",
sessionId: "3d301cd5-032c-a0bb-6880-7fabdcd81066",
institutionId: "a67a2495-de2d-273c-4613-ca32828448f1",
theme: {
primary:"#179e83",
background:"rgb(37, 45, 59)",
foreground: "#334d5c",
textPrimary: "rgb(255, 255, 255)",
textSecondary: "#14a3d7"
},
mode: "sandbox"
})Using React
This is the new and preferred approach for integrating with Plaid Link in React.
import React from "react";
import { useYieldxEmbed } from "@yieldx/embed";
export function App() {
const url = useYieldxEmbed({
theme: {
primary:"#179e83",
background:"rgb(37, 45, 59)",
foreground: "#334d5c",
textPrimary: "rgb(255, 255, 255)",
textSecondary: "#14a3d7"
},
app: "inpaas",
token: "eyadsfvva....asdf",
sessionId: "3d301cd5-032c-a0bb-6880-7fabdcd81066",
institutionId: "a67a2495-de2d-273c-4613-ca32828448f1",
mode: "sandbox"
});
return (
<iframe src={url} title="yieldx-embed"/>
);
}
export default App;All available configuration options
Please refer to the official YieldX docs for a more holistic understanding of the various Link options.
// src/lib/url-builder/url-builder.ts
type OptionalConfiguration = {
token: string;
sessionId: string;
institutionId: string;
// optional
app?: string; /* default: inpaas */
theme?: WhiteLabelOptions;
mode?: 'sandbox' | 'production';
frameId?: string;
container?: string;
onCompleted?: (status: string, message: string) => void
onError?: (status: string, message: string) => void
};
type WhiteLabelOptions = {
primary?: string;
secondary?: string;
background?: string;
foreground?: string;
textPrimary?: string;
textSecondary?: string;
};Typescript support
Typescript definitions for @yieldx/embed are built into the npm packge.
Test index.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.10.1/qs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/postmate.min.js"></script>
<script src="https://dp16xhm4dg09a.cloudfront.net/embed.umd.js"></script>
</head>
<body>
<script>
function onCompleted() {
alert("Success")
}
function onError() {
alert("An error occured")
}
function onLoad() {
alert("An error occured")
}
Embed.openYieldxEmbed({
token: "...",
institutionId: "...",
sessionId: "...",
onCompleted,
onError,
onLoad
})
</script>
</body>
</html>