---
title: "useBilling"
description: "useBilling, auto-imported in the app: its options, return value and types."
canonical_url: "https://nuxt-backend.dev/docs/reference/api/use-billing"
---
# useBilling

## Interfaces

### BillingPage

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

A page of provider records. The provider paginates by page number (not
cursor), so `pagination` carries the totals rather than a next token.

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="type-parameter-item-1">
        
      </a>
      
       <code>
        Item
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="items">
        
      </a>
      
       <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        Item
      </code>
      
      <span>
        
      </span>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pagination">
        
      </a>
      
       <code>
        pagination?
      </code>
    </td>
    
    <td>
      { <code>
        totalCount
      </code>
      
      : <code>
        number
      </code>
      
      ; <code>
        maxPage
      </code>
      
      : <code>
        number
      </code>
      
      ; }
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pagination.totalCount
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pagination.maxPage
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### PendingPlanUpdate

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

A scheduled plan change that takes effect next period (the provider's
`pendingUpdate`). Seats are deliberately absent — this package does not do
per-seat billing.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="id">
        
      </a>
      
       <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="appliesat">
        
      </a>
      
       <code>
        appliesAt
      </code>
    </td>
    
    <td>
      <code>
        Date
      </code>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      When the change takes effect; <code>
        null
      </code>
      
       when the provider did not say.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="productid">
        
      </a>
      
       <code>
        productId
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      The product the subscription switches to, <code>
        null
      </code>
      
       when unchanged.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### EntitlementBenefit

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

A granted benefit — the unit of feature-gating (`useFeatures().has()`).

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="id-1">
        
      </a>
      
       <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="benefitid">
        
      </a>
      
       <code>
        benefitId
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="type">
        
      </a>
      
       <code>
        type
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="metadata">
        
      </a>
      
       <code>
        metadata?
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        string
      </code>
      
       | <code>
        number
      </code>
      
       | <code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      The benefit's live provider metadata (not the grant-time snapshot). Set a stable key here (e.g. <code>
        { key: 'premium' }
      </code>
      
      ) to feature-gate by a friendly name — <code>
        useFeatures().has('premium')
      </code>
      
       matches any metadata value.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### EntitlementMeter

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

A prepaid credit-meter balance (`useCredits()`).

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="meterid">
        
      </a>
      
       <code>
        meterId
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="name">
        
      </a>
      
       <code>
        name?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The configured friendly name (<code>
        setupBilling({ credits })
      </code>
      
       / catalog key).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="consumedunits">
        
      </a>
      
       <code>
        consumedUnits
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="creditedunits">
        
      </a>
      
       <code>
        creditedUnits
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="balance">
        
      </a>
      
       <code>
        balance
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="cyclestart">
        
      </a>
      
       <code>
        cycleStart?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      The granting subscription's current period (epoch ms), when it has one — a meter has no period of its own in the provider's model, and one bought as a one-time credit pack has no cycle at all.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="cycleend">
        
      </a>
      
       <code>
        cycleEnd?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="rollover">
        
      </a>
      
       <code>
        rollover?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Whether unspent credited units carry into the next cycle. Only known on the syncs that re-read the granting benefit, so <code>
        undefined
      </code>
      
       means "not said", never "no".
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### Features

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Feature-gating state for the current user, as returned by `getFeatures`.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="plans">
        
      </a>
      
       <code>
        plans
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
      <span>
        
      </span>
    </td>
    
    <td>
      Active product ids the user is subscribed to.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="benefits">
        
      </a>
      
       <code>
        benefits
      </code>
    </td>
    
    <td>
      <a href="#entitlementbenefit">
        <code>
          EntitlementBenefit
        </code>
      </a>
      
      <span>
        
      </span>
    </td>
    
    <td>
      Granted benefits.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### Credits

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Prepaid credit balances for the current user, as returned by `getCredits`.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="meters">
        
      </a>
      
       <code>
        meters
      </code>
    </td>
    
    <td>
      <a href="#entitlementmeter">
        <code>
          EntitlementMeter
        </code>
      </a>
      
      <span>
        
      </span>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### CheckoutPrefill

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Pre-filled customer details for a checkout session (all still editable).

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="name-1">
        
      </a>
      
       <code>
        name?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="email">
        
      </a>
      
       <code>
        email?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="billingname">
        
      </a>
      
       <code>
        billingName?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The name that should appear on the invoice, when it differs from <code>
        name
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="billingaddress">
        
      </a>
      
       <code>
        billingAddress?
      </code>
    </td>
    
    <td>
      { <code>
        country
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        line1?
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        line2?
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        postalCode?
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        city?
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        state?
      </code>
      
      : <code>
        string
      </code>
      
      ; }
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        billingAddress.country
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      ISO 3166-1 alpha-2 country code — the one field the provider requires.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        billingAddress.line1?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        billingAddress.line2?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        billingAddress.postalCode?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        billingAddress.city?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        billingAddress.state?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="taxid">
        
      </a>
      
       <code>
        taxId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      VAT / tax identification number.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="business">
        
      </a>
      
       <code>
        business?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Bill a business: the provider then requires a full address and name.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### CampaignAttribution

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Campaign attribution, as a campaign link's UTM parameters: stored on the
order or subscription as `utm_*` metadata, each value cut to 100
characters.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="source">
        
      </a>
      
       <code>
        source?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="medium">
        
      </a>
      
       <code>
        medium?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="campaign">
        
      </a>
      
       <code>
        campaign?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="term">
        
      </a>
      
       <code>
        term?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="content">
        
      </a>
      
       <code>
        content?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### BillingApi

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

The billing function references — the result of `setupBilling().api` re-exported
from your `backend/billing.ts` (plus the optional `getCurrentSubscription`
query). Supplied automatically from the injected `api.billing` namespace;
pass `options.api` to override.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="getconfiguredproducts">
        
      </a>
      
       <code>
        getConfiguredProducts?
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
      
      <<code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <a href="#billingproduct">
        <code>
          BillingProduct
        </code>
      </a>
      
       | <code>
        undefined
      </code>
      
      >>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="listallsubscriptions">
        
      </a>
      
       <code>
        listAllSubscriptions?
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
      
      <<a href="#billingsubscription">
        <code>
          BillingSubscription
        </code>
      </a>
      
      <span>
        
      </span>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="getcurrentsubscription">
        
      </a>
      
       <code>
        getCurrentSubscription?
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
      
      <<a href="#billingsubscription">
        <code>
          BillingSubscription
        </code>
      </a>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="generatecheckoutlink">
        
      </a>
      
       <code>
        generateCheckoutLink?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , <a href="#checkoutargs">
        <code>
          CheckoutArgs
        </code>
      </a>
      
      , { <code>
        url
      </code>
      
      : <code>
        string
      </code>
      
      ; }>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="generatecustomerportalurl">
        
      </a>
      
       <code>
        generateCustomerPortalUrl?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        returnUrl?
      </code>
      
      : <code>
        string
      </code>
      
      ; }, { <code>
        url
      </code>
      
      : <code>
        string
      </code>
      
      ; }>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="updatesubscription">
        
      </a>
      
       <code>
        updateSubscription?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        subscriptionId?
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        productId?
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        proration?
      </code>
      
      : <a href="#clientprorationbehavior">
        <code>
          ClientProrationBehavior
        </code>
      </a>
      
      ; }, <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="cancelsubscription">
        
      </a>
      
       <code>
        cancelSubscription?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        subscriptionId?
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        atPeriodEnd?
      </code>
      
      : <code>
        boolean
      </code>
      
      ; <code>
        reason?
      </code>
      
      : <a href="#cancellationreason">
        <code>
          CancellationReason
        </code>
      </a>
      
      ; <code>
        comment?
      </code>
      
      : <code>
        string
      </code>
      
      ; }, <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="uncancelsubscription">
        
      </a>
      
       <code>
        uncancelSubscription?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        subscriptionId?
      </code>
      
      : <code>
        string
      </code>
      
      ; }, <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pausesubscription">
        
      </a>
      
       <code>
        pauseSubscription?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        subscriptionId?
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        resumesAt?
      </code>
      
      : <code>
        number
      </code>
      
      ; }, <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="resumesubscription">
        
      </a>
      
       <code>
        resumeSubscription?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        subscriptionId?
      </code>
      
      : <code>
        string
      </code>
      
      ; }, <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="getorders">
        
      </a>
      
       <code>
        getOrders?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , <a href="#ordersargs">
        <code>
          OrdersArgs
        </code>
      </a>
      
      , | <a href="#billingpage">
        <code>
          BillingPage
        </code>
      </a>
      
      <<a href="#billingorder">
        <code>
          BillingOrder
        </code>
      </a>
      
      > | <a href="#billingorder">
        <code>
          BillingOrder
        </code>
      </a>
      
      <span>
        
      </span>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="getinvoiceurl">
        
      </a>
      
       <code>
        getInvoiceUrl?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        orderId
      </code>
      
      : <code>
        string
      </code>
      
      ; }, | { <code>
        url
      </code>
      
      : <code>
        string
      </code>
      
      ; } | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="getusagehistory">
        
      </a>
      
       <code>
        getUsageHistory?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , <a href="#usageargs">
        <code>
          UsageArgs
        </code>
      </a>
      
      , | <a href="#billingpage">
        <code>
          BillingPage
        </code>
      </a>
      
      <<a href="#usageevent">
        <code>
          UsageEvent
        </code>
      </a>
      
      > | <a href="#usageevent">
        <code>
          UsageEvent
        </code>
      </a>
      
      <span>
        
      </span>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="getfeatures">
        
      </a>
      
       <code>
        getFeatures?
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
      
      <<a href="#features">
        <code>
          Features
        </code>
      </a>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="getcredits">
        
      </a>
      
       <code>
        getCredits?
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
      
      <<a href="#credits">
        <code>
          Credits
        </code>
      </a>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="syncentitlements">
        
      </a>
      
       <code>
        syncEntitlements?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , <code>
        EmptyArgs
      </code>
      
      , <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="giftcheckout">
        
      </a>
      
       <code>
        giftCheckout?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , <a href="#giftcheckoutargs">
        <code>
          GiftCheckoutArgs
        </code>
      </a>
      
      , { <code>
        url
      </code>
      
      : <code>
        string
      </code>
      
      ; }>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="getreceivedgifts">
        
      </a>
      
       <code>
        getReceivedGifts?
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
      
      <<a href="#receivedgift">
        <code>
          ReceivedGift
        </code>
      </a>
      
      <span>
        
      </span>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="claimgift">
        
      </a>
      
       <code>
        claimGift?
      </code>
    </td>
    
    <td>
      <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        giftId
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        successUrl?
      </code>
      
      : <code>
        string
      </code>
      
      ; }, { <code>
        url
      </code>
      
      : <code>
        string
      </code>
      
       | <code>
        null
      </code>
      
      ; }>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### ReceivedGift

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

A gift addressed to the current user (`getReceivedGifts` shape): paid and
claimed ones only, with the sender's name but never their email or a
billing id.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="id-2">
        
      </a>
      
       <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="purchasername">
        
      </a>
      
       <code>
        purchaserName?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The sender's name, at most 40 characters with no links.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pack-1">
        
      </a>
      
       <code>
        pack?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The credit pack's catalog key.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="productids-1">
        
      </a>
      
       <code>
        productIds
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
      <span>
        
      </span>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="message-1">
        
      </a>
      
       <code>
        message?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The sender's plain-text message, shown only inside the app.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="status">
        
      </a>
      
       <code>
        status
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'paid'
      </code>
      
       (claimable) → <code>
        'claimed'
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="createdat">
        
      </a>
      
       <code>
        createdAt
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="paidat">
        
      </a>
      
       <code>
        paidAt?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="claimedat">
        
      </a>
      
       <code>
        claimedAt?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### CheckoutOptions

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Per-call checkout overrides for [UseBillingReturn.checkout](#checkout). The
trial is the plan's own (the catalog's `trial`): a different one, or a
discount by id, is the server's choice — see `billing.checkout`.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="subscriptionid-1">
        
      </a>
      
       <code>
        subscriptionId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="metadata-3">
        
      </a>
      
       <code>
        metadata?
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        string
      </code>
      
      >
    </td>
    
    <td>
      Your own keys: the server refuses the ones the package reads back.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="locale-1">
        
      </a>
      
       <code>
        locale?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="successurl-2">
        
      </a>
      
       <code>
        successUrl?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Where checkout returns the customer afterwards, on the site's own origin. Defaults to the current URL.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="redirect">
        
      </a>
      
       <code>
        redirect?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Open in the same tab instead of a new one (redirect checkout).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="prefill-1">
        
      </a>
      
       <code>
        prefill?
      </code>
    </td>
    
    <td>
      <a href="#checkoutprefill">
        <code>
          CheckoutPrefill
        </code>
      </a>
    </td>
    
    <td>
      Pre-filled customer details — defaults the customer can still change.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="customfields-1">
        
      </a>
      
       <code>
        customFields?
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        string
      </code>
      
       | <code>
        number
      </code>
      
       | <code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Values for the organization's custom checkout fields, keyed by field slug.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="requirebillingaddress-1">
        
      </a>
      
       <code>
        requireBillingAddress?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Require the full billing address, not just the country.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="allowdiscountcodes-1">
        
      </a>
      
       <code>
        allowDiscountCodes?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Let the customer type a discount code (default <code>
        true
      </code>
      
      ).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="discountcode-1">
        
      </a>
      
       <code>
        discountCode?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      A discount code to apply up front — a campaign link's, say. The provider checks it like one the customer typed; one it refuses rejects the checkout as <code>
        invalid_input
      </code>
      
       (<code>
        discountCode
      </code>
      
      ).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="utm-1">
        
      </a>
      
       <code>
        utm?
      </code>
    </td>
    
    <td>
      <a href="#campaignattribution">
        <code>
          CampaignAttribution
        </code>
      </a>
    </td>
    
    <td>
      Campaign attribution (a campaign link's UTM parameters), stored as <code>
        utm_*
      </code>
      
       metadata.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseBillingOptions

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="api">
        
      </a>
      
       <code>
        api?
      </code>
    </td>
    
    <td>
      <a href="#billingapi">
        <code>
          BillingApi
        </code>
      </a>
    </td>
    
    <td>
      Override the injected <code>
        api.billing
      </code>
      
       namespace (or individual references).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### SubscriptionTargetOptions

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Which subscription a lifecycle call acts on. Omit for the account's single
live subscription; required once the backend runs with
`multipleSubscriptions` and one account can hold several at a time (the ids
are on [UseBillingReturn.subscriptions](#subscriptions)).

#### Extended by

- [`ChangePlanOptions`](#changeplanoptions)
- [`CancelOptions`](#canceloptions)
- [`PauseOptions`](#pauseoptions)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="subscriptionid-2">
        
      </a>
      
       <code>
        subscriptionId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### ChangePlanOptions

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Per-call options for [UseBillingReturn.changePlan](#changeplan).

#### Extends

- [`SubscriptionTargetOptions`](#subscriptiontargetoptions)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Inherited from
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="subscriptionid-3">
        
      </a>
      
       <code>
        subscriptionId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="#subscriptiontargetoptions">
        <code>
          SubscriptionTargetOptions
        </code>
      </a>
      
      .<a href="#subscriptionid-2">
        <code>
          subscriptionId
        </code>
      </a>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="proration">
        
      </a>
      
       <code>
        proration?
      </code>
    </td>
    
    <td>
      <a href="#clientprorationbehavior">
        <code>
          ClientProrationBehavior
        </code>
      </a>
    </td>
    
    <td>
      How to settle the mid-period difference. Defaults to the provider setting. Client-selectable behaviours only — see <a href="#clientprorationbehavior">
        ClientProrationBehavior
      </a>
      
      .
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### CancelOptions

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Per-call options for [UseBillingReturn.cancel](#cancel).

#### Extends

- [`SubscriptionTargetOptions`](#subscriptiontargetoptions)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Inherited from
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="subscriptionid-4">
        
      </a>
      
       <code>
        subscriptionId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="#subscriptiontargetoptions">
        <code>
          SubscriptionTargetOptions
        </code>
      </a>
      
      .<a href="#subscriptionid-2">
        <code>
          subscriptionId
        </code>
      </a>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="atperiodend">
        
      </a>
      
       <code>
        atPeriodEnd?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Keep access until the period the customer paid for ends (default <code>
        true
      </code>
      
      ). <code>
        false
      </code>
      
       revokes immediately — no refund is implied either way.
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="reason">
        
      </a>
      
       <code>
        reason?
      </code>
    </td>
    
    <td>
      <a href="#cancellationreason">
        <code>
          CancellationReason
        </code>
      </a>
    </td>
    
    <td>
      Churn reason, recorded on the subscription for the provider's analytics.
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="comment">
        
      </a>
      
       <code>
        comment?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The customer's own words. Visible to them in the provider's portal.
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### PauseOptions

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Per-call options for [UseBillingReturn.pause](#pause).

#### Extends

- [`SubscriptionTargetOptions`](#subscriptiontargetoptions)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Inherited from
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="subscriptionid-5">
        
      </a>
      
       <code>
        subscriptionId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="#subscriptiontargetoptions">
        <code>
          SubscriptionTargetOptions
        </code>
      </a>
      
      .<a href="#subscriptionid-2">
        <code>
          subscriptionId
        </code>
      </a>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="resumesat">
        
      </a>
      
       <code>
        resumesAt?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
      
       | <code>
        Date
      </code>
    </td>
    
    <td>
      When the subscription should resume by itself (epoch ms or <code>
        Date
      </code>
      
      ). Must be after the current period end; omit to keep it paused until <code>
        resume()
      </code>
      
      .
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseBillingReturn

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="products">
        
      </a>
      
       <code>
        products
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      < | <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <a href="#billingproduct">
        <code>
          BillingProduct
        </code>
      </a>
      
       | <code>
        undefined
      </code>
      
      > | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Configured products keyed by your product map, or <code>
        undefined
      </code>
      
       while loading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="subscription">
        
      </a>
      
       <code>
        subscription
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="#billingsubscription">
        <code>
          BillingSubscription
        </code>
      </a>
      
       | <code>
        null
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The current active subscription, <code>
        null
      </code>
      
       when on the free plan, <code>
        undefined
      </code>
      
       while loading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="subscriptions">
        
      </a>
      
       <code>
        subscriptions
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="#billingsubscription">
        <code>
          BillingSubscription
        </code>
      </a>
      
      <span>
        
      </span>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Every subscription for the user (incl. ended/expired trials), or <code>
        undefined
      </code>
      
       while loading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="issubscribed">
        
      </a>
      
       <code>
        isSubscribed
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       once an active subscription is known.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isfree">
        
      </a>
      
       <code>
        isFree
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       once it's known the user has no active subscription.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isloading">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       until the subscription state has loaded.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="status-1">
        
      </a>
      
       <code>
        status
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        null
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Provider subscription status (<code>
        active
      </code>
      
      , <code>
        trialing
      </code>
      
      , <code>
        past_due
      </code>
      
      , <code>
        paused
      </code>
      
      , <code>
        canceled
      </code>
      
      , …), <code>
        null
      </code>
      
       on the free plan, <code>
        undefined
      </code>
      
       while loading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="cancelatperiodend">
        
      </a>
      
       <code>
        cancelAtPeriodEnd
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       when the subscription is set to end when the paid period does.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pausedat">
        
      </a>
      
       <code>
        pausedAt
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        Date
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      When the subscription was paused, <code>
        null
      </code>
      
       while it is running. Read off the webhook-synced subscription row, whose columns are the provider component's — and that table carries no <code>
        paused_at
      </code>
      
       today, so this reads <code>
        null
      </code>
      
       until it does. Use <a href="#ispaused">
        UseBillingReturn.isPaused
      </a>
      
      , which also derives from <code>
        status
      </code>
      
      , to drive a paused-state UI.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="resumesat-1">
        
      </a>
      
       <code>
        resumesAt
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        Date
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      When a paused subscription resumes by itself, <code>
        null
      </code>
      
       when nothing is scheduled. Same caveat as <a href="#pausedat">
        UseBillingReturn.pausedAt
      </a>
      
      : the synced subscription row has no <code>
        resumes_at
      </code>
      
       column yet, so this is <code>
        null
      </code>
      
       until the provider component adds one.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="trialend">
        
      </a>
      
       <code>
        trialEnd
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        Date
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      End of the trial period, <code>
        null
      </code>
      
       when the plan has no trial.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="istrialing">
        
      </a>
      
       <code>
        isTrialing
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       while the subscription is in its trial period.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="ispaused">
        
      </a>
      
       <code>
        isPaused
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       while the subscription is paused.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pendingupdate">
        
      </a>
      
       <code>
        pendingUpdate
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="#pendingplanupdate">
        <code>
          PendingPlanUpdate
        </code>
      </a>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      A plan change already scheduled for the next period, <code>
        null
      </code>
      
       when none. Like <a href="#pausedat">
        UseBillingReturn.pausedAt
      </a>
      
      , this reads off the synced subscription row, which has no <code>
        pending_update
      </code>
      
       column yet — so it is <code>
        null
      </code>
      
       until the provider component syncs one.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="checkout">
        
      </a>
      
       <code>
        checkout
      </code>
    </td>
    
    <td>
      (<code>
        productIds
      </code>
      
      , <code>
        options?
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        string
      </code>
      
      >
    </td>
    
    <td>
      Generate a checkout for the given product(s) and open it (returns the URL).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="gift">
        
      </a>
      
       <code>
        gift
      </code>
    </td>
    
    <td>
      (<code>
        pack
      </code>
      
      , <code>
        options
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        string
      </code>
      
      >
    </td>
    
    <td>
      Buy a credit pack, by its catalog key, as a gift for someone else (by email). Opens checkout.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="portal">
        
      </a>
      
       <code>
        portal
      </code>
    </td>
    
    <td>
      (<code>
        options?
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        string
      </code>
      
      >
    </td>
    
    <td>
      Open the billing customer portal (returns the URL).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="changeplan">
        
      </a>
      
       <code>
        changePlan
      </code>
    </td>
    
    <td>
      (<code>
        productId
      </code>
      
      , <code>
        options?
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Switch the active subscription to another product (upgrade/downgrade).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="cancel">
        
      </a>
      
       <code>
        cancel
      </code>
    </td>
    
    <td>
      (<code>
        options?
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Cancel the active subscription — at period end by default.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="uncancel">
        
      </a>
      
       <code>
        uncancel
      </code>
    </td>
    
    <td>
      (<code>
        options?
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Undo a pending cancellation, putting the subscription back on renewal.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pause">
        
      </a>
      
       <code>
        pause
      </code>
    </td>
    
    <td>
      (<code>
        options?
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Pause the subscription at the end of the current period.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="resume">
        
      </a>
      
       <code>
        resume
      </code>
    </td>
    
    <td>
      (<code>
        options?
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Resume a paused subscription immediately (starts a new billing period).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### ProviderPager

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Reactive paging over a provider history endpoint (see [createProviderPager](#createproviderpager)).

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="type-parameter-item-3">
        
      </a>
      
       <code>
        Item
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="items-1">
        
      </a>
      
       <code>
        items
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        Item
      </code>
      
      <span>
        
      </span>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The current page's records — <code>
        undefined
      </code>
      
       until the first load resolves.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="page-2">
        
      </a>
      
       <code>
        page
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        number
      </code>
      
      >
    </td>
    
    <td>
      The page being shown; provider page numbers start at 1.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="total">
        
      </a>
      
       <code>
        total
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        number
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Total records across all pages, when the provider reported it.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pagecount">
        
      </a>
      
       <code>
        pageCount
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        number
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Number of pages, when the provider reported it.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="hasmore">
        
      </a>
      
       <code>
        hasMore
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Whether a further page exists.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="hasprevious">
        
      </a>
      
       <code>
        hasPrevious
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Whether an earlier page exists.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isloading-1">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Whether a load is in flight.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="error">
        
      </a>
      
       <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      Message of the last failed load, <code>
        null
      </code>
      
       otherwise. Loads never reject.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="refresh">
        
      </a>
      
       <code>
        refresh
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Reload the current page.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="next">
        
      </a>
      
       <code>
        next
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Load the next page (no-op at the end).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="previous">
        
      </a>
      
       <code>
        previous
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Load the previous page (no-op on page 1).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="goto">
        
      </a>
      
       <code>
        goTo
      </code>
    </td>
    
    <td>
      (<code>
        page
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Jump to a page number.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### ProviderPagerOptions

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Options for [createProviderPager](#createproviderpager).

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="limit-2">
        
      </a>
      
       <code>
        limit?
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        number
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Records per page. Reactive — changing it reloads from page 1.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="immediate">
        
      </a>
      
       <code>
        immediate?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Load the first page on mount. Default <code>
        true
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="enabled">
        
      </a>
      
       <code>
        enabled?
      </code>
    </td>
    
    <td>
      () => <code>
        boolean
      </code>
    </td>
    
    <td>
      While this is <code>
        false
      </code>
      
       the pager stays empty and never calls out.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="watchsources">
        
      </a>
      
       <code>
        watchSources?
      </code>
    </td>
    
    <td>
      () => <code>
        unknown
      </code>
    </td>
    
    <td>
      Extra reactive inputs that should reload from page 1 when they change.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### GiftOptions

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Per-call options for [UseBillingReturn.gift](#gift).

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="message-2">
        
      </a>
      
       <code>
        message?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      A plain-text note of at most 500 characters, no links, shown to the recipient inside the app.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="metadata-4">
        
      </a>
      
       <code>
        metadata?
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        string
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="successurl-3">
        
      </a>
      
       <code>
        successUrl?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Where the purchaser returns after paying. Defaults to the current URL.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="redirect-1">
        
      </a>
      
       <code>
        redirect?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Open in the same tab instead of a new one (redirect checkout).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

## Type Aliases

### BillingProduct

```ts
type BillingProduct = {
  id: string;
  name: string;
} & Record<string, unknown>;
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

A billing-provider product (loose — the provider owns the full shape; cast as needed).

#### Type Declaration

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### BillingSubscription

```ts
type BillingSubscription = {
  id: string;
  status: string;
  productId: string;
} & Record<string, unknown>;
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

A billing-provider subscription (loose — the provider owns the full shape; cast as needed).

#### Type Declaration

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        status
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        productId
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### BillingOrder

```ts
type BillingOrder = {
  id: string;
  createdAt: string;
  status: string;
  totalAmount: number;
  currency: string;
  paid?: boolean;
  invoiceNumber?: string | null;
  isInvoiceGenerated?: boolean;
  billingReason?: string;
  productId?: string | null;
  subscriptionId?: string | null;
  product?:   | {
     id: string;
     name: string;
   }
     | null;
} & Record<string, unknown>;
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

A past charge, as the provider's orders API returns it. Field names mirror
the provider `Order` shape so nothing is lost in translation; the index
signature keeps the rest reachable without a cast.

#### Type Declaration

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        createdAt
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      ISO timestamp of the charge.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        status
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        totalAmount
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      Amount in the currency's minor unit (cents), after discounts and taxes.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        currency
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        paid?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        invoiceNumber?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      Assigned when the invoice is finalized; <code>
        null
      </code>
      
       on draft orders.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        isInvoiceGenerated?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Whether an invoice PDF exists yet — <code>
        getInvoiceUrl
      </code>
      
       needs one.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        billingReason?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        productId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        subscriptionId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        product?
      </code>
    </td>
    
    <td>
      | { <code>
        id
      </code>
      
      : <code>
        string
      </code>
      
      ; <code>
        name
      </code>
      
      : <code>
        string
      </code>
      
      ; } | <code>
        null
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UsageEvent

```ts
type UsageEvent = {
  id: string;
  timestamp: string;
  name: string;
  units?: number;
  metadata?: Record<string, string | number | boolean>;
} & Record<string, unknown>;
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

One ingested usage event, as the provider's events API returns it — the
source of truth for consumption history (this package keeps no local
usage ledger). `units` is resolved server-side from the meter's value
property and is absent when the meter is unknown.

#### Type Declaration

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        timestamp
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      ISO timestamp of the event.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The ingested event name (the one the meter filters on).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        units?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        metadata?
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        string
      </code>
      
       | <code>
        number
      </code>
      
       | <code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### ClientProrationBehavior

```ts
type ClientProrationBehavior = "invoice" | "prorate";
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

The subset of the provider's proration behaviours a **client** may choose
(`ProrationBehavior` in `nuxt-backend/billing` has all four). `invoice` and
`prorate` settle the difference now; `next_period` and `reset` hand over the
new plan immediately while deferring or waiving the charge, so they stay
server-side — pass them from your own Convex action via
`billing.updateSubscription(ctx, …)`, or make one the organization's default.

---

### CancellationReason

```ts
type CancellationReason = 
  | "customer_service"
  | "low_quality"
  | "missing_features"
  | "switched_service"
  | "too_complex"
  | "too_expensive"
  | "unused"
  | "other";
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

The provider's churn-reason enum, recorded with a cancellation.

---

### CheckoutArgs

```ts
type CheckoutArgs = {
  productIds: string[];
  origin: string;
  successUrl: string;
  subscriptionId?: string;
  metadata?: Record<string, string>;
  locale?: string;
  prefill?: CheckoutPrefill;
  customFields?: Record<string, string | number | boolean>;
  requireBillingAddress?: boolean;
  allowDiscountCodes?: boolean;
  discountCode?: string;
  utm?: CampaignAttribution;
};
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Args of the generated `generateCheckoutLink` action. The server sells
only the app's catalog and returns only to the site; the trial is the
product's own, and a discount by id is the server's to apply.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="productids">
        
      </a>
      
       <code>
        productIds
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
      <span>
        
      </span>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="origin">
        
      </a>
      
       <code>
        origin
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="successurl">
        
      </a>
      
       <code>
        successUrl
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="subscriptionid">
        
      </a>
      
       <code>
        subscriptionId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="metadata-1">
        
      </a>
      
       <code>
        metadata?
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        string
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="locale">
        
      </a>
      
       <code>
        locale?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="prefill">
        
      </a>
      
       <code>
        prefill?
      </code>
    </td>
    
    <td>
      <a href="#checkoutprefill">
        <code>
          CheckoutPrefill
        </code>
      </a>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="customfields">
        
      </a>
      
       <code>
        customFields?
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        string
      </code>
      
       | <code>
        number
      </code>
      
       | <code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Values for the organization's custom checkout fields, keyed by field slug.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="requirebillingaddress">
        
      </a>
      
       <code>
        requireBillingAddress?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Require the full billing address, not just the country.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="allowdiscountcodes">
        
      </a>
      
       <code>
        allowDiscountCodes?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Let the customer type a discount code (default <code>
        true
      </code>
      
      ).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="discountcode">
        
      </a>
      
       <code>
        discountCode?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      A discount code to apply up front (a campaign link's), checked by the provider.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="utm">
        
      </a>
      
       <code>
        utm?
      </code>
    </td>
    
    <td>
      <a href="#campaignattribution">
        <code>
          CampaignAttribution
        </code>
      </a>
    </td>
    
    <td>
      Campaign attribution, stored as <code>
        utm_*
      </code>
      
       metadata.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### OrdersArgs

```ts
type OrdersArgs = {
  page?: number;
  limit?: number;
};
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Args of the `getOrders` action — provider page numbers start at 1.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="page">
        
      </a>
      
       <code>
        page?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="limit">
        
      </a>
      
       <code>
        limit?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UsageArgs

```ts
type UsageArgs = {
  meter?: string;
  page?: number;
  limit?: number;
  startTimestamp?: number;
  endTimestamp?: number;
};
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Args of the `getUsageHistory` action (provider event history for one meter).

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="meter">
        
      </a>
      
       <code>
        meter?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      A configured credit-meter name, or a raw meter id.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="page-1">
        
      </a>
      
       <code>
        page?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="limit-1">
        
      </a>
      
       <code>
        limit?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="starttimestamp">
        
      </a>
      
       <code>
        startTimestamp?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      Epoch milliseconds — only events at or after this moment.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="endtimestamp">
        
      </a>
      
       <code>
        endTimestamp?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      Epoch milliseconds — only events at or before this moment.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### GiftCheckoutArgs

```ts
type GiftCheckoutArgs = {
  pack: string;
  recipientEmail: string;
  message?: string;
  origin: string;
  successUrl: string;
  metadata?: Record<string, string>;
};
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Args of the `giftCheckout` action: the purchaser's own checkout of a pack for someone else.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="pack">
        
      </a>
      
       <code>
        pack
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      The credit pack's catalog key (<code>
        credits500
      </code>
      
      ): gifts are packs only.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="recipientemail">
        
      </a>
      
       <code>
        recipientEmail
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="message">
        
      </a>
      
       <code>
        message?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="origin-1">
        
      </a>
      
       <code>
        origin
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="successurl-1">
        
      </a>
      
       <code>
        successUrl
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="metadata-2">
        
      </a>
      
       <code>
        metadata?
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        string
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts" rel="nofollow">
        src/runtime/vue/composables/use-billing.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### PageFetcher

```ts
type PageFetcher<Item> = (args) => Promise<BillingPage<Item> | Item[] | null>;
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Fetches one page from a provider-history action.

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="type-parameter-item-2">
        
      </a>
      
       <code>
        Item
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        args
      </code>
    </td>
    
    <td>
      { <code>
        page
      </code>
      
      : <code>
        number
      </code>
      
      ; <code>
        limit?
      </code>
      
      : <code>
        number
      </code>
      
      ; }
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        args.page
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        args.limit?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Promise`<[`BillingPage`](#billingpage)<`Item`> | `Item`<span>



</span>

 | `null`>

## Functions

### toBillingDate()

```ts
function toBillingDate(value): Date | null;
```

Defined in: [src/runtime/vue/composables/billing-format.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/billing-format.ts)

Provider timestamps reach the client as ISO strings (the component's cache
stores them that way) but as epoch numbers when an action forwards the SDK's
`Date` through Convex's JSON wire. Accept both, and never hand a component an
`Invalid Date`.

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        value
      </code>
    </td>
    
    <td>
      <code>
        unknown
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Returns

`Date` | `null`

---

### formatBillingAmount()

```ts
function formatBillingAmount(amount, currency?): string;
```

Defined in: [src/runtime/vue/composables/billing-format.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/billing-format.ts)

Money the way the provider states it — a minor-unit integer plus an ISO
currency code — rendered in the visitor's own locale. Unknown currency codes
fall back to the bare amount rather than throwing mid-render.

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        amount
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        currency?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
       | <code>
        null
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Returns

`string`

---

### createCheckout()

```ts
function createCheckout(billing): (productIds, opts) => Promise<string>;
```

Defined in: [src/runtime/vue/composables/billing-provider.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/billing-provider.ts)

Build a `checkout(productIds, options)` action over a billing namespace —
shared by [useBilling](#usebilling) (subscriptions) and
["runtime/vue/composables/use-credits"!useCredits](https://nuxt-backend.dev/docs/reference/api/use-credits#usecredits) (top-ups),
since a credit-pack top-up is just a checkout for a one-time product. Must be
called during component setup (it sets up the underlying action).

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        billing
      </code>
    </td>
    
    <td>
      <a href="#billingapi">
        <code>
          BillingApi
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

(`productIds`, `opts`) => `Promise`<`string`>

---

### createProviderPager()

```ts
function createProviderPager<Item>(fetchPage, options?): ProviderPager<Item>;
```

Defined in: [src/runtime/vue/composables/billing-provider.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/billing-provider.ts)

The reactive paging both provider-history composables need — `useOrders`
and `useUsage` differ only in what they fetch. Provider history lives behind
page numbers rather than a cursor, so this tracks a page and its totals.

Loads run in the browser only (they need a Convex client and the signed-in
identity), never reject — a failure lands in `error` so a permanently
mounted history panel cannot break a page — and stay put when `fetchPage` is
`null`, which is how an undeployed backend function degrades. Must be called
during component setup.

#### Type Parameters

<table>
<thead>
  <tr>
    <th>
      Type Parameter
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="type-parameter-item">
        
      </a>
      
       <code>
        Item
      </code>
    </td>
  </tr>
</tbody>
</table>

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        fetchPage
      </code>
    </td>
    
    <td>
      <a href="#pagefetcher">
        <code>
          PageFetcher
        </code>
      </a>
      
      <<code>
        Item
      </code>
      
      > | <code>
        null
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options?
      </code>
    </td>
    
    <td>
      <a href="#providerpageroptions">
        <code>
          ProviderPagerOptions
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`ProviderPager`](#providerpager)<`Item`>

---

### createGiftCheckout()

```ts
function createGiftCheckout(billing): (pack, opts) => Promise<string>;
```

Defined in: [src/runtime/vue/composables/billing-provider.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/billing-provider.ts)

Build a `gift(pack, { recipientEmail, ... })` action over a billing
namespace — shared by [useBilling](#usebilling) and
["runtime/vue/composables/use-credits"!useCredits](https://nuxt-backend.dev/docs/reference/api/use-credits#usecredits). A gift is a
credit pack, named by its catalog key (`credits500`); the server refuses
a plan or anything outside the catalog. The purchaser pays on their own
billing account and gets the receipt; the recipient (by email) signs in
and claims the credits (`useGifts().claim`). Must be called during
component setup.

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        billing
      </code>
    </td>
    
    <td>
      <a href="#billingapi">
        <code>
          BillingApi
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

(`pack`, `opts`) => `Promise`<`string`>

---

### useBilling()

```ts
function useBilling(options?): UseBillingReturn;
```

Defined in: [src/runtime/vue/composables/use-billing.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-billing.ts)

Reactive billing state plus the full subscription lifecycle — checkout,
gift, portal, plan change, cancel/uncancel, pause/resume — linked to your
auth user. Works with no arguments via the auto-provided `api.billing`
namespace; pass `{ api }` to override.

Lifecycle reads (`status`, `cancelAtPeriodEnd`, `trialEnd`, `pausedAt`,
`pendingUpdate`, …) come straight off the provider's subscription record,
and every action degrades on its own: a backend that has not deployed the
matching function reads as "not set" and throws only when actually called.

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        options?
      </code>
    </td>
    
    <td>
      <a href="#usebillingoptions">
        <code>
          UseBillingOptions
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UseBillingReturn`](#usebillingreturn)

#### Example

```vue
<script setup lang="ts">
const billing = useBilling()
</script>
<template>
  <p v-if="billing.isSubscribed.value">Pro</p>
  <button @click="billing.checkout(productId, { utm: { source: 'newsletter' } })">
    Upgrade
  </button>
</template>
```


## Sitemap

See the full [sitemap](https://nuxt-backend.dev/sitemap.md) for all pages.