@primer-io/primer-js 0.3.10 → 0.3.12

package/dist/vscode.html-custom-data.json

@@ -316,26 +316,6 @@
       ],
       "references": []
     },
-    {
-      "name": "primer-native-payment",
-      "description": "Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)\nwith proper height calculations based on design system variables.\n---\n",
-      "attributes": [
-        {
-          "name": "paymentMethod",
-          "values": [{ "name": "InitializedPaymentMethod" }]
-        },
-        {
-          "name": "paymentManagers",
-          "values": [{ "name": "InitializedManagersMap" }]
-        },
-        {
-          "name": "computedStyles",
-          "values": [{ "name": "CSSStyleDeclaration" }]
-        },
-        { "name": "disabled", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "primer-payment-method",
       "description": "\n---\n",
@@ -588,17 +568,50 @@
       "references": []
     },
     {
-      "name": "primer-vault-cvv-input",
-      "description": "CVV Input component for vault payment methods\nRenders a secure iframe for CVV input when required by the selected payment method\nUses dedicated CVV context to minimize re-renders\n---\n\n\n### **Methods:**\n - **onCvvInputChange()** - Update CVV metadata in the context when input changes",
+      "name": "primer-apple-pay",
+      "description": "Apple Pay component with standard button container rendering.\n\nApple Pay uses the standard button container approach:\n- Renders to a button container div (not shadow root)\n- Passes buttonHeight in render options\n- Uses updateOverlayForContainer for disabled state\n- Simpler than Google Pay's shadow root approach\n---\n",
       "attributes": [
         {
-          "name": "computedStyles",
-          "values": [{ "name": "CSSStyleDeclaration" }]
+          "name": "paymentMethod",
+          "values": [{ "name": "InitializedPaymentMethod" }]
+        },
+        {
+          "name": "paymentManagers",
+          "values": [{ "name": "InitializedManagersMap" }]
         },
+        { "name": "disabled", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "primer-google-pay",
+      "description": "Google Pay component with shadow root rendering for full-width button support.\n\nGoogle Pay requires special rendering logic:\n- Renders directly to shadow root (not button container)\n- Does NOT render .native-button-container div\n- Passes shadowRoot: true in render options\n- Requires retry logic for async button rendering\n---\n",
+      "attributes": [
         {
           "name": "paymentMethod",
-          "values": [{ "name": "PaymentCardVaultedMethod" }]
-        }
+          "values": [{ "name": "InitializedPaymentMethod" }]
+        },
+        {
+          "name": "paymentManagers",
+          "values": [{ "name": "InitializedManagersMap" }]
+        },
+        { "name": "disabled", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "primer-paypal",
+      "description": "PayPal component with standard button container rendering.\n\nPayPal uses the standard button container approach:\n- Renders to a button container div (not shadow root)\n- Passes buttonHeight in render options with PayPal SDK constraints (25-55px)\n- Uses updateOverlayForContainer for disabled state\n- Warns if height exceeds maximum allowed by PayPal SDK\n---\n",
+      "attributes": [
+        {
+          "name": "paymentMethod",
+          "values": [{ "name": "InitializedPaymentMethod" }]
+        },
+        {
+          "name": "paymentManagers",
+          "values": [{ "name": "InitializedManagersMap" }]
+        },
+        { "name": "disabled", "values": [] }
       ],
       "references": []
     },
@@ -608,6 +621,21 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "primer-vault-cvv-input",
+      "description": "CVV Input component for vault payment methods\nRenders a secure iframe for CVV input when required by the selected payment method\nUses dedicated CVV context to minimize re-renders\n---\n\n\n### **Methods:**\n - **onCvvInputChange()** - Update CVV metadata in the context when input changes",
+      "attributes": [
+        {
+          "name": "computedStyles",
+          "values": [{ "name": "CSSStyleDeclaration" }]
+        },
+        {
+          "name": "paymentMethod",
+          "values": [{ "name": "PaymentCardVaultedMethod" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "primer-vault-delete-confirmation",
       "description": "VaultDeleteConfirmationComponent - displays confirmation UI for deleting a payment method\n---\n",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@primer-io/primer-js",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -820,51 +820,6 @@
             "events": []
           }
         },
-        {
-          "name": "primer-native-payment",
-          "description": "Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)\nwith proper height calculations based on design system variables.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "paymentMethod",
-              "value": { "type": "InitializedPaymentMethod | undefined" }
-            },
-            {
-              "name": "paymentManagers",
-              "value": {
-                "type": "InitializedManagersMap",
-                "default": "new Map()"
-              }
-            },
-            {
-              "name": "computedStyles",
-              "value": {
-                "type": "CSSStyleDeclaration | null",
-                "default": "null"
-              }
-            },
-            {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "paymentMethod",
-                "type": "InitializedPaymentMethod | undefined"
-              },
-              { "name": "paymentManagers", "type": "InitializedManagersMap" },
-              {
-                "name": "computedStyles",
-                "type": "CSSStyleDeclaration | null"
-              },
-              { "name": "disabled", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "primer-payment-method",
           "description": "\n---\n",
@@ -1439,6 +1394,125 @@
             "events": []
           }
         },
+        {
+          "name": "primer-apple-pay",
+          "description": "Apple Pay component with standard button container rendering.\n\nApple Pay uses the standard button container approach:\n- Renders to a button container div (not shadow root)\n- Passes buttonHeight in render options\n- Uses updateOverlayForContainer for disabled state\n- Simpler than Google Pay's shadow root approach\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "paymentMethod",
+              "value": { "type": "InitializedPaymentMethod | undefined" }
+            },
+            {
+              "name": "paymentManagers",
+              "value": {
+                "type": "InitializedManagersMap",
+                "default": "new Map()"
+              }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "paymentMethod",
+                "type": "InitializedPaymentMethod | undefined"
+              },
+              { "name": "paymentManagers", "type": "InitializedManagersMap" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "primer-google-pay",
+          "description": "Google Pay component with shadow root rendering for full-width button support.\n\nGoogle Pay requires special rendering logic:\n- Renders directly to shadow root (not button container)\n- Does NOT render .native-button-container div\n- Passes shadowRoot: true in render options\n- Requires retry logic for async button rendering\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "paymentMethod",
+              "value": { "type": "InitializedPaymentMethod | undefined" }
+            },
+            {
+              "name": "paymentManagers",
+              "value": {
+                "type": "InitializedManagersMap",
+                "default": "new Map()"
+              }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "paymentMethod",
+                "type": "InitializedPaymentMethod | undefined"
+              },
+              { "name": "paymentManagers", "type": "InitializedManagersMap" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "primer-paypal",
+          "description": "PayPal component with standard button container rendering.\n\nPayPal uses the standard button container approach:\n- Renders to a button container div (not shadow root)\n- Passes buttonHeight in render options with PayPal SDK constraints (25-55px)\n- Uses updateOverlayForContainer for disabled state\n- Warns if height exceeds maximum allowed by PayPal SDK\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "paymentMethod",
+              "value": { "type": "InitializedPaymentMethod | undefined" }
+            },
+            {
+              "name": "paymentManagers",
+              "value": {
+                "type": "InitializedManagersMap",
+                "default": "new Map()"
+              }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "paymentMethod",
+                "type": "InitializedPaymentMethod | undefined"
+              },
+              { "name": "paymentManagers", "type": "InitializedManagersMap" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "primer-payment-method-content",
+          "description": "PaymentMethodContentComponent - renders payment method information with icon and details\nThis component encapsulates the display logic and styles for payment method content\nso it can be reused across different containers without style conflicts\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "assetConfig",
+                "description": "The asset configuration containing icon and display data",
+                "type": "AssetConfig | null"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "primer-vault-cvv-input",
           "description": "CVV Input component for vault payment methods\nRenders a secure iframe for CVV input when required by the selected payment method\nUses dedicated CVV context to minimize re-renders\n---\n\n\n### **Methods:**\n - **onCvvInputChange()** - Update CVV metadata in the context when input changes",
@@ -1484,23 +1558,6 @@
             "events": []
           }
         },
-        {
-          "name": "primer-payment-method-content",
-          "description": "PaymentMethodContentComponent - renders payment method information with icon and details\nThis component encapsulates the display logic and styles for payment method content\nso it can be reused across different containers without style conflicts\n---\n",
-          "doc-url": "",
-          "attributes": [],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "assetConfig",
-                "description": "The asset configuration containing icon and display data",
-                "type": "AssetConfig | null"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "primer-vault-delete-confirmation",
           "description": "VaultDeleteConfirmationComponent - displays confirmation UI for deleting a payment method\n---\n",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@primer-io/primer-js",
   "description": "Primer Composable Checkout is a web component-based SDK for building secure, customizable, and PCI-compliant checkout experiences. Designed with a modular architecture, it integrates seamlessly with any JavaScript framework and supports multiple payment methods.",
   "license": "BSD-3-Clause",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "type": "module",
   "main": "./dist/primer-loader.js",
   "types": "./dist/primer-loader.d.ts",
@@ -11,7 +11,8 @@
     "src/primer-checkout.ts",
     "**/*.styles.ts",
     "src/atoms/**/*.component.ts",
-    "src/containers/**/*.component.ts"
+    "src/containers/**/*.component.ts",
+    "src/containers/native-payment/components/**/*.ts"
   ],
   "publishConfig": {
     "access": "public"