@rebilly/instruments 9.66.4 → 9.67.0

package/CHANGELOG.md

@@ -1 +1,6 @@
-## [9.66.4](https://github.com/Rebilly/rebilly/compare/instruments/core-v9.66.3...instruments/core-v9.66.4) (2024-07-15)
+## [9.67.0](https://github.com/Rebilly/rebilly/compare/instruments/core-v9.66.5...instruments/core-v9.67.0) (2024-07-16)
+
+
+### Features
+
+* **instruments:** Allow config to split payment card fields ([#6541](https://github.com/Rebilly/rebilly/issues/6541)) ([89083e8](https://github.com/Rebilly/rebilly/commit/89083e8c73e9459fa7986f83daa3c29db7fbfb75))

package/dist/index.d.ts

@@ -225,8 +225,12 @@ export interface PaymentInstrumentsOptionFlags {
 	allowMakeDefault?: boolean;
 	allowCreate?: boolean;
 }
+export interface PaymentCardConfiguration {
+	input?: "default" | "split";
+}
 export interface PaymentInstrumentsDisplayOptions extends PaymentInstrumentsOptionFlags {
 	address?: Address;
+	paymentCard?: PaymentCardConfiguration;
 	paypal?: {
 		buttonHeight?: number;
 	};

package/dist/index.js

@@ -16926,7 +16926,7 @@ function mountExpressMethod({ state: state2, id: id2 }) {
     applePayButton.style.height = buttonHeight;
     applePayButton.style.cursor = "pointer";
   }
-  function mountButton() {
+  return function mountButton() {
     if (!container.children.length) {
       const mountFunction = {
         "google-pay": "googlePay",
@@ -16945,13 +16945,7 @@ function mountExpressMethod({ state: state2, id: id2 }) {
         console.warn(`method '${id2}' is not supported`);
       }
     }
-  }
-  Framepay == null ? void 0 : Framepay.on("ready", () => {
-    mountButton();
-  });
-  Framepay == null ? void 0 : Framepay.on("error", (error2) => {
-    console.error(error2);
-  });
+  };
 }
 function generateFramepayConfig({ methodIds } = {}) {
   var _a, _b;
@@ -17034,18 +17028,44 @@ async function mountExpressMethods({ methods, container }) {
     }
     return height;
   }
-  methods.forEach((method) => {
-    const { METHOD_ID: id2 } = getMethodData(method);
-    if (id2 === "apple-pay" && !browserIsSafari()) return;
-    container.innerHTML += `
+  Framepay == null ? void 0 : Framepay.on("ready", () => {
+    const mountingMethods = [];
+    methods.map((method) => {
+      const { METHOD_ID: id2 } = getMethodData(method);
+      if (id2 === "apple-pay" && !browserIsSafari()) return;
+      container.innerHTML += `
       <div class="rebilly-instruments-${id2}-method" style="height: ${generateExpressMethodHeight(
-      method
-    )}"></div>
+        method
+      )}"></div>
     `;
-    mountExpressMethod({
-      state,
-      id: id2
+      mountingMethods.push(
+        mountExpressMethod({
+          state,
+          id: id2
+        })
+      );
     });
+    mountingMethods.forEach((mount2) => mount2());
+  });
+  Framepay == null ? void 0 : Framepay.on("error", (error2) => {
+    if (error2.code === "paypal-error") {
+      const paypalEl = document.querySelector(
+        ".rebilly-instruments-pay-pal-billing-agreement-method"
+      );
+      if (paypalEl) {
+        paypalEl.remove();
+        if (container.children.length <= 0) {
+          const divider = document.querySelector(
+            '[data-rebilly-instruments="divider"]'
+          );
+          if (divider) {
+            divider.remove();
+          }
+        }
+      }
+    } else {
+      console.error(error2);
+    }
   });
   const redirectUrl = state.options.apiMode === "sandbox" ? "https://forms-sandbox.secure-payments.app/approval-url?close=true" : "https://forms.secure-payments.app/approval-url?close=true";
   Framepay == null ? void 0 : Framepay.on("token-ready", (token) => {
@@ -24935,6 +24955,16 @@ const paymentInstrumentsDisplayOptionsSchema = {
     }),
     googlePay: optional(digitalWalletConfigurationSchema),
     applePay: optional(digitalWalletConfigurationSchema),
+    paymentCard: optional({
+      type: "object",
+      properties: {
+        input: optional({
+          type: "string",
+          enum: ["default", "split"],
+          default: "default"
+        })
+      }
+    }),
     additionalFields: optional({
       type: "object",
       properties: {