@yieldx/embed
TypeScript icon, indicating that this package has built-in type declarations

0.1.7-sky-update-readme.0 • Public • Published

@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>

Readme

Keywords

none

Package Sidebar

Install

npm i @yieldx/embed

Weekly Downloads

106

Version

0.1.7-sky-update-readme.0

License

none

Unpacked Size

16.3 kB

Total Files

9

Last publish

Collaborators

  • pseudosky