feat: new phone number input with flags and prefilling

Author: jakubjasinsky

examples/dynamic-checkout/index.html

@@ -11,7 +11,7 @@
       document.addEventListener("DOMContentLoaded", function () {
         // You need to replace these values with your own
         const projectId = "test-proj_qEi1u5BwoYcZb6mOMKDWIm4mpqKCq6bN"
-        const invoiceId = "iv_1buJtZFcpQe3sdo3TdtnDWp8jTHTEk88"
+        const invoiceId = "iv_30JJHCq6bN6TX1rV260OFo1oARdK0eQu"
         const clientSecret = ""
 
         const client = new ProcessOut.ProcessOut(projectId)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "processout.js",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.",
   "scripts": {
     "build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js",

src/nativeapm/config/theme.ts

@@ -132,10 +132,82 @@ const defaultTheme: NativeApmThemeConfigType = {
           outline: "none",
           background: "transparent",
           padding: "8px 6px",
-          width: "130px",
+          width: "80px",
           fontSize: "0.9rem",
           borderRight: "6px solid transparent",
           height: "3rem",
+          opacity: "0",
+          position: "absolute",
+          top: "0",
+          left: "0",
+          zIndex: "10",
+        },
+        selectWrapper: {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          minWidth: "60px",
+          minHeight: "40px",
+          width: "70px",
+          height: "40px",
+          boxSizing: "border-box",
+        },
+        flagDisplay: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          pointerEvents: "none",
+          width: "100%",
+          height: "100%",
+          paddingRight: "3px",
+        },
+        flagImageVisible: {
+          width: "24px",
+          height: "16px",
+          objectFit: "cover",
+          display: "inline-block",
+          margin: "auto",
+          borderRadius: "4px",
+        },
+        flagImageHidden: {
+          width: "24px",
+          height: "16px",
+          objectFit: "cover",
+          display: "none",
+          margin: "auto",
+        },
+        flagDefaultTextVisible: {
+          textAlign: "center",
+          display: "inline-block",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "20px",
+          height: "15px",
+          backgroundColor: "#ccc",
+          borderRadius: "4px",
+          content: '""',
+        },
+        flagDefaultTextHidden: {
+          textAlign: "center",
+          display: "none",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%",
+        },
+        selectChevron: {
+          position: "absolute",
+          right: "9px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          width: "0",
+          height: "0",
+          borderLeft: "4px solid transparent",
+          borderRight: "4px solid transparent",
+          borderTop: "4px solid #666",
+          pointerEvents: "none",
         },
         phoneInputsContainer: {
           display: "flex",

src/nativeapm/elements/inputs/input.ts

@@ -35,15 +35,18 @@ module ProcessOut {
      * @type {INativeApmInput}
      */
     inputInstance: INativeApmInput
+    processOut: ProcessOut
 
     /**
      * Native APM Input constructor
      */
     constructor(
+      processOut: ProcessOut,
       inputData: NativeApmInputData,
       theme: NativeApmThemeConfigType,
       prefilledValue?: string,
     ) {
+      this.processOut = processOut
       this.inputInstance = this.createInputElement(inputData, theme, prefilledValue)
     }
 
@@ -87,7 +90,12 @@ module ProcessOut {
             return new NativeApmTextInput(inputData, theme, prefilledValue)
           }
         case "phone":
-          return new NativeApmPhoneWithCountryInput(inputData, theme, prefilledValue)
+          return new NativeApmPhoneWithCountryInput(
+            this.processOut,
+            inputData,
+            theme,
+            prefilledValue,
+          )
 
         case "single_select":
         case "single-select":