Interfaces
Interface: UseCheckout

﻿react-autonomy﻿.UseCheckout
UseCheckout contains checkout-related functions returned by useCheckout﻿.
Properties
completeAddressStep
• completeAddressStep: (order?: CheckoutOrderInput﻿) => Promise<OrderBig﻿>
Type declaration
▸ (order?): Promise<OrderBig﻿>
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.
﻿
JS
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,
  })
}
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﻿﻿
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-checkout.ts:103﻿
﻿
completeDeliveryStep
• completeDeliveryStep: (order?: CheckoutOrderInput﻿) => Promise<OrderBig﻿>
Type declaration
▸ (order?): Promise<OrderBig﻿>
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.
﻿
JS
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  completeDeliveryStep({
    shipmentsAttributes: [
      {
        id: 5930,
        selectedShippingRateId: 11608,
      },
    ],
  })
}
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  completeDeliveryStep({
    shipmentsAttributes: [
      {
        id: 5930,
        selectedShippingRateId: 11608,
      },
    ],
  })
}
﻿
Parameters
Name
Type
order?
﻿CheckoutOrderInput﻿﻿
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-checkout.ts:132﻿
﻿
completePaymentStep
• completePaymentStep: (order?: CheckoutOrderInput﻿) => Promise<OrderBig﻿>
Type declaration
▸ (order?): Promise<OrderBig﻿>
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.
﻿
JS
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  completePaymentStep({
    paymentsAttributes: [
      {
        paymentMethodType: 'square',
        sourceAttributes: {
          nonce: 'fake-valid-visa-nonce',
        },
      },
    ],
  })
}
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﻿﻿
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-checkout.ts:163﻿
﻿
finalizeCheckout
• finalizeCheckout: (options?: FinalizeCheckout﻿) => Promise<OrderBig﻿>
Type declaration
▸ (options?): Promise<OrderBig﻿>
The finalizeCheckout function should be called when checkout has been completed.
﻿
JS
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  finalizeCheckout({
    orderNumber: 'BB123',
    checkoutSessionId: '123',
  })
}
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  finalizeCheckout({
    orderNumber: 'BB123',
    checkoutSessionId: '123',
  })
}
﻿
Parameters
Name
Type
options?
﻿FinalizeCheckout﻿﻿
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-checkout.ts:182﻿
﻿
getStates
• getStates: (options: GetStates﻿) => Promise<CountryStates﻿>
Type declaration
▸ (options): Promise<CountryStates﻿>
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.
﻿
JS
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  getStates({ countryIso: 'USA' })
}
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  getStates({ countryIso: 'USA' })
}
﻿
Parameters
Name
Type
options
﻿GetStates﻿﻿
Returns
Promise<CountryStates﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-checkout.ts:201﻿
﻿
modifyCheckout
• modifyCheckout: (input: CheckoutOrderInput﻿ | CheckoutInput﻿) => Promise<OrderBig﻿>
Type declaration
▸ (input): Promise<OrderBig﻿>
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.
﻿
JS
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  modifyCheckout({
    order: {
      email: '[email protected]',
    },
    state: 'address',
  })
}
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  modifyCheckout({
    order: {
      email: 'boom@bim.com',
    },
    state: 'address',
  })
}
﻿
Parameters
Name
Type
input
﻿CheckoutOrderInput﻿ | CheckoutInput﻿﻿
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-checkout.ts:226﻿
﻿
prepareCheckout
• prepareCheckout: (options?: PrepareCheckout﻿) => Promise<OrderBig﻿>
Type declaration
▸ (options?): Promise<OrderBig﻿>
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.
﻿
JS
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  prepareCheckout()
}
import { useCheckout } from '@chordcommerce/react-autonomy'

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

  prepareCheckout()
}
﻿
Parameters
Name
Type
options?
﻿PrepareCheckout﻿﻿
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-checkout.ts:247﻿
Name	Type
order?	CheckoutOrderInput
Name	Type
order?	CheckoutOrderInput
Name	Type
order?	CheckoutOrderInput
Name	Type
options?	FinalizeCheckout
Name	Type
options	GetStates
Name	Type
input	CheckoutOrderInput \| CheckoutInput
Name	Type
options?	PrepareCheckout
Updated 25 Mar 2024
Interface: UseCart
Interface: UseOrder