@justifi/webcomponents 0.4.0 → 0.6.1

package/dist/collection/components/payment-form/payment-method-selector.js

@@ -12,12 +12,22 @@ export class PaymentMethodSelector {
     this.paymentMethodSelected.emit(event.target.value);
   }
   render() {
-    return (h("div", null, this.paymentMethodTypes.map((paymentMethodType) => {
-      return (h("div", null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType }), h("label", { htmlFor: paymentMethodType }, PaymentMethodLabels[paymentMethodType])));
+    return (h("div", { class: "form-check" }, this.paymentMethodTypes.map((paymentMethodType) => {
+      return (h("div", null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "form-check-input" }), h("label", { htmlFor: paymentMethodType }, PaymentMethodLabels[paymentMethodType])));
     })));
   }
   ;
   static get is() { return "justifi-payment-method-selector"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["payment-method-selector.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["payment-method-selector.css"]
+    };
+  }
   static get properties() {
     return {
       "paymentMethodTypes": {

package/dist/collection/components/payment-method-form/payment-method-form.js

@@ -7,6 +7,7 @@ export class PaymentMethodForm {
     this.paymentMethodFormValidationStrategy = undefined;
     this.paymentMethodStyleOverrides = undefined;
     this.iframeOrigin = undefined;
+    this.singleLine = undefined;
     this.height = 55;
   }
   connectedCallback() {
@@ -67,14 +68,29 @@ export class PaymentMethodForm {
     return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
   }
   ;
+  composeQueryParams(values) {
+    const queryParams = values.map((value) => {
+      if (value === values[0]) {
+        return value = `?${value}`;
+      }
+      else {
+        return value = `&${value}`;
+      }
+    });
+    return queryParams.join('');
+  }
   getIframeSrc() {
     const productionIframeOrigin = 'https://js.justifi.ai/v2';
     const iframeOrigin = this.iframeOrigin || productionIframeOrigin;
     let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
+    let paramsList = [];
     if (this.paymentMethodFormValidationStrategy) {
-      iframeSrc += `?validationStrategy=${this.paymentMethodFormValidationStrategy}`;
+      paramsList.push(`validationMode=${this.paymentMethodFormValidationStrategy}`);
+    }
+    if (this.singleLine) {
+      paramsList.push(`singleLine=${this.singleLine}`);
     }
-    return iframeSrc;
+    return iframeSrc.concat(this.composeQueryParams(paramsList));
   }
   render() {
     return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: (el) => this.iframeElement = el, height: this.height })));
@@ -162,6 +178,23 @@ export class PaymentMethodForm {
         },
         "attribute": "iframe-origin",
         "reflect": false
+      },
+      "singleLine": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "single-line",
+        "reflect": false
       }
     };
   }