feat: add allow="payment" attribute to embed iframes for Apple Pay/Google Pay support (#22446)

* feat: add allow="payment" attribute to embed iframes for Apple Pay support

- Add default allow="payment" attribute to all embed iframes
- Add test cases to verify payment attribute is set by default
- Fixes Apple Pay functionality in Cal.com embeds

Fixes #19347

Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>

* test: add comprehensive tests for iframe attribute handling

- Add test for when no config is provided
- Add test for empty iframeAttrs object
- Add test to verify all attributes are applied (not just id)
- Ensure allow='payment' is set in all scenarios

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* refactor: restrict iframeAttrs to only allow id attribute

- Changed implementation to only apply 'id' from iframeAttrs
- Made allow='payment' non-configurable and always set
- Updated tests to reflect new behavior
- Keeps API surface low and avoids adding support for attributes
  unless explicitly required as a feature

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* chore: remove duplicate test case

- Removed duplicate test for no config scenario
- Kept the more descriptive test case

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>

packages/embeds/embed-core/src/embed.test.ts

@@ -258,6 +258,56 @@ describe("Cal", () => {
         expect(iframe.src).toContain("email=test%40example.com");
       });
 
+      it("should set allow='payment' attribute by default to allow Payment Apps to acccept payments", () => {
+        const iframe = calInstance.createIframe({
+          calLink: "john-doe/meeting",
+          config: {},
+          calOrigin: null,
+        });
+
+        expect(iframe.getAttribute("allow")).toBe("payment");
+      });
+
+      it("should set allow='payment' even when no config is provided", () => {
+        const iframe = calInstance.createIframe({
+          calLink: "john-doe/meeting",
+          calOrigin: null,
+        });
+
+        expect(iframe.getAttribute("allow")).toBe("payment");
+      });
+
+      it("should set allow='payment' when iframeAttrs is empty", () => {
+        const iframe = calInstance.createIframe({
+          calLink: "john-doe/meeting",
+          config: { iframeAttrs: {} },
+          calOrigin: null,
+        });
+
+        expect(iframe.getAttribute("allow")).toBe("payment");
+      });
+
+      it("should only apply id from iframeAttrs and ignore other attributes", () => {
+        const iframe = calInstance.createIframe({
+          calLink: "john-doe/meeting",
+          config: {
+            iframeAttrs: {
+              id: "custom-id",
+              "data-custom": "value",
+              class: "custom-class",
+            },
+          },
+          calOrigin: null,
+        });
+
+        expect(iframe.getAttribute("id")).toBe("custom-id");
+        // Other attributes should not be applied
+        expect(iframe.getAttribute("data-custom")).toBeNull();
+        expect(iframe.getAttribute("class")).toBe("cal-embed");
+        // Allow attribute should always be set
+        expect(iframe.getAttribute("allow")).toBe("payment");
+      });
+
       it("should respect forwardQueryParams setting to disable sending page query params but still send the ones in the config", () => {
         mockSearchParams("?param1=value");
 

packages/embeds/embed-core/src/embed.ts

@@ -334,6 +334,8 @@ export class Cal {
       iframe.setAttribute("id", iframeAttrs.id);
     }
 
+    iframe.setAttribute("allow", "payment");
+
     const searchParams = this.buildFilteredQueryParams(queryParamsFromConfig);
 
     // cal.com has rewrite issues on Safari that sometimes cause 404 for assets.