### Install Aerosync Web SDK for Capacitor

Source: https://dev.aero.inc/v1.1/docs/capacitor-example

Installs the Aerosync web SDK within the web app directory of a Capacitor project. This is a prerequisite for integrating the Aerosync UI widget.

```bash
npm i aerosync-web-sdk
```

--------------------------------

### iOS Setup: Install CocoaPods Dependencies

Source: https://dev.aero.inc/v1.1/docs/react-native-sdk

Navigates to the 'ios' directory and installs native dependencies using CocoaPods. This step is crucial for iOS projects to ensure all native modules are correctly linked.

```bash
cd ios
pod install
```

--------------------------------

### Initialize AeroSync Widget with JavaScript

Source: https://dev.aero.inc/v1.1/docs/cdn-v1-and-earlier

Example of initializing the AeroSync widget using JavaScript, showcasing the necessary parameters for widget setup. This includes essential configurations like token, element ID, dimensions, and environment, along with optional settings for advanced features.

```javascript
import AeroSyncWidget from 'aero-sync-widget';

const widgetConfig = {
  token: 'YOUR_AEROSYNC_TOKEN',
  elementId: 'aero-widget-container',
  iframeTitle: 'AeroSync Payment Widget',
  width: '375px',
  height: '688px',
  environment: 'sandbox',
  consumerId: 'YOUR_CONSUMER_ID',
  deeplink: '', // Set to your mobile app's deeplink if applicable
  handleOAuthManually: false,
  targetDocument: null, // or a ShadowRoot instance
  zIndex: '1000',
  manualLinkOnly: false,
  embeddedBankView: {
    elementId: 'embedded-bank-view-container',
    width: '572px',
    height: '348px',
    onEmbedded: function() {
      console.log('Embedded bank view is ready!');
    }
  },
  style: {
    bgColor: '#FFFFFF',
    opacity: 1
  }
};

AeroSyncWidget.init(widgetConfig);

```

--------------------------------

### Initialize AeroSync Widget with TypeScript

Source: https://dev.aero.inc/v1.1/docs/cdn-v1-and-earlier

Example of initializing the AeroSync widget using TypeScript, demonstrating the required and optional parameters. This includes setting up authentication tokens, element IDs, dimensions, environment, and optional features like deeplinking and manual OAuth handling.

```typescript
import AeroSyncWidget from 'aero-sync-widget';

const widgetConfig = {
  token: 'YOUR_AEROSYNC_TOKEN',
  elementId: 'aero-widget-container',
  iframeTitle: 'AeroSync Payment Widget',
  width: '375px',
  height: '688px',
  environment: 'sandbox',
  consumerId: 'YOUR_CONSUMER_ID',
  deeplink: '', // Set to your mobile app's deeplink if applicable
  handleOAuthManually: false,
  targetDocument: null, // or a ShadowRoot instance
  zIndex: '1000',
  manualLinkOnly: false,
  embeddedBankView: {
    elementId: 'embedded-bank-view-container',
    width: '572px',
    height: '348px',
    onEmbedded: () => {
      console.log('Embedded bank view is ready!');
    }
  },
  style: {
    bgColor: '#FFFFFF',
    opacity: 1
  }
};

AeroSyncWidget.init(widgetConfig);

```

--------------------------------

### Install Aerosync Web NPM SDK v1.1.3

Source: https://dev.aero.inc/v1.1/docs/web-npm-sdk

This command installs version 1.1.3 of the Aerosync Web NPM SDK using npm. Ensure you have Node.js and npm installed on your system.

```bash
npm i aerosync-web-sdk@1.1.3
```

--------------------------------

### POST /preauthTransaction

Source: https://dev.aero.inc/v1.1/docs/api-quick-start

Creates a preauthorized transaction. This endpoint stores transaction details that must be captured later by an employee. User's actively linked bank accounts can be fetched using the GET /user endpoint, and the bankAccountId can be used here. Tipping and invoicing information can be added via the attributes in the request body.

```APIDOC
## POST /preauthTransaction

### Description
Creates a preauthorized transaction. This endpoint stores transaction details that must be captured later by an employee. User's actively linked bank accounts can be fetched using the GET /user endpoint, and the bankAccountId can be used here. Tipping and invoicing information can be added via the attributes in the request body.

### Method
POST

### Endpoint
/preauthTransaction

### Parameters
#### Query Parameters
None

#### Request Body
- **merchantId** (string) - Required - The ID of the merchant.
- **bankAccountId** (string) - Required - The ID of the bank account to associate with the transaction.
- **amount** (string) - Required - The transaction amount.
- **attributes** (object) - Optional - Additional details for tipping and invoicing.
  - **tipAmount** (string) - Optional - The tip amount.
  - **invoiceNumber** (string) - Optional - The invoice number.

### Request Example
```json
{
  "merchantId": "1235",
  "bankAccountId": "1234567",
  "amount": "10.00",
  "attributes": {
    "tipAmount": "2.00",
    "invoiceNumber": "INV-001"
  }
}
```

### Response
#### Success Response (200)
- **transactionId** (string) - The ID of the created preauthorized transaction.
- **status** (string) - The status of the transaction (e.g., "pending_capture").

#### Response Example
```json
{
  "transactionId": "pa_tx_abcdef123456",
  "status": "pending_capture"
}
```
```

--------------------------------

### React Native: Setup AeroSync Embedded View and Widget

Source: https://dev.aero.inc/v1.1/docs/embedded-view-1

This snippet demonstrates the basic setup for displaying the AeroSync embedded view and triggering the AeroSync widget in a React Native application. It includes state management for widget visibility and handling callbacks for various events like bank selection, widget loading, closing, success, and errors. Dependencies include 'aerosync-react-native-sdk', 'react-native-toast-message', and 'react-native-modal'.

```tsx
import {
  AeroSyncWidget,
  Environment,
  SuccessEventType,
  WidgetEventType,
  AeroSyncEmbeddedView,
  WidgetEventBankClickType
} from "aerosync-react-native-sdk";

import { SafeAreaView, ScrollView, StyleSheet, Text, View } from "react-native";
import { useState } from "react";
import Toast from "react-native-toast-message";
import Modal from 'react-native-modal';
import { useStore } from "../context/StoreContext";
import { useThemeContext } from "../context/ThemeContext";

export default function PaymentScreen() {
  const { widgetConfig } = useStore();
  const { isDarkTheme } = useThemeContext();
  
  // State to control whether the widge is shown
  const [isWidgetEnabled, setIsWidgetEnabled] = useState(false);
  
  // Stores the stateCode returned from embedded view for initializing the widget
  const [embeddedStateCode, setEmbeddedStateCode] = useState('');

  // Determine widget theme based on app theme
  const currentTheme = isDarkTheme ? 'dark' : 'light';

  // Deeplink scheme used for routing back from external services
  const DEEP_LINK = 'syncroVibeReactCli://';

  // --- Callback: Widget loaded successfully
  const onWidgetLoad = () => {
    console.log('Widget loaded');
  };

  // --- Callback: Widget was closed (either manually or automatically)
  const onWidgetClose = () => {
    console.log('Widget closed');
    setIsWidgetEnabled(false);  // Hide widget modal
  };

  // --- Callback: User successfully linked their bank and widget closed
  const onWidgetSuccess = (event: SuccessEventType) => {
    console.log('Bank linking successful', event);
    setIsWidgetEnabled(false);  // Hide widget modal

    // Show a toast to inform the user of success(optional)
    Toast.show({
      type: 'success',
      text1: 'Bank linked successfully!',
    });
  };

  // --- Callback: Fired on every widget event
  const onWidgetEvent = (event: WidgetEventType) => {
    console.log('Widget event:', event);
  };

  // --- Callback: Widget encountered an error
  const onWidgetError = (event: string) => {
    console.log('Widget error:', event);
  };

  // --- Callback: User tapped a bank in the embedded view
  const onEmbeddedBankClick = (event: WidgetEventBankClickType) => {
    // Store stateCode and show the widget modal
    // Required to properly initiate the full bank linking flow
    if (event.stateCode) {
      setEmbeddedStateCode(event.stateCode);
      setIsWidgetEnabled(true);
    }
  };

  // --- Callback: Embedded view loaded successfully
  const onEmbeddedLoad = () => {
    console.log('Embedded view loaded');
  };

  // --- Callback: Embedded view encountered an error
  const onEmbeddedError = (event: string) => {
    console.log('Embedded view error:', event);
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      
      {/* 
  			Full-screen modal to display the AeroSync widget after a bank is selected.
  			This modal is optional — you can customize or replace it with your own 
        layout/styling as needed.
			*/}
      <Modal
        style={styles.modal}
        isVisible={isWidgetEnabled}
        propagateSwipe
        animationIn="slideInUp"
        animationOut="slideOutDown"
        animationInTiming={600}
        animationOutTiming={600}
      >
        {/* AeroSync Widget: bank linking process */}
        <AeroSyncWidget 
          stateCode={embeddedStateCode}
          onLoad={onWidgetLoad}
          onError={onWidgetError}
          onClose={onWidgetClose}
          onEvent={onWidgetEvent}
          onSuccess={onWidgetSuccess}
          token={widgetConfig!.token}
          deeplink={DEEP_LINK}
          theme={currentTheme}
          consumerId={widgetConfig?.configurationId}
          environment={widgetConfig?.environment!}
          customWebViewProps={{
            style: { marginTop: 30, backgroundColor: isDarkTheme ? '#000000' : '#FFFFFF' }
          }}
        />
      </Modal>

      {/* Main content area */}
      <ScrollView>
        <View style={styles.container}>
          {/* AeroSync Embedded View: displays the list of banks */}
          <AeroSyncEmbeddedView
            onLoad={onEmbeddedLoad}
            onError={onEmbeddedError}
            onBankClick={onEmbeddedBankClick}
            token={widgetConfig!.token}
            consumerId={widgetConfig?.configurationId}
            environment={widgetConfig?.environment!}
            deeplink={DEEP_LINK}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  modal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
});

```

--------------------------------

### Create Preauthorized Transaction using cURL

Source: https://dev.aero.inc/v1.1/docs/api-quick-start

This cURL command demonstrates how to create a preauthorized transaction. It requires the merchant ID, bank account ID, and the transaction amount. The `bankAccountId` is obtained by first calling the `GET /user` endpoint.

```curl
curl --request POST \
     --url https://api.sandbox-pay.aero.inc/preauthTransaction \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --header 'authorizationToken: Bearer {{token}}' \
     --data \
'{
  "merchantId": "1235",
  "bankAccountId": "1234567",
  "amount": "10.00"
}'
```

--------------------------------

### Aeropay New User Response Example (JSON)

Source: https://dev.aero.inc/v1.1/docs/new-user

This JSON object represents the successful response from Aeropay when a new user is created. It includes a success flag, an error field, and a comprehensive user object containing details like userId, name, email, and bank account information. The userId is crucial for subsequent user interactions.

```json
{
  "success": "true",
  "error": "null",
  "user": {
    "userId": 1102575,
    "firstName": "Jane",
    "lastName": "Doe",
    "email": "janedoe@aeropay.com",
    "type": "consumer",
    "phone": "+11234567890",
    "bankAccounts": [
      {
        "bankAccountId": "949562",
        "userId": "1102575",
        "bankName": "Aerosync Bank (MFA)",
        "accountLast4": "2373",
        "name": "Aerosync Checking",
        "externalBankAccountId": "None",
        "isSelected": "1",
        "accountType": "checking",
        "status": "verified",
        "createdDate": "1747421987"
      }
    ],
    "createdDate": "1716312178",
    "aeroPassUserUuid": "0f2542a4-8e60-4a72-b3a1-064f2d6943e8"
  }
}
```

--------------------------------

### Install react-native-webview Dependency

Source: https://dev.aero.inc/v1.1/docs/release-notes-1

This command installs the `react-native-webview` package, which is a peer dependency for the Aerosync React Native SDK. Manual installation is required for versions v2.0.6 and earlier to avoid potential version conflicts.

```bash
npm install react-native-webview
```

--------------------------------

### Install Aerosync React Native SDK and Dependencies

Source: https://dev.aero.inc/v1.1/docs/react-native-sdk

Installs the Aerosync React Native SDK and its required peer dependency, react-native-webview, using npm. This is the initial step for integrating Aerosync into a React Native application.

```bash
npm install aerosync-react-native-sdk react-native-webview
```

--------------------------------

### Install Bank-Link-Sdk using Maven and Gradle

Source: https://dev.aero.inc/v1.1/docs/android-sdk

Instructions for adding the Aerosync bank-link-sdk library to your Android project dependencies using Apache Maven and Gradle.

```apache-maven
<dependency>
    <groupId>com.aerosync</groupId>
    <artifactId>bank-link-sdk</artifactId>
    <version>1.3.0</version>
</dependency>
```

```gradle
implementation group: 'com.aerosync', name: 'bank-link-sdk', version: '1.3.0'
```

--------------------------------

### Aeropay API Token Response Example

Source: https://dev.aero.inc/v1.1/docs/payout-transaction-step-1-authentication

This is an example of a successful response from the Aeropay API after a merchant authentication request. It contains the token's Time To Live (TTL) in seconds and the actual access token.

```json
{
    "TTL": 1800,
    "token": "eyJ0eXAiOiJKN7YiLCJhbGciOiJIUzI1NiJ9.eyJhdXRoIjoiNDgiLCJzdWIiOiJtZXJjaGFudCIsImp0aSI6ImZhNGY2NzRmLTJkOTEtNGExNS05OTk3LTc1NWI2ZTYyZDhkYiIsImV4cCI6MTY5NDAzNTc2MSwidXNlcm5hbWUiOiJ1cy1lYXN0LTE6M2NlMjBiZDUtNzg03ZCRMjY5LWExM2UtmM1MzIyMTk0NTAxIn0.3B1sdyVNpTW644RtpoGmQnRlp9PKGjrk91YUi0Uq2Os"
}
```

--------------------------------

### Initiate Aeropay Checkout (Custom Button)

Source: https://dev.aero.inc/v1.1/docs/integration-guide

Launch the Aeropay checkout process using a custom button click.

```APIDOC
## POST /websites/dev_aero_inc_v1_1/launch

### Description
Initiates the Aeropay checkout process when using a custom button. This function should be called directly from a user action (like a button click) to avoid popup blockers.

### Method
POST

### Endpoint
/websites/dev_aero_inc_v1_1/launch

### Parameters
#### Query Parameters
- **amount** (string) - Optional - The amount for the checkout, in dollars (e.g., '14.39'). If not provided, the previously set total amount will be used.

### Request Example
```json
{
  "amount": "14.39"
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates that the Aeropay checkout process has been initiated.

#### Response Example
```json
{
  "message": "Aeropay checkout initiated."
}
```
```

--------------------------------

### GET /aggregatorCredentials

Source: https://dev.aero.inc/v1.1/docs/aerosync-implementation-guides

Retrieve Aerosync widget URL and token by making a GET request to the aggregatorCredentials endpoint with 'aerosync' as the aggregator query parameter.

```APIDOC
## GET /aggregatorCredentials

### Description
Retrieves the Aerosync widget URL and a token required for subsequent interactions. This is the first step in initiating the Aerosync integration flow.

### Method
GET

### Endpoint
/aggregatorCredentials

### Parameters
#### Query Parameters
- **aggregator** (string) - Required - Must be set to `aerosync`.

#### Request Body
None

### Request Example
```curl
curl --request GET \
     --url 'https://api.sandbox-pay.aero.inc/aggregatorCredentials?aggregator=aerosync' \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --header 'authorizationToken: Bearer {{token}}'
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the request was successful.
- **fastlinkURL** (string) - The URL for the Aerosync widget.
- **token** (string) - An authentication token for the Aerosync widget.
- **username** (string) - The username associated with the token.

#### Response Example
```json
{
    "success": true,
    "fastlinkURL": "https://sandbox.aerosync.com/",
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJkNDYzZjhhwefNmEyLTQzOTctOWIyNC00NWYzZGY2MDcxYjciLCJleHAiOjE2ODY0Mzk4NTYsInVzZXJJZCI6ImU3OTQzMmNiOWFmNTQ2ZTRiMDBiN2NmMDU3ZjdlZWEyIiwidXNlclBhc3N3b3JkIjoiODYxNDg3OGExMzEyNDA2Njg5MDBlN2VkMGNhNDhkNTkiLCJDbGllbnRJZCI6InRlc3QxIiwiQ2xpZW50TmFtZSI6ImNsaWVudDEifQ.XufkfsgGc7CGDy8DZRTOc0e_-kJYt9puyCAqneX4Ze0",
    "username": "e79432cb9af546e4b00b7cf057fasea2"
}
```
```

--------------------------------

### Initialize and Configure AeroSync Widget (TypeScript)

Source: https://dev.aero.inc/v1.1/docs/web-npm-sdk

This TypeScript code demonstrates how to import, initialize, and configure the AeroSync widget. It includes setting up event listeners for various widget states like load, success, close, and errors, and launching the widget with specific configuration options.

```typescript
/**
 * Step-by-step integration of AeroSync AddBank widget
 */
import type {
  AerosyncWidget,
  WidgetEventSuccessType,
  WidgetEventType,
} from "aerosync-web-sdk";
import { initAeroSyncWidget } from "aerosync-web-sdk";

function openAerosyncWidget() {
  // Initialize the widget with configuration options
  let widgetControls = initAeroSyncWidget({
    elementId: "widget", // 👈 ID of the target div in your HTML
    iframeTitle: "Connect", // 🔒 Used for accessibility
    environment: "sandbox", // 🌍 Set to 'sandbox' for testing, 'production' for live
    token: "xxxx", // 🔑 Your secure AeroSync token
    theme: "light", // 🎨 Choose between 'light' or 'dark' theme
		consumerId: "consumerId-value",

    // 📦 Event listener for all widget events
    onEvent(event: WidgetEventType) {
      console.log("event", event);
    },

    // 🚀 Fires when the widget is fully loaded
    onLoad() {
      console.log("onload");
    },

    // ✅ Called after the user successfully connects a bank and closes the widget
    onSuccess(event: WidgetEventSuccessType) {
      console.log("onSuccess", event);
      // ...
      // Handle success (e.g., update UI, send data to backend, etc.)
    },

    // ❌ Fires when the widget is closed manually by the user
    onClose() {
      console.log("widget closed");
    },

    // ⚠️ Catch and handle widget errors
    onError(event: string) {
      console.log("onError", event);
    },
  });

  // 🧭 Launch the widget
  widgetControls.launch();
}
```

--------------------------------

### Get Aerosync Widget URL and Token (cURL)

Source: https://dev.aero.inc/v1.1/docs/aerosync-implementation-guides

This snippet demonstrates how to make a GET request to the Aeropay aggregatorCredentials endpoint to retrieve a widget URL and token for Aerosync. It requires an authorization token and specifies 'aerosync' as the aggregator.

```curl
curl --request GET \
     --url 'https://api.sandbox-pay.aero.inc/aggregatorCredentials?aggregator=aerosync' \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --header 'authorizationToken: Bearer {{token}}'
```

--------------------------------

### Get Transaction CSV Report API Request (curl)

Source: https://dev.aero.inc/v1.1/docs/reporting-reconciliation

This code snippet illustrates how to request a CSV export of all transaction information for a merchant using the GET /reports/transactions/CSV API. The CSV data will be delivered to the email addresses specified in the request (though not shown in this example).

```curl
curl --request GET \
     --url 'https://api.sandbox-pay.aero.inc//reports/transactions/CSV' \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --header 'authorizationToken: Bearer {{token}}'
```

--------------------------------

### Example Deeplink Configuration in TypeScript

Source: https://dev.aero.inc/v1.1/docs/web-npm-sdk

Demonstrates how to configure a deeplink for mobile applications. If not needed for web applications, an empty string can be used. This parameter is crucial for resuming OAuth workflows on mobile after authentication.

```typescript
let deeplink: string = "";
// For mobile applications, replace "" with the actual deeplink URL.
```

--------------------------------

### Retrieve Preauthorized Transaction Information (curl)

Source: https://dev.aero.inc/v1.1/docs/managing-aeropay-1

This example shows how to retrieve details of a preauthorized transaction using the GET /preauthTransaction endpoint. You can fetch transactions by Aeropay preauth ID or your system's transaction UUID.

```curl
curl --request POST \
     --url https://api.sandbox-pay.aero.inc/preauthTransaction?uuid=ed07e6a3-3493-4cb7-ac99-07ebca7b36e7 \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --header 'authorizationToken: Bearer {{token}}'
```

--------------------------------

### Retrieve Transaction Information (curl)

Source: https://dev.aero.inc/v1.1/docs/managing-aeropay-1

This example demonstrates how to fetch details of an individual transaction using the GET /transaction endpoint. Transactions can be identified by either the Aeropay transaction ID or the transaction UUID provided by your system.

```curl
curl --request GET \
     --url 'https://api.sandbox-pay.aero.inc/transaction?transactionId=123' \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --header 'authorizationToken: Bearer {{token}}'
```

--------------------------------

### Example Widget Style Customization

Source: https://dev.aero.inc/v1.1/docs/web-npm-sdk

Shows how to customize the visual appearance of the AeroSync widget using a style object. This allows for setting properties such as width, height, background color, and opacity.

```javascript
{
  width: '375px',
  height: '688px',
  bgColor: '#000000',
  opacity: 0.7
}
```

--------------------------------

### Aeropay API Error Handling Examples (Curl)

Source: https://dev.aero.inc/v1.1/docs/new-user

This section details common error scenarios when interacting with the Aeropay API, specifically focusing on user creation. It includes HTTP status codes, error codes, meanings, and resolutions for issues like missing parameters or phone number conflicts. These examples are typically observed in API request/response cycles, often using tools like cURL.

```curl
# Example for missing phone_number parameter
# curl -X POST https://api.aeropay.com/users -d '{"firstName": "John", "lastName": "Doe", "email": "john.doe@example.com"}'

# Example for phone number already in use
# curl -X POST https://api.aeropay.com/users -d '{"firstName": "Jane", "lastName": "Doe", "email": "jane.doe@example.com", "phone_number": "+11234567890"}'
```

--------------------------------

### Configure Aeropay Environment

Source: https://dev.aero.inc/v1.1/docs/integration-guide

Initialize the Aeropay SDK by configuring the environment. Use 'sandbox' for testing and 'production' for live transactions. This is a crucial step before proceeding with other SDK functionalities.

```javascript
window.AeroPay.init({
  env: 'sandbox'
});
```

--------------------------------

### Subscription with Aeropay Generated Button and Amount (JavaScript)

Source: https://dev.aero.inc/v1.1/docs/examples

Shows how to set up a subscription payment using an AeroPay generated button, including specifying a subscription ID and amount. This is ideal for recurring payments where the amount is predetermined. The SDK is initialized, and the button is configured and rendered.

```javascript
window.AeroPay.init({
  env: "sandbox"
});

var onSuccess = function(result) {
  console.log(result);
};

// event callback is optional 
var onEvent = function(event) {
  console.log(event);
};

var apButton = window.AeroPay.button({
  location: "6ced28ccc4",
  type: "subscription",
  onSuccess: onSuccess,
  onEvent: onEvent  // optional
});

apButton.subId("28");
apButton.subAmount("79.00");
apButton.render("aeropay-button-container");
```

--------------------------------

### Widget Configuration Parameters

Source: https://dev.aero.inc/v1.1/docs/web-npm-sdk

This table outlines all the parameters available for configuring the AeroSync widget, their types, whether they are required, and their descriptions.

```APIDOC
## Widget Configuration

### Description
Configure your environment for sandbox ([https://sandbox.aerosync.com](https://sandbox.aerosync.com)) or production ([https://www.aerosync.com](https://www.aerosync.com)). Additionally configure an id, iframeTitle, width, and height of the window.

### Parameters

#### Query Parameters

- **token** (string) - Required - Request AeroSync Token using GET /aggregatorCredentials endpoint. Reference: [https://api-aeropay.readme.io/reference/aggregatorcredentials](https://api-aeropay.readme.io/reference/aggregatorcredentials), [https://developer.aeropay.com/api/aeropay/doc/](https://developer.aeropay.com/api/aeropay/doc/)
- **elementId** (string) - Required - Specifies a unique id for an HTML element. The default value is "widget".
- **iframeTitle** (string) - Required - Adds title text to the iframe.
- **width** (string) - Required - Specifies the width of the iframe in pixels.
- **height** (string) - Required - Specifies the height of the iframe in pixels.
- **environment** (string) - Required - Permitted values are [sandbox, production]
- **deeplink** (string) - Conditional - Aerosync will redirect to this link on mobile app after authentication to resume the workflow for OAuth bank experiences. Required for mobile applications. Not required for web applications. You can send the deeplink as empty string. Eg: `let deeplink:string = ""`. For more guidance refer to our article [here ](https://dev.aero.inc/docs/oauth-connections)
- **handleOAuthManually** (boolean) - No - Set this to true if you want to manually open the external OAuth login window instead of having it open automatically.
- **targetDocument** (ShadowRoot) - No - The widget will be rendered inside the shadow dom instead of root document
- **consumerId** (string) - Yes - Unique ID assigned to you to apply widget customizations.
- **zIndex** (string) - No - To override the stacking order of the widget elements provide the appropriate value. The default value is 1.
- **manualLinkOnly** (boolean) - No - User will only be able to link their bank manually.
- **embeddedBankView** (object) - No - Enables embedding the bank view directly inside a custom container. Requires an elementId. Optional properties include width, height, and a callback onEmbedded() that is triggered when the embedded view is ready. Example: { elementId: 'embeddedId', width: '572px', height: '348px', onEmbedded: () => { //onEmbedded ready} }. For more information, click here: [https://dev.aero.inc/docs/embedded-view](https://dev.aero.inc/docs/embedded-view)
- **style** (object) - No - Allows you to customize the widget’s appearance. You can set width, height, bgColor, and opacity. Example: { width: '375px', height: '688px', bgColor: '#000000', opacity: 0.7 }

### Request Example
```json
{
  "token": "your_aerosync_token",
  "elementId": "widget-container",
  "iframeTitle": "AeroSync Widget",
  "width": "400px",
  "height": "600px",
  "environment": "sandbox",
  "consumerId": "your_consumer_id",
  "deeplink": "your_deeplink_url",
  "handleOAuthManually": false,
  "targetDocument": null,
  "zIndex": "1000",
  "manualLinkOnly": false,
  "embeddedBankView": {
    "elementId": "embedded-container",
    "width": "300px",
    "height": "400px",
    "onEmbedded": "() => console.log('Embedded view ready')"
  },
  "style": {
    "width": "375px",
    "height": "688px",
    "bgColor": "#FFFFFF",
    "opacity": 0.9
  }
}
```

### Response

#### Success Response (200)

The widget is rendered successfully. No specific response body is detailed, as this is a client-side configuration.

#### Response Example

(No specific JSON response example provided for this client-side configuration.)
```

--------------------------------

### Generate Transaction Report Request (cURL)

Source: https://dev.aero.inc/v1.1/docs/reporting-reconciliation

This example demonstrates how to make a GET request to the Aero Inc. API to generate a CSV transaction report. It includes required parameters like merchantId, dateBegin, dateEnd, and timezone, along with authorization headers. Ensure you replace '{{token}}' with your actual authorization token.

```curl
curl --request GET \
     --url 'https://api.sandbox-pay.aero.inc/reports/transactions/CSV?merchantId=1234&dateBegin=04-20-2020&dateEnd=04-21-2020&timezone=America%2FNew_York' \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --header 'authorizationToken: Bearer {{token}}'
```

--------------------------------

### Implement Bank-Link-SDK in Android Homepage

Source: https://dev.aero.inc/v1.1/docs/android-sdk

A minimal Kotlin example demonstrating how to implement the Aerosync bank-link-sdk in an Android application. It includes setting up the widget, handling user interactions, and processing SDK events like success, errors, and closure.

```kotlin
package com.aerosync.test_client_android

import android.content.Context
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Toast
import com.aerosync.bank_link_sdk.EventListener
import com.aerosync.bank_link_sdk.Widget

class Homepage : AppCompatActivity(), EventListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_homepage)
    }

    fun onClick(v: View?) {
        when (v?.id) {
            R.id.button -> {
                // open Aerosync widget
                var config = Widget(this, this);
                config.environment = "PROD"; // SANDBOX, PROD
                config.deeplink = "aerosync://bank-link";
                config.token = "<PROD TOKEN>";
                config.open();
            }
        }
    }

    override fun onSuccess(response: String?, context: Context) {
        // perform steps when user have completed the bank link workflow
        // sample code
        Toast.makeText(context, "onSuccess--> $response", Toast.LENGTH_SHORT).show()
        val intent = Intent(context, Homepage::class.java)
        context.startActivity(intent);
    }

    override fun onEvent(type: String?, payload: String?, context: Context) {
        // capture all the Aerosync events
        // sample code
        Toast.makeText(context, "onEvent--> $payload", Toast.LENGTH_SHORT).show()
    }

    override fun onError(error: String?, context: Context) {
        // error handling
        // sample code
        Toast.makeText(context, "onError--> $error", Toast.LENGTH_SHORT).show()
    }

    override fun onClose(context: Context) {
        // when widget is closed by user
        // sample code
        Toast.makeText(context,"widget closed", Toast.LENGTH_SHORT).show()
        val intent = Intent(context, Homepage::class.java)
        context.startActivity(intent);
    }
}
```

--------------------------------

### Example Embedded Bank View Configuration

Source: https://dev.aero.inc/v1.1/docs/web-npm-sdk

Illustrates the configuration for embedding the bank view within a custom container. This includes specifying the element ID, dimensions, and an optional callback function that executes when the embedded view is ready. Requires an elementId to be set.

```javascript
{
  elementId: 'embeddedId',
  width: '572px',
  height: '348px',
  onEmbedded: () => {
    // onEmbedded ready callback
  }
}
```

--------------------------------

### Checkout with Aeropay Generated Button (JavaScript)

Source: https://dev.aero.inc/v1.1/docs/examples

Demonstrates how to initialize the AeroPay SDK and create a checkout button that is rendered by AeroPay. This method is suitable for quick integration where a pre-styled button is desired. It requires a location ID and handles success and optional event callbacks.

```javascript
window.AeroPay.init({
  env: "sandbox"
});

var onSuccess = function(uuid) {
  console.log(uuid);
};

// event callback is optional 
var onEvent = function(event) {
  console.log(event);
};

var apButton = window.AeroPay.button({
  location: "6ced28ccc4",
  type: "checkout",
  onSuccess: onSuccess,
  onEvent: onEvent  // optional
});

apButton.total("88.50");
apButton.render("aeropay-button-container");
```

--------------------------------

### User Creation API

Source: https://dev.aero.inc/v1.1/docs/api-quick-start

Creates a new Aeropay user. The returned userId is required for subsequent operations. If the user already exists, their existing account information is returned.

```APIDOC
## POST /user

### Description
Creates a new Aeropay user. The returned userId is required for subsequent operations. If the user already exists, their existing account information is returned.

### Method
POST

### Endpoint
/user

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **authorizationToken** (string) - Required - Merchant-scoped token.

### Request Example
```json
{
  "authorizationToken": "merchant_token"
}
```

### Response
#### Success Response (200)
- **userId** (string) - The unique identifier for the Aeropay user.

#### Response Example
```json
{
  "userId": "user_12345"
}
```
```

--------------------------------

### Retrieve User Details Response - GET /user

Source: https://dev.aero.inc/v1.1/docs/network-user

Response from the GET /user API containing comprehensive user details, including demographic information and a list of the user's linked bank accounts.

```json
{
    "success": 1,
    "user": {
        "userId": "1234",
        "firstName": "John",
        "lastName": "Doe",
        "type": "consumer",
        "email": "johndoe@gmail.com",
        "phone": "+13144949063",
        "createdDate": "1605113011",
        "bankAccounts": [
            {
                "bankAccountId": "123456",
                "userId": "1234",
                "bankName": "Chase Bank",
                "accountLast4": "1222",
                "name": "Checking - 1222",
                "externalBankAccountId": "",
                "isSelected": "1",
                "accountType": "checking",
                "status": "verified",
                "createdDate": "1692715066"
            }
        ],
      	"createdDate": "1716312178",
        "aeroPassUserUuid": "0f2542a4-8e60-4a72-b3a1-064f2d6943e8",
        "userStatus": "Active"
    }
}
```

--------------------------------

### Integrate Aerosync SDK Widget in SwiftUI

Source: https://dev.aero.inc/v1.1/docs/ios-sdk

This Swift code demonstrates how to embed the Aerosync SDK as a SwiftUI View using NavigationLink. It shows the basic structure for initializing the AerosyncSDK widget with necessary parameters like token, environment, deeplink, and various callback functions for event handling, success, close, load, and error states.

```swift
import Foundation
import SwiftUI
import aerosync_ios_sdk

struct AerosyncWidgetView : View {
    @EnvironmentObject var appVM : AppViewModel
    var body:{
        NavigationStack{
            NavigationLink{
                AerosyncSDK(token: "...",
                 env: "sandbox",
                 deeplink: "aerosync:connect",
                 consumerId: ""
                 onEvent: self.onEvent,
                 onSuccess: self.onSuccess,
                 onClose: self.onClose,
                 onLoad: self.onLoad,
                 onError: self.onError,
                 )
            } label: {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)

                Text("Aerosync SDK Test")
                Button("Connect") {
                    // action to connect to Aerosync
                    print("Connect")
                }
            }
            .padding()
        }
    }
}
func onEvent(message: Any) {
    print("onEvent Callback \(message)")
}
func onSuccess(message: Any) {
    print("onSuccess Callback \(message)")
}
func onClose(message: Any) {
    print("onClose Callback \(message)")
}
func onLoad(message: Any) {
    print("onLoad Callback \(message)")
}
func onError(message: Any) {
    print("onError Callback \(message)")
}
}

```

--------------------------------

### Aeropay Webhook Payload Examples

Source: https://dev.aero.inc/v1.1/docs/webhooks-1

These examples show the structure of payloads received from Aeropay webhooks for different topics. The 'transaction_declined' payload includes detailed transaction information, while the 'user_suspended' payload contains a user ID.

```json
{
  "topic": "transaction_declined",
  "data": {
    "locationId": "794",
    "paymentType": "payment+",
    "createdDate": "1694787546",
    "amount": "15.00",
    "merchantId": "582",
    "status": "declined",
    "uuid": "8bc20976-2e18-4c5c-93b4-20fd853d78a4",
    "attributes": [{ "value": "3.00", "name": "tip", "description": "flat" }],
    "id": "231933",
    "userId": "12695",
    "title": "Online Transaction",
    "apFee": "0.28",
    "returnCode": "R01"
  },
  "date": "2024-04-05 15:25:49"
}
```

```json
{
  "topic" :  "user_suspended",
  "data" :  { "userid" :  "12695" },
  "date": "2024-04-05 15:25:49"
}
```

--------------------------------

### User Authorization with Aeropay Generated Button (JavaScript)

Source: https://dev.aero.inc/v1.1/docs/examples

Illustrates how to initiate a user authorization flow using an AeroPay generated button. This is useful for verifying user identity or permissions before a transaction. The code initializes the SDK, defines callbacks, and renders the authorization button.

```javascript
window.AeroPay.init({
  env: "sandbox"
});

var onSuccess = function(result) {
  console.log(result);
};

// event callback is optional 
var onEvent = function(event) {
  console.log(event);
};

var apButton = window.AeroPay.button({
  location: "6ced28ccc4",
  type: "userAuthorize",
  onSuccess: onSuccess,
  onEvent: onEvent  // optional
});

apButton.total("88.50");
apButton.render("aeropay-button-container");
```

--------------------------------

### Subscription with Custom Button, No Amount (JavaScript)

Source: https://dev.aero.inc/v1.1/docs/examples

Illustrates initiating a subscription with a custom button without pre-setting the amount. This allows for dynamic subscription amount selection or default subscription plans. A click event on the custom button triggers the `launchSub` method with a subscription ID.

```javascript
window.AeroPay.init({
  env: "sandbox"
});

var onSuccess = function(result) {
  console.log(result);
};

// event callback is optional 
var onEvent = function(event) {
  console.log(event);
};

var apButton = window.AeroPay.button({
  location: "6ced28ccc4",
  type: "subscription",
  onSuccess: onSuccess,
  onEvent: onEvent  // optional
});

document
  .getElementById("my-aeropay-button")
  .addEventListener("click",
    function apClickEvent() {
      apButton.launchSub("28");
    });
```

--------------------------------

### Manually Link react-native-webview for Android and iOS

Source: https://dev.aero.inc/v1.1/docs/react-native-sdk

When React Native's autolinking fails, manual linking of the 'react-native-webview' module is required. This involves editing specific files for Android and running 'pod install' for iOS after installation.

```bash
npm i react-native-webview 
cd ios; pod install
```

--------------------------------

### Bank Linking API

Source: https://dev.aero.inc/v1.1/docs/api-quick-start

Initiates the bank linking process by providing a URL to launch the aggregator widget. After the widget is closed, a subsequent call connects the user's bank account.

```APIDOC
## Bank Linking Process

### Description
This process allows users to securely link their bank accounts to their Aeropay profile. It involves launching an aggregator widget and then confirming the link.

### Endpoints
1. **GET /aggregatorCredentials**
   - **Description**: Returns the URL required to launch the bank aggregator widget.
   - **Method**: GET
   - **Endpoint**: /aggregatorCredentials
   - **Parameters**: None
   - **Response**: 
     - **aggregatorUrl** (string) - The URL to launch the aggregator widget.

2. **GET /linkAccountFromAggregator**
   - **Description**: Connects the user's bank account to their Aeropay account after the aggregator widget has been used.
   - **Method**: GET
   - **Endpoint**: /linkAccountFromAggregator
   - **Parameters**: 
     - **aggregatorToken** (string) - Required - Token obtained from the aggregator widget.
   - **Response**: 
     - **bankAccountId** (string) - The unique identifier for the linked bank account.

### Request Example (Conceptual)
1. Call `GET /aggregatorCredentials` to get the `aggregatorUrl`.
2. Launch the `aggregatorUrl` in a widget.
3. After the widget closes, call `GET /linkAccountFromAggregator?aggregatorToken=...`
```

--------------------------------

### Retrieve Aerosync Widget URL and Token (HTTP GET)

Source: https://dev.aero.inc/v1.1/docs/preauth-transaction-step-3-link-a-bank-to-the-user

Fetches the Aerosync widget URL and a temporary token required to initialize the bank linking widget. This is an HTTP GET request to the /aggregatorCredentials endpoint, specifying 'aerosync' as the aggregator.

```curl
curl --request GET \
     --url '<https://api.sandbox-pay.aero.inc/aggregatorCredentials?aggregator=aerosync'> \
     --header 'Content-Type: application/json' \
     --header 'accept: application/json' \
     --header 'authorizationToken: Bearer {{token}}'
```

--------------------------------

### Self-Checkout with Aeropay Generated Button (JavaScript)

Source: https://dev.aero.inc/v1.1/docs/examples

Provides an example of initiating a self-checkout process using an AeroPay generated button. This flow allows users to complete a purchase directly through AeroPay's interface. The code sets up the SDK, button configuration, and renders the button for the user.

```javascript
window.AeroPay.init({
  env: "sandbox"
});

var onSuccess = function(uuid) {
  console.log(uuid);
};

// event callback is optional 
var onEvent = function(event) {
  console.log(event);
};

var apButton = window.AeroPay.button({
  location: "6ced28ccc4",
  type: "selfCheckout",
  onSuccess: onSuccess,
  onEvent: onEvent  // optional
});

apButton.render("aeropay-button-container");
```