Certainly! Let's delve deeper into each component and function provided by the `@getalby/bitcoin-connect-react` package, along with how they can be used in a React application to integrate Bitcoin Lightning Network payments.

### 1. **Initialization**

```javascript

init({

appName: "My Lightning App", // your app name

})

```

- **Purpose**: Initializes the Bitcoin Connect library with your application's name.

- **Usage**: This should be called at the start of your application to set up the necessary configurations.

### 2. **Button Component**

```javascript

<Button onConnect={(provider) => {

const {preimage} = await provider.sendPayment("lnbc...");

}}/>

```

- **Purpose**: Renders a button that, when clicked, connects to a provider and sends a payment.

- **Props**:

- `onConnect`: A function that is called when the user connects. It receives a `provider` object that can be used to send payments.

- **Usage**: Ideal for scenarios where you want to connect to a wallet and send a payment in one step.

### 3. **PayButton Component**

```javascript

<PayButton invoice={invoice} onClick={() => {

invoice = fetchInvoice();

setInvoice(invoice)

}} onPaid={(response) => alert("Paid! " + response.preimage)} payment={{preimage: 'my-preimage'}}/>

```

- **Purpose**: Renders a "Pay Now" button that handles the payment process.

- **Props**:

- `invoice`: The Lightning Network invoice to be paid.

- `onClick`: A function that is called when the button is clicked. It can be used to fetch the invoice.

- `onPaid`: A function that is called when the payment is successful. It receives a `response` object containing the payment details.

- `payment`: An object to override the payment status if a payment was made externally.

- **Usage**: Suitable for e-commerce checkouts or any scenario where you need to handle payments dynamically.

### 4. **Connect Component**

```javascript

<Connect/>

```

- **Purpose**: Renders the connect flow without a modal.

- **Usage**: Useful for integrating wallet connections into your UI, allowing users to connect their wallets seamlessly.

### 5. **SendPayment Component**

```javascript

<Payment invoice="lnbc..." onPaid={(response) => alert("Paid! " + response.preimage)} payment={{preimage: 'my-preimage'}}/>

```

- **Purpose**: Renders the send payment flow without a modal, ideal for e-commerce flows.

- **Props**:

- `invoice`: The Lightning Network invoice to be paid.

- `onPaid`: A function that is called when the payment is successful. It receives a `response` object containing the payment details.

- `payment`: An object to override the payment status if a payment was made externally.

- **Usage**: Perfect for e-commerce checkouts or any scenario where you need to handle payments without a modal.

### 6. **requestProvider Function**

```javascript

<button onClick={() => {

const weblnProvider = await requestProvider();

const { preimage } = await weblnProvider.sendPayment("lnbc...");

}}>

Request WebLN provider

</button>

```

- **Purpose**: Requests a WebLN provider. If no provider exists, it launches the modal to connect a wallet.

- **Usage**: Useful when you need to ensure a provider is available before proceeding with a payment.

### 7. **launchModal Function**

```javascript

<button onClick={() => launchModal()}>

Programmatically launch modal

</button>

```

- **Purpose**: Opens the modal programmatically to connect a wallet.

- **Usage**: Ideal for scenarios where you want to give users the option to connect their wallets at any point in your application.

### 8. **launchPaymentModal Function**

```javascript

<button onClick={() => launchPaymentModal({invoice: "lnbc...", onPaid: ({preimage}) => alert("Paid: " + preimage)})}>

Programmatically launch payment modal

</button>

```

- **Purpose**: Opens the payment modal programmatically, allowing for one-off payments.

- **Props**:

- `invoice`: The Lightning Network invoice to be paid.

- `onPaid`: A function that is called when the payment is successful. It receives a `response` object containing the payment details.

- **Usage**: Suitable for scenarios where you need to handle one-off payments, such as tips or donations.

### 9. **closeModal Function**

```javascript

closeModal();

```

- **Purpose**: Closes the modal programmatically.

- **Usage**: Useful for controlling the user experience by closing modals at appropriate times, such as after a successful payment.

### Example Usage in a React Component

Here’s an example of how you might use these components and functions in a React component:

```javascript

import React, { useState } from 'react';

import { Button, PayButton, init, launchModal, launchPaymentModal, closeModal, requestProvider, Connect, SendPayment } from '@getalby/bitcoin-connect-react';

init({

appName: "My Lightning App",

});

const LightningPaymentApp = () => {

const [invoice, setInvoice] = useState(null);

const fetchInvoice = async () => {

// Fetch the invoice from your backend or generate it d

Certainly! Let's delve deeper into each component and function provided by the `@getalby/bitcoin-connect-react` package, along with how they can be used in a React application to integrate Bitcoin Lightning Network payments.

### 1. **Initialization**

```javascript

init({

appName: "My Lightning App", // your app name

})

```

- **Purpose**: Initializes the Bitcoin Connect library with your application's name.

- **Usage**: This should be called at the start of your application to set up the necessary configurations.

### 2. **Button Component**

```javascript

<Button onConnect={(provider) => {

const {preimage} = await provider.sendPayment("lnbc...");

}}/>

```

- **Purpose**: Renders a button that, when clicked, connects to a provider and sends a payment.

- **Props**:

- `onConnect`: A function that is called when the user connects. It receives a `provider` object that can be used to send payments.

- **Usage**: Ideal for scenarios where you want to connect to a wallet and send a payment in one step.

### 3. **PayButton Component**

```javascript

<PayButton invoice={invoice} onClick={() => {

invoice = fetchInvoice();

setInvoice(invoice)

}} onPaid={(response) => alert("Paid! " + response.preimage)} payment={{preimage: 'my-preimage'}}/>

```

- **Purpose**: Renders a "Pay Now" button that handles the payment process.

- **Props**:

- `invoice`: The Lightning Network invoice to be paid.

- `onClick`: A function that is called when the button is clicked. It can be used to fetch the invoice.

- `onPaid`: A function that is called when the payment is successful. It receives a `response` object containing the payment details.

- `payment`: An object to override the payment status if a payment was made externally.

- **Usage**: Suitable for e-commerce checkouts or any scenario where you need to handle payments dynamically.

### 4. **Connect Component**

```javascript

<Connect/>

```

- **Purpose**: Renders the connect flow without a modal.

- **Usage**: Useful for integrating wallet connections into your UI, allowing users to connect their wallets seamlessly.

### 5. **SendPayment Component**

```javascript

<Payment invoice="lnbc..." onPaid={(response) => alert("Paid! " + response.preimage)} payment={{preimage: 'my-preimage'}}/>

```

- **Purpose**: Renders the send payment flow without a modal, ideal for e-commerce flows.

- **Props**:

- `invoice`: The Lightning Network invoice to be paid.

- `onPaid`: A function that is called when the payment is successful. It receives a `response` object containing the payment details.

- `payment`: An object to override the payment status if a payment was made externally.

- **Usage**: Perfect for e-commerce checkouts or any scenario where you need to handle payments without a modal.

### 6. **requestProvider Function**

```javascript

<button onClick={() => {

const weblnProvider = await requestProvider();

const { preimage } = await weblnProvider.sendPayment("lnbc...");

}}>

Request WebLN provider

</button>

```

- **Purpose**: Requests a WebLN provider. If no provider exists, it launches the modal to connect a wallet.

- **Usage**: Useful when you need to ensure a provider is available before proceeding with a payment.

### 7. **launchModal Function**

```javascript

<button onClick={() => launchModal()}>

Programmatically launch modal

</button>

```

- **Purpose**: Opens the modal programmatically to connect a wallet.

- **Usage**: Ideal for scenarios where you want to give users the option to connect their wallets at any point in your application.

### 8. **launchPaymentModal Function**

```javascript

<button onClick={() => launchPaymentModal({invoice: "lnbc...", onPaid: ({preimage}) => alert("Paid: " + preimage)})}>

Programmatically launch payment modal

</button>

```

- **Purpose**: Opens the payment modal programmatically, allowing for one-off payments.

- **Props**:

- `invoice`: The Lightning Network invoice to be paid.

- `onPaid`: A function that is called when the payment is successful. It receives a `response` object containing the payment details.

- **Usage**: Suitable for scenarios where you need to handle one-off payments, such as tips or donations.

### 9. **closeModal Function**

```javascript

closeModal();

```

- **Purpose**: Closes the modal programmatically.

- **Usage**: Useful for controlling the user experience by closing modals at appropriate times, such as after a successful payment.

### Example Usage in a React Component

Here’s an example of how you might use these components and functions in a React component:

```javascript

import React, { useState } from 'react';

import { Button, PayButton, init, launchModal, launchPaymentModal, closeModal, requestProvider, Connect, SendPayment } from '@getalby/bitcoin-connect-react';

init({

appName: "My Lightning App",

});

const LightningPaymentApp = () => {

const [invoice, setInvoice] = useState(null);

const fetchInvoice = async () => {

// Fetch the invoice from your backend or generate it d