> ## Documentation Index
> Fetch the complete documentation index at: https://telr-docs.cashfree.com/llms.txt
> Use this file to discover all available pages before exploring further.

# BNPL Plus - Native Web

> This section explains the steps for integrating BNPL Plus into your website.

You can now integrate BNPL Plus into your website and offer a good customer experience by letting them know about the various available offers and flexible payment options before they proceed to checkout.

## Integration Steps

1. Embed the following file into your website:

```java Java  theme={null}
<script src="https://sdk.cashfree.com/js/widget/1.0.2/cashfree-widget.prod.js"></script>
```

2. Add the following div near the product price section of your webpage. This indicates where BNPL Plus would appear.

```Java Java theme={null}
<div id="cashfree-widget"></div>
```

3. Copy and paste the following snippet to the JS file and link it to your HTML file:

```Java Java theme={null}
window.addEventListener("load", function () {
  const widgetConfig = {
    clientID: "<Your App Id>",// Mention the App ID 
    amount: "<Your Product Price>", // Pass the product price here
    //Customize the widget with Offers, PayLater and EMI
    offers: "true",
    payLater: "true",
    emi: "true",
    theme: {
      widgetColor: "#ccccff",
      linkColor: "#000000",
      cfLogoTheme: "dark",
      isLogoActive: true,
    }
  };

  // To initiate the widget
  const cashfree = CF_Widget(widgetConfig);
  cashfree.load();
});
```

You can now see BNPL Plus on your product page. Provide the app ID. You can access the app ID from the [Developers](https://telr.cashfree.com/merchants/pg/developers/api-keys) section in the merchant dashboard. Click [here](https://www.cashfree.com/docs/api-reference/authentication#generate-api-keys) to read more on how to view the App ID. Paste the App ID in the above snippet as the clientID value.

<Note> **Note:** BNPL Plus is compatible with all Javascript frameworks such as React, Vue, Angular and so on.</Note>

Here is an image of how BNPL Plus looks once you have successfully integrated it with your website.

<img src="https://mintcdn.com/telr/tVMCLsYCWpyYtayB/static/payments/pg/bnpl-native-web/Screenshot_2023-02-14_at_5.12.30_PM.png?fit=max&auto=format&n=tVMCLsYCWpyYtayB&q=85&s=273707b2f8a1431b1af53d9e5b06ba99" alt="" width="3456" height="1934" data-path="static/payments/pg/bnpl-native-web/Screenshot_2023-02-14_at_5.12.30_PM.png" />