@commercelayer/react-components
Version:
The Official Commerce Layer React Components
76 lines (75 loc) • 3 kB
TypeScript
import { type CardConfiguration, type CoreConfiguration, type DropinConfiguration, type PayPalConfiguration, type UIElement, type UIElementProps } from "@adyen/adyen-web/auto";
import { type JSX } from "react";
import type { PaymentSourceProps } from "./PaymentSource";
interface PaymentMethodsStyle {
card?: CardConfiguration["styles"];
paypal?: PayPalConfiguration["style"];
}
type PaymentMethodType = "scheme" | "giftcard" | "paypal" | "applepay" | "googlepay" | (string & {});
/**
* Configuration options for the Adyen payment component.
*/
export interface AdyenPaymentConfig {
/**
* Payment methods to be used for subscriptions.
* This is an array of payment method types that are supported for subscription payments.
* For example, it can include "scheme" for card payments.
* @default all available payment methods
* @example ["scheme"]
*/
subscriptionPaymentMethods?: PaymentMethodType[];
/**
* Optional CSS class name for the card container.
*/
cardContainerClassName?: string;
/**
* Optional CSS class name for the 3D Secure container.
* @deprecated
*/
threeDSecureContainerClassName?: string;
/**
* Callback function to be called when an order is placed.
* @param response - An object containing the placement status.
*/
placeOrderCallback?: (response: {
placed: boolean;
}) => void;
/**
* Optional styles for the payment methods.
*/
styles?: PaymentMethodsStyle;
/**
* Configuration options for the payment methods.
*/
paymentMethodsConfiguration?: DropinConfiguration["paymentMethodsConfiguration"];
/**
* Callback function to disable a stored payment method.
* @param props - An object containing the recurring detail reference and shopper reference.
* @returns A promise that resolves to a boolean indicating whether the stored payment method was disabled.
*/
onDisableStoredPaymentMethod?: (props: {
recurringDetailReference: string;
shopperReference: string | undefined;
}) => Promise<boolean>;
/**
* Callback function to be called when the Adyen component is ready.
* @returns void.
*/
onReady?: () => void;
/**
* onSelect callback function to be called when a payment method is selected.
* @param component - The selected payment method component.
* @returns void.
*/
onSelect?: (component: UIElement<UIElementProps>) => void;
giftcardErrorComponent?: (message: string) => JSX.Element;
}
interface Props {
clientKey?: string;
config?: AdyenPaymentConfig;
templateCustomerSaveToWallet?: PaymentSourceProps["templateCustomerSaveToWallet"];
locale?: CoreConfiguration["locale"];
environment?: CoreConfiguration["environment"];
}
export declare function AdyenPayment({ clientKey, config, templateCustomerSaveToWallet, environment, locale, }: Props): JSX.Element | null;
export default AdyenPayment;