@rebilly/instruments 3.26.2-beta.0 → 3.26.4-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.26.2-beta.0",
+  "version": "3.26.4-beta.0",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",

package/src/storefront/models/ready-to-pay-model.js

@@ -1,6 +1,12 @@
 import PaymentMetadataModel from './payment-metadata';
 
 export class ReadyToPayFeatureModel {
+  static FeatureName = {
+    paypalBillingAgreement: 'PayPal billing agreement',
+    googlePay: 'Google Pay',
+    applePay: 'Apple Pay',
+  };
+
   constructor({
     name = '',
     expirationTime = '',
@@ -54,4 +60,17 @@ export default class ReadyToPayModel {
     this.filters = filters;
     this.metadata = metadata ? new PaymentMetadataModel(metadata) : null;
   }
+
+  get optionsPaymentInstrumentsKey() {
+    switch (this.feature?.name) {
+      case ReadyToPayFeatureModel.FeatureName.paypalBillingAgreement:
+        return 'paypal';    
+      case ReadyToPayFeatureModel.FeatureName.googlePay:
+        return 'googlePay';    
+      case ReadyToPayFeatureModel.FeatureName.applePay:
+        return 'applePay';    
+      default:
+        return undefined
+    }
+  }
 }

package/src/style/base/index.js

@@ -92,7 +92,7 @@ export const vars = (theme) => `
   background-size: 200% 100%;
   -webkit-animation: 1.5s rebillyExpressShine linear infinite;
           animation: 1.5s rebillyExpressShine linear infinite;
-  height: 48px;
+  min-height: 48px;
 }
 
 .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > *:last-child {

package/src/views/method-selector/express-methods.js

@@ -4,7 +4,7 @@ export default function mountExpressMethod({
 }) {
   const {Rebilly} = window;
   const container = document.querySelector(`.rebilly-instruments-${id}-method`);
-  
+
   // Hack: The correct way to do this is to accept the options via the framepay package
   // Will remove once these options are added to framepay
   function updateApplePayStyling() {
@@ -35,6 +35,7 @@ export default function mountExpressMethod({
         if (id === 'apple-pay') {
           updateApplePayStyling();
         }
+
       } else {
         console.warn(`method '${id}' is not supported`);
       }

package/src/views/method-selector/mount-express-methods.js

@@ -24,12 +24,35 @@ export async function mountExpressMethods({
     );
   }
 
-  methodIds.forEach((id) => {
+  function generateExpressMethodHeight(method) {
+    let height;
+    const optionId = method.optionsPaymentInstrumentsKey;
+    
+    // Return the default size of express methods if no id is found
+    if (!optionId) return '48px';
+
+    const {buttonHeight, displayOptions} = state.options.paymentInstruments?.[optionId];
+
+    if (displayOptions) {
+      height = displayOptions.buttonHeight;
+    } else {
+      height = buttonHeight;
+    }
+  
+    if (typeof height === 'number') {
+      height = `${buttonHeight}px`;
+    }
+  
+    return height;
+  }
+
+  methods.forEach(method => {
+    const {METHOD_ID: id} = getMethodData(method);
     // filter out apple pay unless in safari
     if (id === 'apple-pay' && !browserIsSafari()) return
 
     container.innerHTML += `
-      <div class="rebilly-instruments-${id}-method"></div>
+      <div class="rebilly-instruments-${id}-method" style="height: ${generateExpressMethodHeight(method)}"></div>
     `;
     mountExpressMethod({
       state,