`useCartPaymentDetails(id?: string)`

The useCartPaymentDetails() composable allows for:

creating new PaymentDetails and assigning them to a cart
assigning existing PaymentDetails to a cart

useCartPaymentDetails() should be treated as an extension for useCart(). To bind particular instances of the useCart() and useCartPaymentDetails() together, they simply have to be called with the same unique id as the only argument.

Example

In the following example we are loading a new session cart using useCart().load method and exposing additional functionalities (i.e. creating and assigning payment details to a cart) with the useCartPaymentDetails() composable.

import { onMounted } from '@nuxtjs/composition-api';
import { useCart, useCartPaymentDetails } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { cart, load } = useCart('unique-id');
    const { create: createPaymentDetails } = useCartPaymentDetails('unique-id');

    onMounted(async () => {
      await load();
    });

    return { createPaymentDetails };
  }
}

Be careful about shared state

You should pass a unique id as a parameter to avoid state conflicts when using multiple instances of this composable. Every instance with the same id (or those that lack it) will share the same state, even on different pages.

`loading`

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedProperty<UseCartPaymentDetailsLoading>;

References: UseCartPaymentDetailsLoading

`error`

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseCartPaymentDetailsError>;

References: UseCartPaymentDetailsError

`create()`

Creates a new PaymentDetails objects, assigns it to a cart and updates the cart object of the bound useCart() composable. Under the hood, it calls the addCartEntry API endpoint.

Remember!

This method will not work on an anonymous cart. It has to have at least an email address set.

Type

interface CreateCartPaymentDetailsProps extends BaseProps {
  paymentDetails: PaymentDetails;
}

async function create: (props: CreateCartPaymentDetailsProps): Promise<void>;

References: CreateCartPaymentDetailsProps, BaseProps, PaymentDetails

Example

In the following example we are creating a simple wrapper for the create() method. It creates and assigns a dummy PaymentDetails object to a cart.

import { useCartPaymentDetails } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { create } = useCartPaymentDetails('unique-id');
    
    const billingAddress = {
      titleCode: 'mr',
      firstName: 'John',
      lastName: 'Doe',
      line1: 'Downing Street',
      postalCode: '03-122',
      country: { isocode: 'gb' },
      town: 'London'
    };

    const paymentDetails = {
      accountHolderName: 'John Doe',
      billingAddress,
      cardNumber: '4111111111111111',
      cardType: { code: 'amex' },
      expiryMonth: '03',
      expiryYear: '2029'
    };

    const createCartPaymentDetails = async () => {
      await create({ paymentDetails });
    };

    return { createCartPaymentDetails };
  }
}

`replace()`

Assigns an existing PaymentDetails object to a cart and updates the cart object of the bound useCart() composable. Under the hood, it calls the replaceCartPaymentDetails API endpoint.

Remember!

This method will not work when used during an anonymous session.

Type

interface ReplaceCartPaymentDetailsProps extends BaseProps {
  paymentDetailsId: string;
}

async function replace: (props: ReplaceCartPaymentDetailsProps): Promise<void>;

References: ReplaceCartPaymentDetailsProps, BaseProps

Example

In this example we are creating a simple wrapper around the replace() method. It accepts a raw PaymentDetails object and calls the replace() method with the right arguments.

import { useCartPaymentDetails } from '@vsf-enterprise/sapcc';

export default {
  setup() {
    const { replace } = useCartPaymentDetails('unique-id');

    const replaceCartPaymentDetails = async (paymentDetails) => {
      const { id } = paymentDetails;
      await replace({ paymentDetailsId: id });
    };

    return { replaceCartPaymentDetails };
  }
}

← useCartEntries()

useCartPromotions() →