@yourasset/ya-checkout-financing

Add Yourasset financing as a payment method to your website. This package provides the web components that merchants can embed on their product and checkout pages.

Quick Start

Add one script tag. You get all components.

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

Components

This package includes three components that work independently or together:

| Component | Purpose | Where to use | |---|---|---| | <ya-checkout-financing placement="product"> | Show monthly financing rate | Product page | | <ya-checkout-financing placement="checkout"> | CTA button to start financing | Checkout page | | <ya-checkout-financing-info> | Financing details popup or embedded card | Anywhere |

1. Product Page Widget

It displays the lowest monthly financing rate, an info button and the Yourasset logo on a single line. There is no CTA button -- it is purely informational.

<ya-checkout-financing
  merchantid="your-merchant-id"
  sku="your-product-sku"
  placement="product"
></ya-checkout-financing>

Renders: From CHF xxx/month (i) [Yourasset logo]

The (i) button opens a modal with all available financing options, details and required legal disclaimer. The header informs the customer to select finance with Yourasset at Checkout.

2. Checkout Button

CTA button that redirects the customer to the Yourasset financing checkout, co-branded with the merchant's logo.

Standard button

<ya-checkout-financing
  merchantid="your-merchant-id"
  sku="your-product-sku"
  placement="checkout"
></ya-checkout-financing>

Renders: [ Continue with [Yourasset logo] > ]

Confirm variant

<ya-checkout-financing
  merchantid="your-merchant-id"
  sku="your-product-sku"
  placement="checkout"
  confirm
></ya-checkout-financing>

Renders: [ Confirm and continue with [Yourasset logo] > ]

Without arrow

<ya-checkout-financing
  merchantid="your-merchant-id"
  sku="your-product-sku"
  placement="checkout"
  no-arrow
></ya-checkout-financing>

Renders: [ Continue with [Yourasset logo] ]

Compact (button + monthly rate)

Shows the monthly rate and info button next to the CTA button.

<ya-checkout-financing
  merchantid="your-merchant-id"
  sku="your-product-sku"
  placement="checkout-compact"
></ya-checkout-financing>

Renders: From CHF xxx/month (i) [ with [Yourasset logo] > ]

3. Financing Info (Standalone)

The info button and financing details can be placed anywhere on the page, independently of the main widget.

As a button (click to open modal)

<ya-checkout-financing-info
  merchantid="your-merchant-id"
  sku="your-product-sku"
></ya-checkout-financing-info>

Clicking opens a modal with all financing durations (12/24/36/48/60 months), monthly payments, interest rates, and the required legal disclaimer.

As an embedded card

Add the open attribute to render the financing details inline -- no button, no popup.

<ya-checkout-financing-info
  merchantid="your-merchant-id"
  sku="your-product-sku"
  open
></ya-checkout-financing-info>

The merchant can embed this card in a sidebar, a product details tab, next to payment methods, or anywhere else on their page.

Custom button size

<ya-checkout-financing-info
  merchantid="your-merchant-id"
  sku="your-product-sku"
  size="24"
></ya-checkout-financing-info>

Customization

Themes

Three built-in themes. Apply to any placement.

<!-- Default (light blue background, dark text) -->
<ya-checkout-financing placement="checkout" ...></ya-checkout-financing>

<!-- Grey -->
<ya-checkout-financing placement="checkout" theme="p-grey" ...></ya-checkout-financing>

<!-- White -->
<ya-checkout-financing placement="checkout" theme="p-white" ...></ya-checkout-financing>

Custom colors

Button color

Match the CTA button to your brand.

<ya-checkout-financing
  placement="checkout"
  btn-color="#1a5c2e"
  ...
></ya-checkout-financing>

Widget background color

<ya-checkout-financing
  placement="checkout"
  bg-color="#f0f0f0"
  ...
></ya-checkout-financing>

Info card colors

Customize the embedded info card to match your site.

<ya-checkout-financing-info
  open
  bg-color="#f5e6d0"
  text-color="#3d2b1f"
  ...
></ya-checkout-financing-info>

Full width

<ya-checkout-financing placement="checkout" full-width ...></ya-checkout-financing>

Properties Reference

<ya-checkout-financing>

| Property | Type | Required | Default | Description | |---|---|---|---|---| | merchantid | String | Yes | — | Your merchant ID (provided by Yourasset). | | sku | String | Yes | — | The product SKU in your system. | | price | Number | No | — | Fallback price if the SKU has no price set. | | preowned | Boolean | No | false | Set for pre-owned products. | | language | String | No | Page lang | Language code (en, de, fr, it). Auto-detects from page. | | placement | String | No | product | product, checkout, or checkout-compact. | | theme | String | No | default | default, p-grey, or p-white. | | confirm | Boolean | No | false | Use "Confirm and continue with" button text. | | no-arrow | Boolean | No | false | Hide the arrow icon on the button. | | btn-color | String | No | — | Custom button background color (CSS). | | bg-color | String | No | — | Custom container background color (CSS). | | full-width | Boolean | No | false | Stretch to full container width. |

<ya-checkout-financing-info>

| Property | Type | Required | Default | Description | |---|---|---|---|---| | merchantid | String | Yes | — | Your merchant ID (provided by Yourasset). | | sku | String | Yes | — | The product SKU in your system. | | price | Number | No | — | Fallback price if the SKU has no price set. | | preowned | Boolean | No | false | Set for pre-owned products. | | language | String | No | Page lang | Language code (en, de, fr, it). | | size | Number | No | 14 | Info button size in pixels. | | open | Boolean | No | false | Render as embedded card instead of button. | | bg-color | String | No | — | Card background color (CSS). Only applies when open. | | text-color | String | No | — | Card text color (CSS). Only applies when open. | | header-before | String | No | — | Custom header text before the logo. | | header-after | String | No | — | Custom header text after the logo. |

Languages

The widget supports English, German, French, and Italian. It auto-detects the language from your page's <html lang="..."> attribute, or you can set it explicitly with the language property.

Full Integration Example

Product page

<!-- Financing info line -->
<ya-checkout-financing
  merchantid="your-merchant-id"
  sku="WATCH-123"
  placement="product"
></ya-checkout-financing>

<!-- Detailed financing card in sidebar -->
<ya-checkout-financing-info
  merchantid="your-merchant-id"
  sku="WATCH-123"
  open
></ya-checkout-financing-info>

Checkout page

<!-- Financing payment button -->
<ya-checkout-financing
  merchantid="your-merchant-id"
  sku="WATCH-123"
  placement="checkout"
></ya-checkout-financing>

<!-- Info button next to payment methods -->
<ya-checkout-financing-info
  merchantid="your-merchant-id"
  sku="WATCH-123"
></ya-checkout-financing-info>

Complete checkout with all options

<!-- Compact: monthly rate + button together -->
<ya-checkout-financing
  merchantid="your-merchant-id"
  sku="WATCH-123"
  placement="checkout-compact"
  theme="p-grey"
></ya-checkout-financing>

<!-- Or: standalone button, custom branded -->
<ya-checkout-financing
  merchantid="your-merchant-id"
  sku="WATCH-123"
  placement="checkout"
  btn-color="#1a5c2e"
  confirm
  no-arrow
></ya-checkout-financing>

How It Works

1. The merchant embeds the widget on their website.
2. The widget fetches financing options from the Yourasset API based on the product SKU.
3. On the merchant product page, the customer sees that financing as payment option is available and the rates.
4. On the checkout page, the customer clicks the CTA button.
5. The customer is redirected to the Yourasset financing checkout (co-branded with the merchant).
6. The customer chooses their preferred financing term and completes the application.

The customer chooses their preferred financing term in the Yourasset checkout, not on the merchant's site. The widget displays the lowest available rate and (i) button.

License

This project is licensed under the GNU General Public License v3.0 or later - see the LICENSE file for details.

Copyright 2026 Yourasset AG