# PaymentOptions

> BNPL messaging with provider logos. Shows '4 interest-free payments of $X.XX'.

Canonical URL: https://fa7e86e3d553:3005/islands/commerce/payment-options

> BNPL messaging with provider logos. Shows '4 interest-free payments of $X.XX'. Place below price or near BuyBox. Listens for variant:changed to update price.

## Preview

**Category**: Commerce

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| price | number | Yes | - | Product price in cents (e.g., 2999 = $29.99) |
| currency | string | No | "USD" | Currency code (USD, INR, EUR, etc.) |
| providers | array | No | ["klarna", "afterpay", "shop_pay"] | Array of BNPL provider names to show |
| installments | number | No | 4 | Number of installments (typically 4) |
| variant | enum | No | "inline" | Display style: "inline", "expandable", or "icons_only" |
| listenForEvents | boolean | No | false | Whether to listen for variant:changed events to update price |

## Embed Example

```html
<lx-island name="PaymentOptions">
  <script type="application/json">
{
  "price": 0
}
  </script>
</lx-island>
```

## Usage Patterns

**Standard placement (below price, inline variant):**

```html
<lx-island name="PaymentOptions">
  <script type="application/json">
{
  "price": 0
}
  </script>
</lx-island>
```

**Inline variant (single line, most common):**

```html
<lx-island name="PaymentOptions">
  <script type="application/json">
{
  "price": 0
}
  </script>
</lx-island>
```

**Expandable variant (click to show details):**

```html
<lx-island name="PaymentOptions">
  <script type="application/json">
{
  "price": 0
}
  </script>
</lx-island>
```

**Icons-only variant (minimal, just logos):**

```html
<lx-island name="PaymentOptions">
  <script type="application/json">
{
  "price": 0
}
  </script>
</lx-island>
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| variant:changed | Listens | `{price: string}` from VariantSwatches or OptionResolver |

## Tips

- Place directly below product price or near [BuyBox](/islands/commerce/buy-box) CTA
- Set `listenForEvents:true` when using with [VariantSwatches](/islands/commerce/variant-swatches) or [OptionResolver](/islands/commerce/option-resolver) (auto-updates price per variant)
- `price` prop in cents (e.g., 2999 = $29.99, 4000 = $40.00)
- Providers: `"klarna"`, `"afterpay"`, `"shop_pay"`, `"affirm"`, `"zip"` (include logos automatically)
- `variant:"inline"` — single line: "4 payments of $7.50" + logos (most common)
- `variant:"expandable"` — collapsed by default, click to expand full details (provider T&Cs)
- `variant:"icons_only"` — just provider logos, no text (use when space is tight)
- Default `installments:4` is standard (some providers offer 6 or 12, check provider T&Cs)
- Shows calculated per-installment price automatically (e.g., $40 / 4 = $10/installment)
- BNPL messaging increases conversion 15-30% (reduces price shock, especially for $50+ items)

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `button` | Submit/action button |
| `icons-row` | Payment icon row |
| `root` | Outermost container |
| `text` | Primary text content |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Payment Icons CDN

All payment provider icons are hosted on the Lexsis CDN. Use for static payment strips, trust badges, or footer icons.

**Base URL**: `https://cdn.trylexsis.com/icons/payments/`

Append the filename to get the full URL:

```
https://cdn.trylexsis.com/icons/payments/visa.svg
https://cdn.trylexsis.com/icons/payments/mastercard.svg
https://cdn.trylexsis.com/icons/payments/klarna.svg
```

### Available Icons

| Filename | Provider | Type |
|----------|----------|------|
| `visa.svg` | Visa | Card |
| `mastercard.svg` | Mastercard | Card |
| `amex.svg` | American Express | Card |
| `discover.svg` | Discover | Card |
| `diners.svg` | Diners Club | Card |
| `jcb.svg` | JCB | Card |
| `maestro.svg` | Maestro | Card |
| `unionpay.svg` | UnionPay | Card |
| `elo.svg` | Elo | Card |
| `mir.svg` | Mir | Card |
| `apple-pay.svg` | Apple Pay | Wallet |
| `google-pay.svg` | Google Pay | Wallet |
| `paypal.svg` | PayPal | Wallet |
| `shop-pay.svg` | Shop Pay (Shopify) | Wallet |
| `cashapp.svg` | Cash App | Wallet |
| `venmo.webp` | Venmo | Wallet |
| `phonepe.svg` | PhonePe | Wallet (India) |
| `klarna.svg` | Klarna | BNPL |
| `afterpay.svg` | Afterpay | BNPL |
| `affirm.svg` | Affirm | BNPL |
| `stripe.svg` | Stripe | Processor |
| `upi.svg` | UPI | India |
| `razorpay.webp` | Razorpay | India |
| `alipay.svg` | Alipay | China |

### Static payment strip

Use this PaymentOptions island with the supported provider names instead of
authoring raw payment-logo image tags.

### Scrolling Payment Strip

`Marquee` is deprecated. If movement is useful, use a CSS animation around
static payment markup; otherwise keep the static strip above.

```html
<div class="payment-strip" aria-label="Accepted payment methods">
  <!-- static payment logos -->
</div>
```

## Related Islands

- [BuyBox](/islands/commerce/buy-box) — Place PaymentOptions directly below BuyBox price
- [VariantSwatches](/islands/commerce/variant-swatches) — Emits `variant:changed` → PaymentOptions updates per-variant price
- [OptionResolver](/islands/commerce/option-resolver) — Emits `variant:changed` for multi-axis products → PaymentOptions updates