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

# BNPL Plus - Native Web

> Integrate Cashfree BNPL Plus to display BNPL offers and flexible EMI options to shoppers before checkout, lifting average order value on your store.

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={"dark"}
<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={"dark"}
<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={"dark"}
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. Log in to the **[Merchant Dashboard](https://merchant.cashfree.com/auth/login)** and go to the **Developers > API Keys** section. Learn how to [view the App ID](/api-reference/authentication#generate-api-keys). Paste the App ID in the above snippet as the client ID value.

<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/cashfreepayments-d00050e9/3p7irhmTjRVwqRH8/static/payments/pg/bnpl-native-web/Screenshot_2023-02-14_at_5.12.30_PM.png?fit=max&auto=format&n=3p7irhmTjRVwqRH8&q=85&s=a4c72683b05472c53c9e0ec5d6dce1d2" alt="" width="3456" height="1934" data-path="static/payments/pg/bnpl-native-web/Screenshot_2023-02-14_at_5.12.30_PM.png" />