usePaymentProvider

usePaymentProvider composable can be used to load available payment methods for the current cart and select a payment method.

Learn more about Payment Providers (opens new window) in Vue Storefront.

API

usePaymentProvider returns the following properties:

• load - loads available payment methods for the current cart
• save - saves a payment method for the current cart
• loading - loading state of the load and save methods
• error - error object

Examples

Loading Available Payment Methods

import usePaymentProvider from '~/modules/checkout/composables/usePaymentProvider';

const { load, error, loading } = usePaymentProvider();

// returns an array of available payment methods for the cart
const paymentMethods = await load();

Setting a Payment Method

import usePaymentProvider from '~/modules/checkout/composables/usePaymentProvider';

const { load, save, error, loading } = usePaymentProvider();

// returns an array of available payment methods for the cart
const paymentMethods = await load();

// saves the first payment method as the payment method for the current cart
const selectedPaymentMethods = await save({ 
  paymentMethod: {
    code: paymentMethods[0].code
  }
});

Interfaces

export type PaymentMethodParams = ComposableFunctionArgs<{
  cart_id: string;
  payment_method: PaymentMethodInput;
}>;

/**
 * The {@link usePaymentProvider} error object. The properties values' are the
 * errors thrown by its methods.
 */
export interface UsePaymentProviderErrors {
  /** Error when loading payment methods fails, otherwise is `null`. */
  load: Error | null;

  /** Error when saving payment method fails, otherwise is `null`. */
  save: Error | null;
}

/** The params received by {@link usePaymentProvider}'s `save` method. */
export type UsePaymentProviderSaveParams = ComposableFunctionArgs<{
  paymentMethod: PaymentMethodInput;
}>;

/**
 * Data and methods returned from the {@link usePaymentProvider} composable.
 */
export interface UsePaymentProviderInterface {
  /** Indicates whether any of the composable methods is in progress. */
  loading: Readonly<Ref<boolean>>;

  /**
   * Contains errors from any of the composable methods.
   *
   * @see {@link UsePaymentProviderErrors} documentation for more details.
   */
  error: Readonly<Ref<UsePaymentProviderErrors>>;

  /** Loads the available payment methods for current cart. */
  load(customQuery?: CustomQuery, customHeaders?: CustomHeaders): Promise<AvailablePaymentMethod[] | null>;

  /**
   * Saves the payment method for current cart. It returns the updated available
   * payment methods for current cart, so you can update the UI.
   */
  save(params: UsePaymentProviderSaveParams): Promise<AvailablePaymentMethod[] | null>;
}

export interface AvailablePaymentMethod {
  /** The payment method code */
  code: Scalars['String'];
  /** The payment method title. */
  title: Scalars['String'];
}

export interface PaymentMethodInput {
  braintree?: InputMaybe<BraintreeInput>;
  braintree_cc_vault?: InputMaybe<BraintreeCcVaultInput>;
  /** Payment method code */
  code: Scalars['String'];
  /** Required input for PayPal Hosted pro payments */
  hosted_pro?: InputMaybe<HostedProInput>;
  klarna?: InputMaybe<KlarnaInput>;
  /** Required input for Payflow Express Checkout payments */
  payflow_express?: InputMaybe<PayflowExpressInput>;
  /** Required input for PayPal Payflow Link and Payments Advanced payments */
  payflow_link?: InputMaybe<PayflowLinkInput>;
  /** Required input type for PayPal Payflow Pro and Payment Pro payments */
  payflowpro?: InputMaybe<PayflowProInput>;
  /** Required input type for PayPal Payflow Pro vault payments */
  payflowpro_cc_vault?: InputMaybe<VaultTokenInput>;
  /** Required input for Express Checkout and Payments Standard payments */
  paypal_express?: InputMaybe<PaypalExpressInput>;
  /** Purchase order number */
  purchase_order_number?: InputMaybe<Scalars['String']>;
}