---
title: Interface: UseSubscription
slug: chord-ui/interface-usesubscription
docTags: 
createdAt: 2023-11-06T15:03:31.906Z
---

[react-autonomy](docId\:zoZ6W56ubpPACr0PO0GLS).UseSubscription

`UseSubscription` contains all the data and methods returned by the
[useSubscription](docId:1veR5HM0sFxaUI6bJuh9Z) hook.

## Properties

### cancelSubscription

• **cancelSubscription**: (`options?`: [`CancelSubscription`](docId\:SmV1laVTpBIvC8k90El3o)) => `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Type declaration

▸ (`options?`): `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

The `cancelSubscription` function calls the Chord API to cancel
the subscription.



```javascript
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, cancelSubscription } = useSubscription({ subscriptionId })

  const onClick = async () => {
    return cancelSubscription()
  }

  return <button onClick={onClick}>Cancel Subscription</button>
}
```

### Parameters

| Name       | Type                                                 |
| ---------- | ---------------------------------------------------- |
| `options?` | [`CancelSubscription`](docId\:SmV1laVTpBIvC8k90El3o) |

### Returns

`Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:205](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L205)

***

### error

• **error**: `Error`

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:122](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L122)

***

### isFetching

• **isFetching**: `boolean`

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:124](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L124)

***

### isLoaded

• **isLoaded**: `boolean`

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:123](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L123)

***

### loadSubscription

• **loadSubscription**: () => `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Type declaration

▸ (): `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

The `loadSubscription` function loads information about the subscription
from the Chord API.

You shouldn't need to call this function, except in exceptional
circumstances, as the [useSubscription](docId:1veR5HM0sFxaUI6bJuh9Z) hook will automatically start
loading the subscription when the hook is initialized.



Here's an example of when you might want to use `loadSubscription` in
a custom callback. It should be noted that `skipSubscription` returns the
updated subscription, but in this example, assume that it doesn't for
educational purposes.

```javascript
import { useSubscription } from '@chordcommerce/react-autonomy'
import customEventingFunction from '~/app/events'

const SkipSubscriptionButon = ({ subscriptionId }) => {
  const {
    subscription,
    loadSubscription,
    skipSubscription
  } = useSubscription({ subscriptionId })

  const handleClick = async () =>
    await skipSubscription()
    const updatedSubscription = await loadSubscription()
    await customEventingFunction('Subscription Skipped', {
      newEndDate: updatedSubscription.endDate,
    })
  }

  return <button onClick={handleClick}>Skip</button>
}
```

### Returns

`Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:163](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L163)

***

### pauseSubscription

• **pauseSubscription**: (`options`: [`PauseSubscription`](docId\:qQNVonlbd1nyMPybaNCKP)) => `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Type declaration

▸ (`options`): `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

The `pauseSubscription` function calls the Chord API to pause
a subscription.



```javascript
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, pauseSubscription } = useSubscription({ subscriptionId })

  const onClick = async () => {
    return pauseSubscription({ actionableDate: new Date().toISOString() })
  }

  return <button onClick={onClick}>Pause Subscription</button>
}
```

### Parameters

| Name      | Type                                                |
| --------- | --------------------------------------------------- |
| `options` | [`PauseSubscription`](docId\:qQNVonlbd1nyMPybaNCKP) |

### Returns

`Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:271](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L271)

***

### resumeSubscription

• **resumeSubscription**: (`options`: [`ResumeSubscription`](docId\:lIdCfvnaKOObaF7xpALOO)) => `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Type declaration

▸ (`options`): `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

The `resumeSubscription` function calls the Chord API to resume
a subscription.

Paused subscriptions will not be processed until manually `resumed` or the
`actionableDate` is reached.



```javascript
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, resumeSubscription } = useSubscription({ subscriptionId })

  const onClick = async () => {
    return resumeSubscription({ actionableDate: new Date().toISOString() })
  }

  return <button onClick={onClick}>Resume Subscription</button>
}
```

### Parameters

| Name      | Type                                                 |
| --------- | ---------------------------------------------------- |
| `options` | [`ResumeSubscription`](docId\:lIdCfvnaKOObaF7xpALOO) |

### Returns

`Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:295](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L295)

***

### skipSubscription

• **skipSubscription**: (`options?`: [`SkipSubscription`](docId:0MRRULvZ7GSH1qDivfbtx)) => `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Type declaration

▸ (`options?`): `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

The `skipSubscription` function calls the Chord API to skip the next
subscription delivery.



```javascript
import { useSubscription } from '@chordcommerce/react-autonomy'

export default subscriptionId => {
  const { subscription, skipSubscription } = useSubscription({ subscriptionId })

  const onClick = () => {
    skipSubscription()
  }

  return <button onClick={onClick}>Skip Next Shipment</button>
}
```

### Parameters

| Name       | Type                                              |
| ---------- | ------------------------------------------------- |
| `options?` | [`SkipSubscription`](docId:0MRRULvZ7GSH1qDivfbtx) |

### Returns

`Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:184](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L184)

***

### subscription

• **subscription**: [`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:121](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L121)

***

### updateSubscription

• **updateSubscription**: (`options`: [`SubscriptionUpdateProps`](docId\:pHpumfZBeo5wqt93bmAcb)) => `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Type declaration

▸ (`options`): `Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

The `updateSubscription` function calls the Chord API to update
a subscription.



```javascript
import { useSubscription } from '@chordcommerce/react-autonomy'

export default () => {
  const { updateSubscription } = useSubscription(subscription.id)
  const onSubmit = async data => {
    try {
      let response = await updateSubscription({
        shipAddressAttributes: data.addressAttributes,
        billAddressAttributes: data.addressAttributes,
        intervalLength: 2,
        intervalUnits: 'month',
        endDate: '2021-12-31',
        actionableDate: '2030-08-18'
      })
      console.log(response)
    } catch (error) {
      console.error(error)
    }
  }
}

// Default Form Values:

const address = subscription['shipAddress']
const addressAttributes = {
  name: address.name,
  address1: address.address1,
  address2: address.address2,
  city: address.city,
  state_name: address.state.abbr,
  country_iso: address.country.iso,
  zipcode: address.zipcode
}
```

### Parameters

| Name      | Type                                                      |
| --------- | --------------------------------------------------------- |
| `options` | [`SubscriptionUpdateProps`](docId\:pHpumfZBeo5wqt93bmAcb) |

### Returns

`Promise`\<[`Subscription`](docId\:lOyAdM9adKRJFnxzszfYa)>

### Defined in

[packages/react-autonomy/src/hooks/use-subscription.ts:248](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-subscription.ts#L248)