@grailpay/banklink/README.md

GrailPay Bank Link Widget SDK

# GrailPay BankLink Widget

A JavaScript SDK for integrating GrailPay's Bank Link Widget into your web application.

## Installation

```bash
npm install @grailpay/banklink
```

## Usage

The package can be used both as an ES module in modern JavaScript frameworks and as a CDN script in traditional websites.

### ES Module Usage (React, Vue, etc.)

```javascript
import GPBankLink from "@grailpay/banklink";

// Initialize the widget
const bankLink = new GPBankLink({
	token: "your-token",
	userId: "optional-user-id",
	onError: (error) => {
		console.error("Error:", error);
	},
	onBankConnected: (data) => {
		console.log("Bank connected:", data);
	},
	// Additional configuration options...
});

// Open the widget
bankLink.open();

// Close the widget
bankLink.close();
```

### React Component Example

```jsx
import React, { useEffect } from "react";
import GPBankLink from "@grailpay/banklink";

function BankLinkComponent() {
	useEffect(() => {
		const bankLink = new GPBankLink({
			token: "your-token",
			onError: (error) => console.error(error),
			onBankConnected: (data) => console.log("Bank connected", data),
		});

		// Open the bank link widget
		bankLink.open();

		// Cleanup on unmount
		return () => {
			bankLink.close();
		};
	}, []);

	return <div>Bank Link Component</div>;
}
```

### CDN Usage

```html
<script src="https://cdn.jsdelivr.net/npm/@grailpay/banklink/index.js"></script>
<script>
	// Global variable available
	const bankLink = new GPBankLink({
		token: "your-token",
		onError: function (error) {
			console.error(error);
		},
		// other config options
	});

	// Open the bank link widget
	bankLink.open();
</script>
```

## API Reference

### Configuration Options

| Option                 | Type     | Description                                   |
| ---------------------- | -------- | --------------------------------------------- |
| token                  | string   | Required. Authentication token for the widget |
| userId                 | string   | Optional. User UUID                           |
| role(business,person)  | string   | Optional. User role (default: "business")     |
| theme                  | object   | Optional. UI customization options            |
| onError                | function | Callback for error events                     |
| onUserCreated          | function | Callback when a user is created               |
| onBankConnected        | function | Callback when a bank is connected             |
| onLinkedDefaultAccount | function | Callback when a default account is linked     |

### Methods

| Method       | Description                              |
| ------------ | ---------------------------------------- |
| init(config) | Initialize the widget with configuration |
| open()       | Open the widget UI                       |
| close()      | Close the widget UI                      |

## Browser Compatibility

The GrailPay BankLink Widget supports the latest versions of major browsers:

| Browser            | Supported Version               |
| ------------------ | ------------------------------- |
| Chrome             | ✅ Chrome 110 and above         |
| Firefox            | ✅ Firefox 113 and above        |
| Safari             | ✅ Safari 14 and above          |
| Microsoft Edge     | ✅ Microsoft Edge 110 and above |
| Chrome for Android | ✅ Yes                          |
| Safari on iOS      | ✅ Yes                          |
| Internet Explorer  | ❌ No                           |

## License

ISC