Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions blog/241124-bank-feeds-sdk.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ Building and launching a best-in-class bank feeds solution has never been easier

## What's new?

Our new [Bank Feeds SDK](https://www.npmjs.com/package/@codat/sdk-bank-feeds-types) brings together all the complex pieces to create a simple Bank Feeds setup experience.
Our new [Bank Feeds SDK](https://www.npmjs.com/package/@codat/sdk-link-types) brings together all the complex pieces to create a simple Bank Feeds setup experience.

It leverages our [Link SDK](/auth-flow/authorize-embedded-link) to allow your users to quickly and securely share access to their accounting software. It also enables them to set up the mapping between your accounts and the accounts in their software in one seamless flow.

All of this is included in a single [low-code JavaScript component](https://www.npmjs.com/package/@codat/sdk-bank-feeds-types). Our rich configuration properties allow your application to interact with the SDK and customize text and branding in a way that creates a trusted, compelling experience.
All of this is included in a single [low-code JavaScript component](https://www.npmjs.com/package/@codat/sdk-link-types). Our rich configuration properties allow your application to interact with the SDK and customize text and branding in a way that creates a trusted, compelling experience.

This is supported by easier creation of many source accounts at once via our new batch [Create source accounts](/bank-feeds-api#/operations/create-batch-source-account) endpoint.

Expand Down Expand Up @@ -54,14 +54,14 @@ We also recommend using our [Connections SDK](/auth-flow/optimize/connection-man

## How to get started?

You can access the SDK on [NPM](https://www.npmjs.com/package/@codat/sdk-bank-feeds-types). We recommend all clients already using our [Bank Feeds](/bank-feeds/overview) product to migrate to the Bank Feeds SDK.
You can access the SDK on [NPM](https://www.npmjs.com/package/@codat/sdk-link-types). We recommend all clients already using our [Bank Feeds](/bank-feeds/overview) product to migrate to the Bank Feeds SDK.

First, create a component which initializes the SDK:

```react
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import { CodatBankFeedsProps, initializeCodatBankFeeds } from "@codat/sdk-bank-feeds-types";
import { CodatBankFeedsProps, initCodatBankFeeds } from "@codat/sdk-link-types/bank-feeds";

const CodatBankFeeds: React.FC<CodatBankFeedsProps> = (props: CodatBankFeedsProps) => {
const [componentMount, setComponentMount] = useState<HTMLDivElement | null>(
Expand All @@ -71,7 +71,7 @@ First, create a component which initializes the SDK:
useEffect(() => {
const target = componentMount;
if (target && target.children.length === 0) {
initializeCodatBankFeeds(target, props);
initCodatBankFeeds(target, props);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [componentMount]);
Expand Down
2 changes: 1 addition & 1 deletion code_utils/docker/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@codat/sync-for-expenses": "^*",
"@codat/sync-for-payables": "^*",
"@codat/sync-for-payroll": "^*",
"@codat/sdk-connections": "^*",
"@codat/sdk-link-types": "^*",
"axios": "^1.0.0"
},
"devDependencies": {
Expand Down
20 changes: 10 additions & 10 deletions docs/auth-flow/optimize/connection-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,9 +153,9 @@ To display the origins you previously registered for your instance, use the [Get

:::tip Install the npm package

Take advantage of our [npm package](https://www.npmjs.com/package/@codat/sdk-connections) so you don't have to manually import and maintain type definitions. You will benefit from it the most if you are using Typescript.
Take advantage of our [npm package](https://www.npmjs.com/package/@codat/sdk-link-types) so you don't have to manually import and maintain type definitions. You will benefit from it the most if you are using Typescript.

`$ npm i -S @codat/sdk-connections`
`$ npm i -S @codat/sdk-link-types`

:::

Expand All @@ -180,7 +180,7 @@ You can copy and paste the example <a href="https://github.com/codatio/sdk-conne
import {
DisconnectCallbackArgs,
ErrorCallbackArgs,
} from "@codat/sdk-connections";
} from "@codat/sdk-link-types/connections";

import { CodatConnections } from "./components/CodatConnections";
import { useState } from "react";
Expand Down Expand Up @@ -225,7 +225,7 @@ export const ConnectionManagement = ({
- Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src, style-src, font-src, connect-src, img-src`).
- Add `unsafe-inline` to `style-src`. Don't use a hash because this can change at any time without warning.

4. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-connections`. Otherwise, delete the type-related code in the snippets.
4. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type-related code in the snippets.

</TabItem>

Expand Down Expand Up @@ -263,7 +263,7 @@ import {
DisconnectCallbackArgs,
ErrorCallbackArgs,
ReconnectCallbackArgs,
} from "@codat/sdk-connections";
} from "@codat/sdk-link-types/connections";

import { CodatConnections } from "./components/CodatConnections";
import Image from "next/image";
Expand Down Expand Up @@ -305,7 +305,7 @@ export default function Home() {
- Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src, style-src, font-src, connect-src, img-src`).
- Add `unsafe-inline` to `style-src`. Do _not_ use a hash because this can change at any time without warning.

4. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-connections`. Otherwise, delete the type-related code in the snippets.
4. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type-related code in the snippets.

</TabItem>

Expand Down Expand Up @@ -375,7 +375,7 @@ const openModal = () => {
- Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src, style-src, font-src, connect-src, img-src`).
- Add `unsafe-inline` to `style-src`. Do _not_ use a hash because this can change at any time without warning.

5. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-connections`. Otherwise, delete the type-related code in the snippets.
5. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type-related code in the snippets.

</TabItem>

Expand Down Expand Up @@ -445,7 +445,7 @@ onError(error) {
- Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src, style-src, font-src, connect-src, img-src`).
- Add `unsafe-inline` to `style-src`. Do _not_ use a hash because this can change at any time without warning.

5. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-connections`. Otherwise, delete the type-related code in the snippets.
5. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type-related code in the snippets.

</TabItem>

Expand Down Expand Up @@ -498,7 +498,7 @@ We suggest wrapping the `CodatConnections` component in a modal so that you can
- Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src, style-src, font-src, connect-src, img-src`).
- Add `unsafe-inline` to `style-src`. Do _not_ use a hash because this can change at any time without warning.

5. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-connections`. Otherwise, delete the type-related code in the snippets.
5. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type-related code in the snippets.

</TabItem>

Expand Down Expand Up @@ -563,7 +563,7 @@ We suggest wrapping the `CodatConnections` component in a modal so that you can
- Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src, style-src, font-src, connect-src, img-src`).
- Add `unsafe-inline` to `style-src`. Do _not_ use a hash because this can change at any time without warning.

5. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-connections`. Otherwise, delete the type-related code in the snippets.
5. **If you are using TypeScript**, extend your type declarations with our types by installing the package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type-related code in the snippets.

</TabItem>

Expand Down
16 changes: 8 additions & 8 deletions docs/bank-feeds/bank-feeds-sdk.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ Building and launching a best-in-class bank feeds solution has never been easier

## Overview

Our new [Bank Feeds SDK](https://www.npmjs.com/package/@codat/sdk-bank-feeds-types) brings together all the complex pieces required to create a simple Bank Feeds setup experience.
Our new [Bank Feeds SDK](https://www.npmjs.com/package/@codat/sdk-link-types) brings together all the complex pieces required to create a simple Bank Feeds setup experience.

It leverages our [Link SDK](/auth-flow/authorize-embedded-link) to allow your users to quickly and securely share access to their accounting software. It also enables them to set up the mapping between your accounts and the accounts in their software in one seamless flow.

All of this is included in a single low-code JavaScript component (available on [NPM](https://www.npmjs.com/package/@codat/sdk-bank-feeds-types)). Its rich configuration properties allow your application to interact with the SDK and customize text and branding in a way that creates a trusted and compelling user experience.
All of this is included in a single low-code JavaScript component (available on [NPM](https://www.npmjs.com/package/@codat/sdk-link-types)). Its rich configuration properties allow your application to interact with the SDK and customize text and branding in a way that creates a trusted and compelling user experience.

Codat supports this by providing easier creation of many source accounts at once via our new batch [Create source accounts](/bank-feeds-api#/operations/create-batch-source-account) endpoint.

Expand All @@ -48,26 +48,26 @@ We also recommend using our [Connections SDK](/auth-flow/optimize/connection-man

## Get started

You can access the SDK on [NPM](https://www.npmjs.com/package/@codat/sdk-bank-feeds-types). We recommend all clients already using our [Bank Feeds](/bank-feeds/overview) product to migrate to the Bank Feeds SDK.
You can access the SDK on [NPM](https://www.npmjs.com/package/@codat/sdk-link-types). We recommend all clients already using our [Bank Feeds](/bank-feeds/overview) product to migrate to the Bank Feeds SDK.

##### NPM

```sh
npm add @codat/sdk-bank-feeds-types
npm add @codat/sdk-link-types/bank-feeds
```

##### Yarn

```sh
yarn add @codat/sdk-bank-feeds-types
yarn add @codat/sdk-link-types/bank-feeds
```

Create a component which initializes the SDK:

```react
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";
import { CodatBankFeedsProps, initializeCodatBankFeeds } from "@codat/sdk-bank-feeds-types";
import { CodatBankFeedsProps, initCodatBankFeeds } from "@codat/sdk-link-types/bank-feeds";

const CodatBankFeeds: React.FC<CodatBankFeedsProps> = (props: CodatBankFeedsProps) => {
const [componentMount, setComponentMount] = useState<HTMLDivElement | null>(
Expand All @@ -77,7 +77,7 @@ Create a component which initializes the SDK:
useEffect(() => {
const target = componentMount;
if (target && target.children.length === 0) {
initializeCodatBankFeeds(target, props);
initCodatBankFeeds(target, props);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [componentMount]);
Expand Down Expand Up @@ -105,7 +105,7 @@ Use the component in your solution as needed:

**Conditional steps**

- **If you're using TypeScript**, extend your type declarations with our types by installing the types package using `npm install --save-dev @codat/sdk-bank-feeds-types`. Otherwise, delete the type-related code in the snippets.
- **If you're using TypeScript**, extend your type declarations with our types by installing the types package using `npm install --save-dev @codat/sdk-link-types/bank-feeds`. Otherwise, delete the type-related code in the snippets.
- **If you're using content security policy (CSP) headers**, edit these headers:
- Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
- Add `unsafe-inline` to `style-src`. Do _not_ use a hash because this can change at any time without warning.
Expand Down
4 changes: 2 additions & 2 deletions docs/bank-feeds/setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,13 +89,13 @@ Our low-code [Bank Feeds SDK](/bank-feeds/create-account) lets you build a seaml
##### NPM

```sh
npm add @codat/sdk-bank-feeds-types
npm add @codat/sdk-link-types/bank-feeds
```

##### Yarn

```sh
yarn add @codat/sdk-bank-feeds-types
yarn add @codat/sdk-link-types/bank-feeds
```

[Read more...](/bank-feeds/bank-feeds-sdk)
Expand Down
Loading