diff --git a/docs/payables/guides/bill-pay/introduction.md b/docs/payables/guides/bill-pay/introduction.md index a3032ab566..c93688e173 100644 --- a/docs/payables/guides/bill-pay/introduction.md +++ b/docs/payables/guides/bill-pay/introduction.md @@ -13,11 +13,10 @@ This guide is for developers building a bill payment solution or other applicati 🎯 Our _bill pay demo app_ showcases a simple AP automation workflow, built using standard endpoints of [Bill Pay](/payables/overview). It help you understand the core features of a bill payment solution and how you can build your own solutions to streamline and automate the Accounts Payable (AP). -🛠️ The demo app is built using Next.js and React. You can use a hosted version or run the code locally. The code is stored in a [public GitHub repository](https://github.com/codatio/demo-bill-pay). [Hosted Link](/auth-flow/authorize-hosted-link) is used for the authorization flow. +🛠️ The demo app is built using Next.js and React. You can clone the code and run it locally. The code is stored in a [public GitHub repository](https://github.com/codatio/demo-bill-pay). [Hosted Link](/auth-flow/authorize-hosted-link) is used for the authorization flow. ⏳ Estimated time to complete: -- 5–10 minutes to try out the hosted version of the app - 20–30 minutes to complete the full guide and run the app locally ### What you need @@ -28,9 +27,9 @@ Your account will include a US sandbox company containing sample data. You can o ### Aims of the guide -This guide aims to help you implement your own bill payment solution using Codat's API. It walks you through [using the hosted version of the demo app](/payables/guides/bill-pay/use-bill-pay-demo-app) with data from a QuickBooks Online sandbox company. +This guide aims to help you implement your own bill payment solution using Codat's API. It walks you through cloning the repository and [running the demo app on your local machine](/payables/guides/bill-pay/run-demo-app-locally) with data from a QuickBooks Online sandbox company. -After using the hosted version, you can clone the repository and [run the demo app on your local machine](/payables/guides/bill-pay/run-demo-app-locally). Finally, you can learn [how the demo app works](/payables/guides/bill-pay/how-the-demo-app-works). +Once you've run the app, you can learn [how the demo app works](/payables/guides/bill-pay/how-the-demo-app-works). ### About the demo app @@ -58,4 +57,4 @@ You've understood the functionality of the bill pay demo app and what you'll nee ### Read next -- [Use the hosted app](/payables/guides/bill-pay/use-bill-pay-demo-app) to discover bill pay +- [Run the app locally](/payables/guides/bill-pay/run-demo-app-locally) to discover bill pay diff --git a/docs/payables/guides/bill-pay/run-demo-app-locally.md b/docs/payables/guides/bill-pay/run-demo-app-locally.md index ac68b74ad6..7754d7f317 100644 --- a/docs/payables/guides/bill-pay/run-demo-app-locally.md +++ b/docs/payables/guides/bill-pay/run-demo-app-locally.md @@ -88,7 +88,7 @@ Next, set the redirect URL defined in the demo app as the Codat Redirect URL. Th 7. Click **Get Started** and follow the on-screen instructions. -Like the hosted app, you can now create a company, connect to your sandbox QuickBooks Online company, and view and pay bills. +You can now create a company, connect to your sandbox QuickBooks Online company, and view and pay bills. ### Review write history diff --git a/docs/payables/guides/bill-pay/use-bill-pay-demo-app.md b/docs/payables/guides/bill-pay/use-bill-pay-demo-app.md deleted file mode 100644 index 225b815b69..0000000000 --- a/docs/payables/guides/bill-pay/use-bill-pay-demo-app.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: "Use the hosted app" -sidebar_label: "Use the hosted app" -description: "Use the hosted demo app to connect to sandbox data, then view and pay bills. To close the loop, see how payments are reconciled in QuickBooks" ---- - -### 🚀 In this section, you will: - -- Connect the demo app to QuickBooks Online -- View bills -- Pay a bill - -### Connect the demo app to QuickBooks Online - -1. - Open the demo app - - . -2. On the **Bill Pay** start screen, click **Get Started**. -3. Create a new company. -4. Select the **Intuit QuickBooks Sandbox** integration. -5. In the login dialog, enter your Intuit account credentials and select any sandbox QuickBooks Online company. - -6. The **Connection Successful** screen is displayed once you've connected your accounting software. Click **Launch Bills Portal** to open the demo app. - - ![bill-pay_launch-bills-portal-screen](/img/use-cases/bill-pay/bill-pay_launch-bills-portal-screen.png) - -For more details about how the app creates a connection to QuickBooks Online via Hosted Link, see [Understand the auth flow](/payables/guides/bill-pay/how-the-demo-app-works#understand-the-auth-flow). - -### View bills - -Once you've connected your accounting software, you'll see a table of open and paid bills from the company you just connected. These are read from your sandbox QuickBooks Online company and ordered by issue date. - -![bill-pay_app-view](/img/use-cases/bill-pay/bill-pay_app-view.png "Bill pay demo app UI") - -1. If you can only see paid bills, use the **View unpaid bills only** toggle to filter the list. -2. Click **View** next to an unpaid bill to open the **Bill** view. - - This contains additional information about the bill, including the bill number, due date, and line items (if any). - - ![bill-pay_invoice-detail-dialog](/img/use-cases/bill-pay/bill-pay_bill-detail-dialog-renamed.png "The Bill view shows additional information about an unpaid bill.") - -3. Click **Pay Bill** to make a payment against the bill. - -### Pay a bill - -Next, you can make a payment against a bill. When you do so, the app automatically writes a bill payment to the accounting software—in this case, QuickBooks Online. The payment is then reconciled against the source bill, which is marked as _paid_. - -1. In the **Bill Payment** view, choose an account from the **Account name** dropdown. This is the account in QuickBooks Online to which you want to assign the bill payment. - - ![bill-pay_payment-view](/img/use-cases/bill-pay/bill-pay_payment-view.png "The Bill Payment view with the Account Name field highlighted.") - - :::info Accounts displayed - Only banking accounts in the same currency as the bill are displayed. - ::: - -2. (Optional) Enter mock payment card details. - - :::info Card details - We've included the card details section to show how Codat can be used with other systems, such as payment providers, to enhance bill payment apps. - ::: - -3. Click **Pay Bill** to pay the total amount of the bill. - -You've now seen the app in action by viewing and paying bills. - -### See the payment in QuickBooks - -Optionally, you can check that your payment was reconciled correctly in QuickBooks Online. Bill payments are initially in a `pending` status, but this should change to `paid` after around a minute. - -:::info Asynchronous write operation - -In Codat, create and update operations are asynchronous, which means that writing data to an accounting software returns a write operation in `Pending` status. You can [read more](/using-the-api/push) about CUD operations in Codat. Our webhooks allow your solution to be notified of a [write operation change](/using-the-api/push#monitor-the-status-of-your-operation). - -::: - -1. Sign in to the Intuit Developer Portal. -2. From the **API Docs & Tools** tab, open the sandbox company you connected to the demo app. -3. In the sidebar, select **Get paid & pay**. -4. Check the status of the bill you paid in the demo app: - 1. Select **Bills > Paid**. - 2. Select the bill and check the payment status is **Paid**. - - ![bill-pay_bill-status-paid](/img/use-cases/bill-pay/bill-pay_qbo-sandbox-company-bill-status-of-paid.png "A bill in QBO with a status of PAID.") - -5. Check which bank account the payment was reconciled to: - 1. Go back to **Bills > Paid**. - 2. In the **Action** column, select **Show payments** to reveal the payment row. - 3. Click **View details** to open the bill payment that corresponds to the bill. - 4. Check the **Bank/Credit account** dropdown contains the account you assigned the payment to. - - ![bill-pay_bill-payment-status](/img/use-cases/bill-pay/bill-pay_bill-payment-mapping-account.png "A bill payment in QBO showing the Checking account in the Bank/Credit account dropdown.") - -### Recap - -You've used the demo app to view bills and make a payment. You also checked the source data in QuickBooks Online to understand the payment reconciliation process. - -
- -### Read next - -Now that you've tried out the demo app, you can: - -- [Run the bill pay demo app locally](/payables/guides/bill-pay/run-demo-app-locally). -- Learn more about [how the demo app works](/payables/guides/bill-pay/how-the-demo-app-works). diff --git a/redirects.config.js b/redirects.config.js index 4aeb7111a7..3839d3025b 100644 --- a/redirects.config.js +++ b/redirects.config.js @@ -152,7 +152,7 @@ var prodRework = [ }, { from: "/guides/bill-pay/use-bill-pay-demo-app", - to: "/payables/guides/bill-pay/use-bill-pay-demo-app", + to: "/payables/guides/bill-pay/run-demo-app-locally", }, { from: "/guides/invoice-finance/introduction", @@ -583,7 +583,7 @@ module.exports = { }, { from: "/accounting-api/guides/bill-pay/use-bill-pay-demo-app", - to: "/payables/guides/bill-pay/use-bill-pay-demo-app", + to: "/payables/guides/bill-pay/run-demo-app-locally", }, { from: "/accounting-api/guides/bill-pay/run-demo-app-locally", diff --git a/sidebars/payables.js b/sidebars/payables.js index 67f2a7f05d..ac86155a98 100644 --- a/sidebars/payables.js +++ b/sidebars/payables.js @@ -58,7 +58,6 @@ module.exports = [ id: "payables/guides/bill-pay/introduction", label: "Introduction", }, - "payables/guides/bill-pay/use-bill-pay-demo-app", "payables/guides/bill-pay/run-demo-app-locally", "payables/guides/bill-pay/how-the-demo-app-works", ],