@yourasset/ya-finance-now

A lightweight web component that adds watch financing to any merchant website. Built with Lit, it works with any framework or plain HTML.

Quick Start

Add the script tag and drop the element into your page:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@yourasset/ya-finance-now/dist/main.js"
></script>

<ya-finance-now
  merchantid="your-merchant-id"
  sku="your-product-sku"
  price="12500"
  language="en"
></ya-finance-now>

That's it. The widget fetches financing options from the YourAsset API and renders an interactive financing calculator.

Installation

CDN (recommended for most sites)

Use any major CDN that mirrors npm:

<!-- jsDelivr -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@yourasset/ya-finance-now/dist/main.js"></script>

<!-- UNPKG -->
<script type="module" src="https://unpkg.com/@yourasset/ya-finance-now/dist/main.js"></script>

npm (for bundled projects)

npm install @yourasset/ya-finance-now

import '@yourasset/ya-finance-now';

Usage Examples

New watch

<ya-finance-now
  merchantid="your-merchant-id"
  sku="your-product-sku"
  price="8500"
  language="fr"
></ya-finance-now>

Pre-owned watch

<ya-finance-now
  merchantid="your-merchant-id"
  sku="your-product-sku"
  price="6200"
  preowned
></ya-finance-now>

Full-width layout

<ya-finance-now
  merchantid="your-merchant-id"
  sku="your-product-sku"
  price="15000"
  full-width
></ya-finance-now>

Direct link to financing page

<ya-finance-now
  merchantid="your-merchant-id"
  sku="your-product-sku"
  financing-page
></ya-finance-now>

Theming

The widget supports three themes via the theme attribute:

<!-- Default theme -->
<ya-finance-now merchantid="..." sku="..." theme="default"></ya-finance-now>

<!-- Grey background -->
<ya-finance-now merchantid="..." sku="..." theme="p-grey"></ya-finance-now>

<!-- White background -->
<ya-finance-now merchantid="..." sku="..." theme="p-white"></ya-finance-now>

Properties

| Property | Type | Default | Required | Description | |---|---|---|---|---| | merchantid | String | — | Yes | Your YourAsset merchant ID | | sku | String | — | Yes | The product SKU used by the merchant | | price | Number | — | No | Fallback price for financing calculation if the SKU is not found | | preowned | Boolean | false | No | Whether the item is pre-owned | | language | String | auto | No | Language code (e.g. en, fr, de, it). Falls back to the page's lang attribute | | theme | String | default | No | Visual theme: default, p-grey, or p-white | | full-width | Boolean | false | No | Stretch the widget to full container width | | financing-page | Boolean | false | No | Link directly to the financing page instead of the product page |

How It Works

1. The widget calls the YourAsset API with the merchant ID, SKU, and optional parameters
2. The API returns financing options (monthly payments, durations, rates) and localized text
3. The widget renders an interactive accordion showing available financing plans
4. Clicking the CTA redirects the customer to the YourAsset financing flow

The widget renders nothing if the API returns no data (e.g. invalid merchant ID, SKU not found, or widget not enabled for the product).

Browser Support

Works in all modern browsers that support Web Components and ES modules.

License

GPL-3.0-or-later - see LICENSE for details.

Copyright 2024-2026 Yourasset AG