feat: add cardfields form component

paypal · Apr 18, 2024 · 634e6cd · 634e6cd
1 parent ba64add
commit 634e6cd
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/src/components/cardFields/PayPalCardFieldsForm.tsx b/src/components/cardFields/PayPalCardFieldsForm.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { PayPalCardFieldsFormOptions } from "../../types";
+import { PayPalCardField } from "./PayPalCardField";
+import { FlexContainer } from "../ui/FlexContainer";
+
+export const PayPalCardFieldsForm: React.FC<PayPalCardFieldsFormOptions> = ({
+    className,
+    ...options
+}) => {
+    return (
+        <>
+            <style
+                dangerouslySetInnerHTML={{
+                    __html: `.w-full { width:100%; }`,
+                }}
+            />
+            <div className={className}>
+                <PayPalCardField fieldName="NameField" {...options} />
+                <PayPalCardField fieldName="NumberField" {...options} />
+                <FlexContainer>
+                    <PayPalCardField
+                        fieldName="ExpiryField"
+                        className="w-full"
+                        {...options}
+                    />
+                    <PayPalCardField
+                        fieldName="CVVField"
+                        className="w-full"
+                        {...options}
+                    />
+                </FlexContainer>
+            </div>
+        </>
+    );
+};