@yieldx/embed

JS and TS Utilities for integrating with [YieldX Embedded Apps](https://yieldx.app/)

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@yieldx/embed
0.1.7-sky-update-readme.04 months agoa year agoMinified + gzip package size for @yieldx/embed in KB

Readme

@yieldx/embed npm version
JS and TS Utilities for integrating with YieldX Embedded Apps

Install

With npm:
npm install @yieldx/embed --save

With yarn
yarn add -E @yieldx/embed

Pure 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/postmate@1.5.2/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>