diff --git a/blog/241120-onconnectionstarted.md b/blog/241120-onconnectionstarted.md index f5be0b1bf..091b67d57 100644 --- a/blog/241120-onconnectionstarted.md +++ b/blog/241120-onconnectionstarted.md @@ -23,6 +23,6 @@ All clients using Link SDK to deploy the auth flow in their application. ## How to get started? -To implement an auth flow with our Link SDK, see [Get started with Link SDK](https://docs.codat.io/auth-flow/authorize-embedded-link). +To implement an auth flow with our Link SDK, see [Get started with Link SDK](/auth-flow/authorize-embedded-link). -If you are already using Link SDK, add this callback into your component. See [Use callback functions](https://docs.codat.io/auth-flow/authorize-embedded-link) for more details. +If you are already using Link SDK, add this callback into your component. See [Use callback functions](/auth-flow/authorize-embedded-link) for more details. diff --git a/blog/241124-bank-feeds-sdk.md b/blog/241124-bank-feeds-sdk.md new file mode 100644 index 000000000..62a761dfd --- /dev/null +++ b/blog/241124-bank-feeds-sdk.md @@ -0,0 +1,84 @@ +--- +title: "Launch your bank feed faster with Bank Feeds SDK" +date: "2024-11-24" +tags: ["Product", "Update", "Bank Feeds"] +authors: mcclowes +--- + +Building and launching a best-in-class bank feeds has never been easier than with our new Bank Feeds SDK. + + + +![Bank Feeds SDK features](/img/updates/bank-feeds-bento.png) + +## What's new? + +Our new [Bank Feeds SDK](https://www.npmjs.com/package/@codat/sdk-bank-feeds-types) brings together all the complex pieces of creating a simple Bank Feeds setup experience. + +It allows your users to securely share access to their accounting software (through our [Link SDK](auth-flow/authorize-embedded-link)) and set up the mapping between your accounts and the relevant ones 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 config props allow your application to interact with the SDK and customize text and branding to create a trusted, compelling experience. + +This is supported by easier creation of source accounts via our new [batch source accounts endpoint](https://docs.codat.io/bank-feeds-api#/operations/create-batch-source-account) allowing you to create many source accounts at once. + +## The flow + +1. Your user clicks that they want to set up bank feeds +2. [Create a company](https://docs.codat.io/bank-feeds-api#/operations/create-company) for their business +3. [Get an access token](https://docs.codat.io/platform-api#/operations/get-company-access-token) for that company +4. Initialize the Bank Feeds SDK (passing in the access token) +5. You user selects their accounting software and authorizes +6. Use the `onConnection` callback function prop to [create source accounts](https://docs.codat.io/bank-feeds-api#/operations/create-batch-source-account) at the right time +7. Your user is redirected to map these source accounts to the relevant accounts in their accounting platform. +8. Use the `onFinish` callback function + +If your user authorizes but doesn't complete setup, we'll bring them straight back to where they left off. + +Once they're fully set up, you can use this component to allow them to reconfigure their accounts or set up any additional accounts. + +You should also use our [Connection SDK](http://localhost:3000/auth-flow/optimize/connection-management) to allow users to reconnect or disconnect access to their accounting software. This is mandated by integratino partners. + +## How to get started? + +You can access the SDK on [NPM](https://www.npmjs.com/package/@codat/sdk-bank-feeds-types). + +You should create a component which initializes the compoenent: + +```react +import React, { useEffect, useState } from "react"; +import ReactDOM from "react-dom/client"; +import { CodatBankFeedsProps, initializeCodatBankFeeds } from "@codat/sdk-bank-feeds-types"; + +const CodatBankFeeds: React.FC = (props: CodatBankFeedsProps) => { + const [componentMount, setComponentMount] = useState( + null + ); + + useEffect(() => { + const target = componentMount; + if (target && target.children.length === 0) { + initializeCodatBankFeeds(target, props); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [componentMount]); + + return ( +
+ ); +}; +``` + +Then you can then use that component where needed: + +```react + alert("onClose")} + onError={() => alert("onError")} + onConnection={() => alert("onConnection")} + onConnectionStarted={() => alert("onConnectionStarted")} + onFinish={() => alert("onFinish")} + options={{}} +/> +``` \ No newline at end of file diff --git a/src/styles/components/_images.scss b/src/styles/components/_images.scss index 91d1a7b35..642d12936 100644 --- a/src/styles/components/_images.scss +++ b/src/styles/components/_images.scss @@ -9,7 +9,7 @@ article .markdown { border-radius: 6px; text-align: center; width: auto; - max-height: 450px; + max-height: 60vh; margin: auto; margin-bottom: 2em; } diff --git a/static/img/updates/bank-feeds-bento.png b/static/img/updates/bank-feeds-bento.png new file mode 100644 index 000000000..6cdd1bb04 --- /dev/null +++ b/static/img/updates/bank-feeds-bento.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:204885aa0e81cea646dc1d88b91f26b636d51fa51c1c5221426167ec8035226a +size 334151