# Steps for integrating Finswich Checkout via Flutter

* Visit the link to the [flutter package](https://pub.dev/packages/finswich_checkout)
* On the flutter package website they click the installing tab ![](/files/c3hJwdAXschq5YmLI8lV)
*  Please follow the instructions on the page. 
* After installing and adding the finswich package to your code, here is a sample dart code to complete your set up

```dart
import 'package:finswich_checkout/finswich_checkout.dart';
import 'package:flutter/widgets.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isCheckoutVisible = false;
//to pop out the checkout set isCheckoutVisible to true
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(),//the container should be replaced by your code

        /// Your widget should go here in place of container (your application)
        ischeckoutvisible
            ? FinswichIframe(
                balance: "your_user_balance",
                isCheckoutVisible: isCheckoutVisible,
                origin: "your_apps_origin",

                ///To get your origin use this [window.location.origin],
                publicKey:
                    "your_finswich_live_public_key",
                reference: "your_user_reference",
                refreshUI: () {
                  setState(() {});
                },
              )
            : const SizedBox(),
      ],
    );
  }
}
```

The table below helps to explain the objects passed to the inline JS during initialization&#x20;

<table data-full-width="true"><thead><tr><th>Key</th><th width="252.66666666666669">Description </th><th>Type</th></tr></thead><tbody><tr><td>reference</td><td>This is your user's reference on your platform </td><td>String</td></tr><tr><td>public_key</td><td>Your live public key from Finswich app</td><td>String</td></tr><tr><td>balance</td><td>the user's balance on your app</td><td>Number </td></tr><tr><td>origin</td><td>your whitelisted IP saved on the Finswich platform </td><td>String</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fuspay.us/payment-and-utilities/plugin-frontend/steps-for-integrating-finswich-checkout-via-flutter.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.