From a5f83052665db49b5df9a1e2471302d8b55a0346 Mon Sep 17 00:00:00 2001 From: Max Clayton Clowes Date: Mon, 25 Nov 2024 20:58:32 +0000 Subject: [PATCH 1/5] Bank feeds SDK page added, additional benefits --- blog/241124-bank-feeds-sdk.md | 11 ++++ docs/bank-feeds/bank-feeds-sdk.md | 102 +++++++++++++++++++++++++++++ docs/bank-feeds/overview.mdx | 10 ++- docs/bank-feeds/setup.md | 20 +++++- docs/expenses/overview.md | 2 +- docs/lending/overview.md | 2 +- docs/payables/overview.mdx | 2 +- sidebars/bank-feeds.js | 5 ++ src/styles/components/_images.scss | 10 +++ 9 files changed, 158 insertions(+), 6 deletions(-) create mode 100644 docs/bank-feeds/bank-feeds-sdk.md diff --git a/blog/241124-bank-feeds-sdk.md b/blog/241124-bank-feeds-sdk.md index 790381e3e..504d18ffb 100644 --- a/blog/241124-bank-feeds-sdk.md +++ b/blog/241124-bank-feeds-sdk.md @@ -2,6 +2,7 @@ title: "Launch your bank feed faster with Bank Feeds SDK" date: "2024-11-24" tags: ["Product", "Update", "Bank Feeds"] +image: "/img/updates/bank-feeds-bento.png" authors: mcclowes --- @@ -21,6 +22,16 @@ All of this is included in a single [low-code JavaScript component](https://www. 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. +## Who's this for? + +Anyone looking to build to Codat's Bank Feeds product should use this SDK. + +If you've already built your own user interface, consider migrating to take advantage of the new SDK's benefits and numerous upcoming features, including: + +- An embedded, improved mapping UI. +- Advanced features include support for integrating with multi-entity structures. +- Reduced maintenance as Bank Feeds SDK is always up to date. + ## The flow Once your user initiates the bank feeds setup process, engage our SDK to establish the feed in a few easy steps: diff --git a/docs/bank-feeds/bank-feeds-sdk.md b/docs/bank-feeds/bank-feeds-sdk.md new file mode 100644 index 000000000..88ba53c97 --- /dev/null +++ b/docs/bank-feeds/bank-feeds-sdk.md @@ -0,0 +1,102 @@ +--- +title: "Bank Feeds SDK" +description: "Understand the basics of using Bank Feeds API and learn how to perform the initial setup for the product" +displayed_sidebar: bankfeeds +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem" +import {IntegrationsList} from '@components/Integrations' +import {bankfeedsExternalMappingIntegrations, bankfeedsIntegrations} from '@components/Integrations/integrations' + +Building and launching a best-in-class bank feeds solution has never been easier than with our new Bank Feeds SDK. + + + +![Bank Feeds SDK features](/img/updates/bank-feeds-bento.png) + +## Overview + +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. + +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. + +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. + +## The flow + +Once your user initiates the bank feeds setup process, engage our SDK to establish the feed in a few easy steps: + +1. Call the [Create a company](/bank-feeds-api#/operations/create-company) endpoint to create a representation of your customer in Codat. +2. Get an access token for this company by calling the [Get company access token](/platform-api#/operations/get-company-access-token) endpoint. +3. Initialize the Bank Feeds SDK, passing the access token to the component. The SDK will direct your customer to select their accounting software and authorize access to it. +4. Use the SDK's `onConnection` callback function prop to call the [Create source accounts](/bank-feeds-api#/operations/create-batch-source-account) endpoint once authorized. The SDK will redirect your customer to map these source accounts to the relevant accounts in their accounting platform. +5. Use the SDK's `onFinish` callback function to manage the completion of the bank feeds setup flow once the accounts are mapped. + +If your user authorizes your access but doesn't complete the accounts setup, we'll bring them straight back to where they left off when they return to the flow. Once they're fully set up, you can use this component to allow them to reconfigure their accounts or set up additional accounts. + +We also recommend using our [Connections SDK](/auth-flow/optimize/connection-management) to allow users to reauthorize or revoke your access to their accounting software. Providing your customers with this control is mandated by integration partners. + +## 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. + +##### NPM +```sh +npm add @codat/sdk-bank-feeds-types +``` + +##### Yarn +```sh +yarn add @codat/sdk-bank-feeds-types +``` + +Then, 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"; + + 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 use the component in your solution as needed: + +```react + alert("onClose")} + onError={() => alert("onError")} + onConnection={() => alert("onConnection")} + onConnectionStarted={() => alert("onConnectionStarted")} + onFinish={() => alert("onFinish")} + options={{}} + /> +``` + + +--- + +## Read next + +* [Create the key elements](/bank-feeds/create-account) of the Codat infrastructure required to establish a bank feed. \ No newline at end of file diff --git a/docs/bank-feeds/overview.mdx b/docs/bank-feeds/overview.mdx index 4f3c0bd31..48035f24c 100644 --- a/docs/bank-feeds/overview.mdx +++ b/docs/bank-feeds/overview.mdx @@ -3,7 +3,7 @@ title: "Bank Feeds API" description: "Easily deploy an automated bank statement feed into your application to write bank transaction data into your customers' accounting software" sidebar_label: Bank Feeds API displayed_sidebar: bankfeeds -image: "/img/banners/social/bankfeeds.png" +image: "/img/updates/bank-feeds-bento.png" hide_title: true hide_description: true hide_table_of_contents: true @@ -28,6 +28,10 @@ import TabItem from "@theme/TabItem" Leverage our **Bank Feeds API** to simplify the deployment of bank feeds in your application. It creates the associated infrastructure for you and automates the upload of bank statements into accounting software used by your small and medium-sized business (SMB) customers. +
+ +![Bank Feeds SDK features](/img/updates/bank-feeds-bento.png) + ## Who is it for? Our Bank Feeds API makes it easy for banks, neobanks, corporate card issuers, and payment providers to ensure customers can access their bank transaction data within their accounting software. @@ -116,7 +120,9 @@ Once your SMB customer completes the authorization and account mapping process, ## Build with client libraries -Use our [comprehensive SDKs](/get-started/libraries) to kick-start and simplify your developers' journey deploying bank feeds in your application. +Our low-code [Bank Feeds SDK](/bank-feeds/create-account) lets you build a seamless, high-converting user experience, embedded right within your front-end application. + +In your backend code, you can use our [comprehensive SDKs](/get-started/libraries) to kick-start and simplify your developer journey deploying bank feeds in your application. The SDKs come in multiple languages and provide sample requests and responses for the full range of bank statement automation scenarios. diff --git a/docs/bank-feeds/setup.md b/docs/bank-feeds/setup.md index 466ec4d1a..a82bf3425 100644 --- a/docs/bank-feeds/setup.md +++ b/docs/bank-feeds/setup.md @@ -80,7 +80,25 @@ Codat supports a range of [webhook events](/using-the-api/webhooks/event-types) ## Client libraries -Use our comprehensive [Bank Feeds API library](/get-started/libraries) to kick-start and simplify your build. +### Frontend + +Our low-code [Bank Feeds SDK](/bank-feeds/create-account) lets you build a seamless, high-converting user experience, embedded right within your front-end application. + +##### NPM +```sh +npm add @codat/sdk-bank-feeds-types +``` + +##### Yarn +```sh +yarn add @codat/sdk-bank-feeds-types +``` + +[Read more...](/bank-feeds/create-account) + +### Backend + +For your bankend services, use our comprehensive [Bank Feeds API library](/get-started/libraries) to kick-start and simplify your build. Simply install the library in one of the supported languages and pass your base64-encoded API key to the constructor. diff --git a/docs/expenses/overview.md b/docs/expenses/overview.md index d3c5269b9..a99b834f1 100644 --- a/docs/expenses/overview.md +++ b/docs/expenses/overview.md @@ -177,7 +177,7 @@ When creating an expense transaction, allow your SMB customer to save a copy of ## Build with client libraries -Use our [comprehensive SDKs](/get-started/libraries) to kick-start and simplify your developers' journey automating the expense management process for your customers. The SDKs come in multiple languages and provide sample requests and responses for the full range of spend management scenarios. +Use our [comprehensive SDKs](/get-started/libraries) to kick-start and simplify your developer journey automating the expense management process for your customers. The SDKs come in multiple languages and provide sample requests and responses for the full range of spend management scenarios. diff --git a/docs/lending/overview.md b/docs/lending/overview.md index 84ec0efe6..897a6e344 100644 --- a/docs/lending/overview.md +++ b/docs/lending/overview.md @@ -141,7 +141,7 @@ Our Lending API empowers you with a host of features to help you streamline your ## Build with client libraries -Use our [comprehensive SDKs](/get-started/libraries) to kickstart and simplify your developers' journey automating the collection of your customers' financial data and making an assessment of a small business's financial health and performance. +Use our [comprehensive SDKs](/get-started/libraries) to kickstart and simplify your developer journey automating the collection of your customers' financial data and making an assessment of a small business's financial health and performance. Our Lending SDK comes in multiple languages and provides all the necessary methods to build your solution, enabling you to develop everything from a merchant capital product to loan writeback with just a single SDK. diff --git a/docs/payables/overview.mdx b/docs/payables/overview.mdx index 2f2b72ea1..1de969e8d 100644 --- a/docs/payables/overview.mdx +++ b/docs/payables/overview.mdx @@ -112,7 +112,7 @@ You can then display the updated list of bills to your customer so they can keep ## Build with client libraries -Use our [comprehensive SDKs](/get-started/libraries) to kick-start and simplify your developers' journey automating accounts payable. The SDKs come in multiple languages and provide sample requests and responses for the full range of accounts payable workflows. +Use our [comprehensive SDKs](/get-started/libraries) to kick-start and simplify your developer journey automating accounts payable. The SDKs come in multiple languages and provide sample requests and responses for the full range of accounts payable workflows. diff --git a/sidebars/bank-feeds.js b/sidebars/bank-feeds.js index a4e9f5088..3308413e4 100644 --- a/sidebars/bank-feeds.js +++ b/sidebars/bank-feeds.js @@ -16,6 +16,11 @@ module.exports = [ label: "Get started", id: "bank-feeds/setup", }, + { + type: "doc", + label: "Bank Feeds SDK", + id: "bank-feeds/bank-feeds-sdk", + }, { type: "doc", label: "Create account", diff --git a/src/styles/components/_images.scss b/src/styles/components/_images.scss index 642d12936..0c256b023 100644 --- a/src/styles/components/_images.scss +++ b/src/styles/components/_images.scss @@ -14,3 +14,13 @@ article .markdown { margin-bottom: 2em; } } + + +// Image zoom overlay +.medium-zoom-overlay { + z-index: 1000; +} + +.medium-zoom-image { + z-index: 1001; +} \ No newline at end of file From 45c24d4c3d4ae0739971b71334dd3064f6b63057 Mon Sep 17 00:00:00 2001 From: Polina <112084241+pzaichkina@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:39:16 +0000 Subject: [PATCH 2/5] Update 241124-bank-feeds-sdk.md --- blog/241124-bank-feeds-sdk.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/blog/241124-bank-feeds-sdk.md b/blog/241124-bank-feeds-sdk.md index 504d18ffb..f3237740b 100644 --- a/blog/241124-bank-feeds-sdk.md +++ b/blog/241124-bank-feeds-sdk.md @@ -24,13 +24,13 @@ This is supported by easier creation of many source accounts at once via our new ## Who's this for? -Anyone looking to build to Codat's Bank Feeds product should use this SDK. +Anyone looking to build to Codat's [Bank Feeds](/bank-feeds/overview) product should use this SDK. -If you've already built your own user interface, consider migrating to take advantage of the new SDK's benefits and numerous upcoming features, including: +If you've already built your own user interface, consider migrating to take advantage of the new SDK's benefits, including: -- An embedded, improved mapping UI. -- Advanced features include support for integrating with multi-entity structures. -- Reduced maintenance as Bank Feeds SDK is always up to date. +- An improved embedded mapping UI +- Advanced features, such as support for integrating with multi-entity company structures +- Reduced maintenance with a Bank Feeds SDK that is always up to date ## The flow From 5f9809a7e6a1411b6a1ce8c94092e92a61b542c8 Mon Sep 17 00:00:00 2001 From: Polina <112084241+pzaichkina@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:48:25 +0000 Subject: [PATCH 3/5] Update bank-feeds-sdk.md --- docs/bank-feeds/bank-feeds-sdk.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/bank-feeds/bank-feeds-sdk.md b/docs/bank-feeds/bank-feeds-sdk.md index 88ba53c97..b130311bc 100644 --- a/docs/bank-feeds/bank-feeds-sdk.md +++ b/docs/bank-feeds/bank-feeds-sdk.md @@ -1,6 +1,6 @@ --- title: "Bank Feeds SDK" -description: "Understand the basics of using Bank Feeds API and learn how to perform the initial setup for the product" +description: "See how your can simplify the deployment of the Bank Feeds product with our Bank Feeds SDK" displayed_sidebar: bankfeeds --- @@ -99,4 +99,4 @@ Then use the component in your solution as needed: ## Read next -* [Create the key elements](/bank-feeds/create-account) of the Codat infrastructure required to establish a bank feed. \ No newline at end of file +* [Create the key elements](/bank-feeds/create-account) of the Codat infrastructure required to establish a bank feed. From 3b4eaea98d888c33ba19ddfce4c1bd0ecd60879b Mon Sep 17 00:00:00 2001 From: Polina <112084241+pzaichkina@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:50:02 +0000 Subject: [PATCH 4/5] Update overview.mdx --- docs/bank-feeds/overview.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/bank-feeds/overview.mdx b/docs/bank-feeds/overview.mdx index 48035f24c..9aa205b60 100644 --- a/docs/bank-feeds/overview.mdx +++ b/docs/bank-feeds/overview.mdx @@ -120,9 +120,9 @@ Once your SMB customer completes the authorization and account mapping process, ## Build with client libraries -Our low-code [Bank Feeds SDK](/bank-feeds/create-account) lets you build a seamless, high-converting user experience, embedded right within your front-end application. +Our low-code [Bank Feeds SDK](/bank-feeds/create-account) lets you build a seamless high-converting user experience, embedded right within your frontend application. -In your backend code, you can use our [comprehensive SDKs](/get-started/libraries) to kick-start and simplify your developer journey deploying bank feeds in your application. +In your backend code, you can use our [comprehensive SDKs](/get-started/libraries) to kickstart and simplify your developer journey deploying bank feeds in your application. The SDKs come in multiple languages and provide sample requests and responses for the full range of bank statement automation scenarios. From fd26d338676016c9ab62752054e66126e67b0e3e Mon Sep 17 00:00:00 2001 From: Polina <112084241+pzaichkina@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:51:29 +0000 Subject: [PATCH 5/5] Update setup.md --- docs/bank-feeds/setup.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/bank-feeds/setup.md b/docs/bank-feeds/setup.md index a82bf3425..ffc717bfc 100644 --- a/docs/bank-feeds/setup.md +++ b/docs/bank-feeds/setup.md @@ -94,7 +94,7 @@ npm add @codat/sdk-bank-feeds-types yarn add @codat/sdk-bank-feeds-types ``` -[Read more...](/bank-feeds/create-account) +[Read more...](/bank-feeds/bank-feeds-sdk) ### Backend @@ -222,4 +222,4 @@ Next, you will create a Codat [company](../terms/company), its [connection](../t ## Read next -* [Create the key elements](/bank-feeds/create-account) of the Codat infrastructure required to establish a bank feed. \ No newline at end of file +* [Create the key elements](/bank-feeds/create-account) of the Codat infrastructure required to establish a bank feed.