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

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

`UseCheckout` contains checkout-related functions returned by [useCheckout](docId\:GO7Z_ukS4fuvnKD67yRqJ).

## Properties

### completeAddressStep

• **completeAddressStep**: (`order?`: [`CheckoutOrderInput`](docId\:q7be-OnFKgdY7H8yx6iel)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`order?`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `completeAddressStep` function saves shipping and billing addresses,
and advances the checkout to the next step in the checkout process. `completeAddressStep`,
`completeDeliveryStep`, and `completePaymentStep` must be called sequentially in this
exact order to correctly complete a checkout.

Note: This function does not work with Stripe Checkout, because Stripe Checkout captures
addresses as part of the hosted checkout experience.



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

export default () => {
  const { completeAddressStep } = useCheckout()

  completeAddressStep({
    billAddressAttributes: {
      name: 'Customer',
      address1: '123 Oak Street',
      city: 'Portland',
      zipcode: '04102',
      phone: '1111111111',
      countryId: 233,
      stateId: 3367,
    },
    useBilling: true,
  })
}
```

### Parameters

| Name     | Type                                                 |
| -------- | ---------------------------------------------------- |
| `order?` | [`CheckoutOrderInput`](docId\:q7be-OnFKgdY7H8yx6iel) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

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

***

### completeDeliveryStep

• **completeDeliveryStep**: (`order?`: [`CheckoutOrderInput`](docId\:q7be-OnFKgdY7H8yx6iel)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`order?`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `completeDeliveryStep` function saves a chosen delivery method and advances the checkout to the next step
in the checkout process. Shipping costs and taxes will be added to the order.
`completeAddressStep`, `completeDeliveryStep`, and `completePaymentStep` must be called sequentially in this
exact order to correctly complete a checkout.

Note: This function does not work with Stripe Checkout, because Stripe Checkout captures
delivery method as part of the hosted checkout experience.



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

export default () => {
  const { completeDeliveryStep } = useCheckout()

  completeDeliveryStep({
    shipmentsAttributes: [
      {
        id: 5930,
        selectedShippingRateId: 11608,
      },
    ],
  })
}
```

### Parameters

| Name     | Type                                                 |
| -------- | ---------------------------------------------------- |
| `order?` | [`CheckoutOrderInput`](docId\:q7be-OnFKgdY7H8yx6iel) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

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

***

### completePaymentStep

• **completePaymentStep**: (`order?`: [`CheckoutOrderInput`](docId\:q7be-OnFKgdY7H8yx6iel)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`order?`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `completePaymentStep` function saves a payment nonce from a third party payment provider,
and advances the checkout to the next step in the checkout process. `completeAddressStep`,
`completeDeliveryStep`, and `completePaymentStep` must be called sequentially in this
exact order to correctly complete a checkout.

Note: This function does not work with Stripe Checkout, because Stripe Checkout captures
payment as part of the hosted checkout experience.



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

export default () => {
  const { completePaymentStep } = useCheckout()

  completePaymentStep({
    paymentsAttributes: [
      {
        paymentMethodType: 'square',
        sourceAttributes: {
          nonce: 'fake-valid-visa-nonce',
        },
      },
    ],
  })
}
```

### Parameters

| Name     | Type                                                 |
| -------- | ---------------------------------------------------- |
| `order?` | [`CheckoutOrderInput`](docId\:q7be-OnFKgdY7H8yx6iel) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

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

***

### finalizeCheckout

• **finalizeCheckout**: (`options?`: [`FinalizeCheckout`](docId\:d2pNFEZsYeyylhpdtREpn)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`options?`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `finalizeCheckout` function should be called when checkout has been completed.



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

export default () => {
  const { finalizeCheckout } = useCheckout()

  finalizeCheckout({
    orderNumber: 'BB123',
    checkoutSessionId: '123',
  })
}
```

### Parameters

| Name       | Type                                               |
| ---------- | -------------------------------------------------- |
| `options?` | [`FinalizeCheckout`](docId\:d2pNFEZsYeyylhpdtREpn) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

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

***

### getStates

• **getStates**: (`options`: [`GetStates`](docId\:KsCREDG07Y176hVzTm6cq)) => `Promise`\<[`CountryStates`](docId:-bmuvvWrGmU-bs-M3KFhK)>

### Type declaration

▸ (`options`): `Promise`\<[`CountryStates`](docId:-bmuvvWrGmU-bs-M3KFhK)>

The `getStates` function is used to retrieve information about countries and
states available in the system to be used when we need to update the order's address.
It takes the ISO code of the country and returns the list of states along with other
information related to the country itself.



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

export default () => {
  const { getStates } = useCheckout()

  getStates({ countryIso: 'USA' })
}
```

### Parameters

| Name      | Type                                        |
| --------- | ------------------------------------------- |
| `options` | [`GetStates`](docId\:KsCREDG07Y176hVzTm6cq) |

### Returns

`Promise`\<[`CountryStates`](docId:-bmuvvWrGmU-bs-M3KFhK)>

### Defined in

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

***

### modifyCheckout

• **modifyCheckout**: (`input`: [`CheckoutOrderInput`](docId\:q7be-OnFKgdY7H8yx6iel) | [`CheckoutInput`](docId:0sJJI8iUpSzXdbHScgbuG)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`input`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `modifyCheckout` function can be used to update any information about a checkout, including
addresses, delivery methods, and payment information. `completeAddressStep`, `completeDeliveryStep`,
and `completePaymentStep` use `modifyCheckout` internally.

It calls the [Chord OMS update checkout endpoint](https://chord.stoplight.io/docs/chord-oms/91f77b1801684-update-checkout).



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

export default () => {
  const { modifyCheckout } = useCheckout()

  modifyCheckout({
    order: {
      email: 'boom@bim.com',
    },
    state: 'address',
  })
}
```

### Parameters

| Name    | Type                                                                                                   |
| ------- | ------------------------------------------------------------------------------------------------------ |
| `input` | [`CheckoutOrderInput`](docId\:q7be-OnFKgdY7H8yx6iel) \| [`CheckoutInput`](docId:0sJJI8iUpSzXdbHScgbuG) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

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

***

### prepareCheckout

• **prepareCheckout**: (`options?`: [`PrepareCheckout`](docId:1j4MYdNmc0JuZGuUFuLc4)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`options?`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `prepareCheckout` function prepares the cart for checkout by attaching a checkoutSessionId
to be passed to Stripe's checkout. It should be called just before redirecting to Stripe's checkout.

Note: This function only works with Stripe Checkout.



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

export default () => {
  const { prepareCheckout } = useCheckout()

  prepareCheckout()
}
```

### Parameters

| Name       | Type                                             |
| ---------- | ------------------------------------------------ |
| `options?` | [`PrepareCheckout`](docId:1j4MYdNmc0JuZGuUFuLc4) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

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