@getopenpay/openpay-js-react 0.0.1-alpha.6eb47d5 → 0.0.2-beta.1

package/dist/index.d.ts

@@ -1,7 +1,148 @@
 import { FC } from 'react';
-import { PropsWithChildren } from 'react';
 import { z } from 'zod';
 
+export declare const Appearance: z.ZodObject<{
+    theme: z.ZodEnum<[AppearanceTheme.UNSTYLED, AppearanceTheme.LIGHT, AppearanceTheme.DARK]>;
+    variables: z.ZodOptional<z.ZodObject<{
+        colorPrimary: z.ZodOptional<z.ZodString>;
+        colorBackground: z.ZodOptional<z.ZodString>;
+        colorForeground: z.ZodOptional<z.ZodString>;
+        colorText: z.ZodOptional<z.ZodString>;
+        colorDanger: z.ZodOptional<z.ZodString>;
+        fontFamily: z.ZodOptional<z.ZodString>;
+        fontSize: z.ZodOptional<z.ZodString>;
+        spacing: z.ZodOptional<z.ZodString>;
+        borderRadius: z.ZodOptional<z.ZodString>;
+        borderColor: z.ZodOptional<z.ZodString>;
+        borderWidth: z.ZodOptional<z.ZodString>;
+        focusRingColor: z.ZodOptional<z.ZodString>;
+        padding: z.ZodOptional<z.ZodString>;
+    }, "strip", z.ZodTypeAny, {
+        colorPrimary?: string | undefined;
+        colorBackground?: string | undefined;
+        colorForeground?: string | undefined;
+        colorText?: string | undefined;
+        colorDanger?: string | undefined;
+        fontFamily?: string | undefined;
+        fontSize?: string | undefined;
+        spacing?: string | undefined;
+        borderRadius?: string | undefined;
+        borderColor?: string | undefined;
+        borderWidth?: string | undefined;
+        focusRingColor?: string | undefined;
+        padding?: string | undefined;
+    }, {
+        colorPrimary?: string | undefined;
+        colorBackground?: string | undefined;
+        colorForeground?: string | undefined;
+        colorText?: string | undefined;
+        colorDanger?: string | undefined;
+        fontFamily?: string | undefined;
+        fontSize?: string | undefined;
+        spacing?: string | undefined;
+        borderRadius?: string | undefined;
+        borderColor?: string | undefined;
+        borderWidth?: string | undefined;
+        focusRingColor?: string | undefined;
+        padding?: string | undefined;
+    }>>;
+}, "strip", z.ZodTypeAny, {
+    theme: AppearanceTheme;
+    variables?: {
+        colorPrimary?: string | undefined;
+        colorBackground?: string | undefined;
+        colorForeground?: string | undefined;
+        colorText?: string | undefined;
+        colorDanger?: string | undefined;
+        fontFamily?: string | undefined;
+        fontSize?: string | undefined;
+        spacing?: string | undefined;
+        borderRadius?: string | undefined;
+        borderColor?: string | undefined;
+        borderWidth?: string | undefined;
+        focusRingColor?: string | undefined;
+        padding?: string | undefined;
+    } | undefined;
+}, {
+    theme: AppearanceTheme;
+    variables?: {
+        colorPrimary?: string | undefined;
+        colorBackground?: string | undefined;
+        colorForeground?: string | undefined;
+        colorText?: string | undefined;
+        colorDanger?: string | undefined;
+        fontFamily?: string | undefined;
+        fontSize?: string | undefined;
+        spacing?: string | undefined;
+        borderRadius?: string | undefined;
+        borderColor?: string | undefined;
+        borderWidth?: string | undefined;
+        focusRingColor?: string | undefined;
+        padding?: string | undefined;
+    } | undefined;
+}>;
+
+export declare type Appearance = z.infer<typeof Appearance>;
+
+/**
+ * Models shared between CDE and OpenPay.js
+ * Don't forget to update shared-models.ts in the other repo's utils folder too!
+ */
+/**
+ * Styles and appearance
+ */
+export declare enum AppearanceTheme {
+    UNSTYLED = "unstyled",
+    LIGHT = "light",
+    DARK = "dark"
+}
+
+export declare const AppearanceVariables: z.ZodObject<{
+    colorPrimary: z.ZodOptional<z.ZodString>;
+    colorBackground: z.ZodOptional<z.ZodString>;
+    colorForeground: z.ZodOptional<z.ZodString>;
+    colorText: z.ZodOptional<z.ZodString>;
+    colorDanger: z.ZodOptional<z.ZodString>;
+    fontFamily: z.ZodOptional<z.ZodString>;
+    fontSize: z.ZodOptional<z.ZodString>;
+    spacing: z.ZodOptional<z.ZodString>;
+    borderRadius: z.ZodOptional<z.ZodString>;
+    borderColor: z.ZodOptional<z.ZodString>;
+    borderWidth: z.ZodOptional<z.ZodString>;
+    focusRingColor: z.ZodOptional<z.ZodString>;
+    padding: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    colorPrimary?: string | undefined;
+    colorBackground?: string | undefined;
+    colorForeground?: string | undefined;
+    colorText?: string | undefined;
+    colorDanger?: string | undefined;
+    fontFamily?: string | undefined;
+    fontSize?: string | undefined;
+    spacing?: string | undefined;
+    borderRadius?: string | undefined;
+    borderColor?: string | undefined;
+    borderWidth?: string | undefined;
+    focusRingColor?: string | undefined;
+    padding?: string | undefined;
+}, {
+    colorPrimary?: string | undefined;
+    colorBackground?: string | undefined;
+    colorForeground?: string | undefined;
+    colorText?: string | undefined;
+    colorDanger?: string | undefined;
+    fontFamily?: string | undefined;
+    fontSize?: string | undefined;
+    spacing?: string | undefined;
+    borderRadius?: string | undefined;
+    borderColor?: string | undefined;
+    borderWidth?: string | undefined;
+    focusRingColor?: string | undefined;
+    padding?: string | undefined;
+}>;
+
+export declare type AppearanceVariables = z.infer<typeof AppearanceVariables>;
+
 export declare const CardCvcElement: FC<ElementProps>;
 
 export declare const CardElement: FC<ElementProps>;
@@ -11,29 +152,40 @@ export declare const CardExpiryElement: FC<ElementProps>;
 export declare const CardNumberElement: FC<ElementProps>;
 
 declare type ElementProps = {
-    styles?: ElementStyle;
+    styles?: ElementsStyle;
 };
 
 declare type ElementsContextValue = {
     contextId: string;
-    createToken: () => void;
-    dispatchEvent: (event: MessageEvent, frame: HTMLIFrameElement) => void;
     formHeight: string;
+    referer?: string;
+    checkoutSecureToken?: string;
+    appearance?: Appearance;
 };
 
 export declare const ElementsForm: FC<ElementsFormProps>;
 
-declare interface ElementsFormProps extends PropsWithChildren {
+declare type ElementsFormChildrenProps = {
+    submit: () => void;
+};
+
+declare type ElementsFormProps = {
     className?: string;
+    appearance?: Appearance;
+    checkoutSecureToken?: string;
+    children: (props: ElementsFormChildrenProps) => JSX.Element;
     onFocus?: (elementId: string) => void;
     onBlur?: (elementId: string) => void;
     onChange?: (elementId: string) => void;
+    onLoad?: (totalAmountAtoms: number) => void;
+    onLoadError?: (message: string) => void;
     onValidationError?: (message: string, elementId?: string) => void;
-}
-
-declare type ElementStyle = z.infer<typeof ElementStyleSchema>;
+    onCheckoutStarted?: () => void;
+    onCheckoutSuccess?: (invoiceUrls: string[]) => void;
+    onCheckoutError?: (message: string) => void;
+};
 
-declare const ElementStyleSchema: z.ZodObject<{
+declare const ElementsStyle: z.ZodObject<{
     backgroundColor: z.ZodOptional<z.ZodString>;
     color: z.ZodOptional<z.ZodString>;
     fontFamily: z.ZodOptional<z.ZodString>;
@@ -42,23 +194,40 @@ declare const ElementStyleSchema: z.ZodObject<{
     margin: z.ZodOptional<z.ZodString>;
     padding: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    backgroundColor?: string | undefined;
-    color?: string | undefined;
     fontFamily?: string | undefined;
     fontSize?: string | undefined;
-    fontWeight?: string | undefined;
-    margin?: string | undefined;
     padding?: string | undefined;
-}, {
     backgroundColor?: string | undefined;
     color?: string | undefined;
+    fontWeight?: string | undefined;
+    margin?: string | undefined;
+}, {
     fontFamily?: string | undefined;
     fontSize?: string | undefined;
+    padding?: string | undefined;
+    backgroundColor?: string | undefined;
+    color?: string | undefined;
     fontWeight?: string | undefined;
     margin?: string | undefined;
-    padding?: string | undefined;
 }>;
 
+declare type ElementsStyle = z.infer<typeof ElementsStyle>;
+
+/**
+ * Form field names
+ */
+export declare enum FieldName {
+    FIRST_NAME = "firstName",
+    LAST_NAME = "lastName",
+    EMAIL = "email",
+    ZIP_CODE = "zipCode",
+    CITY = "city",
+    STATE = "state",
+    COUNTRY = "country",
+    ADDRESS = "address",
+    PHONE = "phone"
+}
+
 export declare const useOpenPayElements: () => ElementsContextValue;
 
 export { }