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

package/package.json

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

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() {
@@ -21,6 +21,14 @@ export default function mountExpressMethod({
     applePayButton.style.cursor = 'pointer';
   }
 
+  // Update height of the container to match the height of the button
+  function updatePayPalStyling() {
+    const {
+      buttonHeight
+    } = state.options.paymentInstruments.paypal;
+    container.style.height = `${buttonHeight}px`;
+  }
+
   function mountButton() {
     if(!container.children.length) {
       const rebillyMountFunction = {
@@ -35,6 +43,9 @@ export default function mountExpressMethod({
         if (id === 'apple-pay') {
           updateApplePayStyling();
         }
+        if (id === 'pay-pal-billing-agreement') {
+          updatePayPalStyling();
+        }
       } else {
         console.warn(`method '${id}' is not supported`);
       }