@clerk/shared/dist/react/billing/payment-element.d.ts

Internal package utils used by the Clerk SDKs

import { BillingCheckoutResource, CheckoutFlowResource, ForPayerType } from "../../types/billing.js";
import { useCheckout } from "../hooks/useCheckout.js";
import React, { PropsWithChildren, ReactNode } from "react";

//#region src/react/billing/payment-element.d.ts
type PaymentElementError = {
  gateway: 'stripe';
  error: {
    /**
     * For some errors that could be handled programmatically, a short string indicating the [error code](https://stripe.com/docs/error-codes) reported.
     */
    code?: string;
    message?: string;
    type: string;
  };
};
type internalStripeAppearance = {
  colorPrimary: string;
  colorBackground: string;
  colorText: string;
  colorTextSecondary: string;
  colorSuccess: string;
  colorDanger: string;
  colorWarning: string;
  fontWeightNormal: string;
  fontWeightMedium: string;
  fontWeightBold: string;
  fontSizeXl: string;
  fontSizeLg: string;
  fontSizeSm: string;
  fontSizeXs: string;
  borderRadius: string;
  spacingUnit: string;
};
/**
 * @interface
 */
type PaymentElementProviderProps = {
  /**
   * A checkout resource object. When provided, the payment element is scoped to the specific checkout session.
   */
  checkout?: CheckoutFlowResource | BillingCheckoutResource | ReturnType<typeof useCheckout>['checkout'];
  /**
   * An object to customize the appearance of the Stripe Payment Element. This allows you to match the form's styling to your application's theme.
   */
  stripeAppearance?: internalStripeAppearance;
  /**
   * Specifies whether to fetch for the current user or Organization.
   *
   * @default 'user'
   */
  for?: ForPayerType;
  /**
   * A description to display to the user within the payment element UI.
   */
  paymentDescription?: string;
};
declare const PaymentElementProvider: ({
  children,
  ...props
}: PropsWithChildren<PaymentElementProviderProps>) => React.JSX.Element;
/**
 * @interface
 */
type PaymentElementProps = {
  /**
   * Optional fallback content, such as a loading skeleton, to display while the payment form is being initialized.
   */
  fallback?: ReactNode;
};
declare const PaymentElement: ({
  fallback
}: PaymentElementProps) => React.JSX.Element;
/**
 * @interface
 */
type UsePaymentElementReturn = {
  /**
   * A function that submits the payment form data to the payment provider. It returns a promise that resolves with either a `data` object containing a payment token on success, or an `error` object on failure.
   */
  submit: () => Promise<{
    data: {
      gateway: 'stripe';
      paymentToken: string;
    };
    error: null;
  } | {
    data: null;
    error: PaymentElementError;
  }>;
  /**
   * A function that resets the payment form to its initial, empty state.
   */
  reset: () => Promise<void>;
  /**
   * Indicates whether the payment form UI has been rendered and is ready for user input. This is useful for disabling a submit button until the form is interactive.
   */
  isFormReady: boolean;
} & ({
  /**
   * An object containing information about the initialized payment provider. It is `undefined` until `isProviderReady` is `true`.
   */
  provider: {
    /** The name of the payment provider. */name: 'stripe';
  };
  /**
   * Indicates whether the underlying payment provider (e.g., Stripe) has been fully initialized.
   */
  isProviderReady: true;
} | {
  provider: undefined;
  isProviderReady: false;
});
declare const usePaymentElement: () => UsePaymentElementReturn;
//#endregion
export { PaymentElement, PaymentElementProps, PaymentElementProvider, PaymentElementProviderProps, UsePaymentElementReturn, usePaymentElement };