import { CustomerPaymentSource, Order, PaymentMethod } from '@commercelayer/sdk';
import { FC, ReactNode } from 'react';
import { SetNonNullable, SetRequired } from 'type-fest';
type PaymentMethodResource = SetRequired<SetNonNullable<Partial<Order>, "payment_method">, "payment_method"> | SetRequired<SetNonNullable<CustomerPaymentSource, "payment_source">, "payment_source">;
export interface ResourcePaymentMethodProps {
    /**
     * Any resource that has `payment_source` or `payment_method` properties is actually eligible.
     * But we are only interested in `Order` and `CustomerPaymentSource` resources.
     */
    resource: PaymentMethodResource;
    /**
     * When true and if `payment_source.payment_response` is present, enables the expandable content to show more details on the transaction.
     */
    showPaymentResponse?: boolean;
    /**
     * Defines the style of the component. Default is `boxed`, with a light gray background and rounded corners.
     */
    variant?: "plain" | "boxed";
    /**
     * This will render a button on the right side of the row.
     */
    actionButton?: ReactNode;
}
/**
 * Show info about the payment method from the given Order or CustomerPaymentSource.
 */
export declare const ResourcePaymentMethod: FC<ResourcePaymentMethodProps>;
/**
 * Retrieve the logo URL based on the payment source type.
 */
export declare function getPaymentMethodLogoSrc(type?: PaymentMethod["payment_source_type"]): string;
/**
 * Extracts payment instrument details from an Order or CustomerPaymentSource resource.
 * Returns individual parts, all of which may be `undefined` if not available.
 */
export declare function getPaymentInstrumentDetails(resource: PaymentMethodResource): {
    paymentMethodName: string | undefined;
    cardType: string | undefined;
    issuerType: string | undefined;
    cardLastDigits: string | undefined;
    cardExpiry: string | undefined;
};
export {};