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

package/package.json

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

package/src/data/payment-methods.json

@@ -1255,6 +1255,25 @@
       }
     ]
   },
+  {
+    "apiName": "KakaoPay",
+    "name": "KakaoPay",
+    "landscapeLogo": null,
+    "portraitLogo": null,
+    "summary": "KakaoPay is a mobile payment and digital wallet service by Kakao and based in South Korea. It enables users make mobile payments and online transactions.\n",
+    "description": "KakaoPay is a mobile payment and digital wallet service by Kakao and based in South Korea. It enables users make mobile payments and online transactions.\n",
+    "countries": {
+      "mode": "unknown",
+      "values": []
+    },
+    "storefrontEnabled": false,
+    "_links": [
+      {
+        "rel": "self",
+        "href": "https://api.rebilly.com/payment-methods/KakaoPay"
+      }
+    ]
+  },
   {
     "apiName": "Khelocard",
     "name": "Khelocard",
@@ -1931,6 +1950,25 @@
       }
     ]
   },
+  {
+    "apiName": "Payco",
+    "name": "Payco",
+    "landscapeLogo": null,
+    "portraitLogo": null,
+    "summary": "Payco is one of the most popular forms of payment in South Korea and offers your shoppers convenience and familiarity when shopping online.\n",
+    "description": "Payco is one of the most popular forms of payment in South Korea and offers your shoppers convenience and familiarity when shopping online.\n",
+    "countries": {
+      "mode": "unknown",
+      "values": []
+    },
+    "storefrontEnabled": false,
+    "_links": [
+      {
+        "rel": "self",
+        "href": "https://api.rebilly.com/payment-methods/Payco"
+      }
+    ]
+  },
   {
     "apiName": "Payeer",
     "name": "Payeer",
@@ -2330,6 +2368,25 @@
       }
     ]
   },
+  {
+    "apiName": "Samsung Pay",
+    "name": "Samsung Pay",
+    "landscapeLogo": null,
+    "portraitLogo": null,
+    "summary": "Samsung Pay is a mobile payment and digital wallet service by Samsung Electronics that enables users to make payments using\ncompatible phones and other Samsung-produced devices.\n",
+    "description": "Samsung Pay is a mobile payment and digital wallet service by Samsung Electronics that enables users to make payments using\ncompatible phones and other Samsung-produced devices.\n",
+    "countries": {
+      "mode": "unknown",
+      "values": []
+    },
+    "storefrontEnabled": false,
+    "_links": [
+      {
+        "rel": "self",
+        "href": "https://api.rebilly.com/payment-methods/Samsung%20Pay"
+      }
+    ]
+  },
   {
     "apiName": "Siirto",
     "name": "Siirto",
@@ -2712,6 +2769,25 @@
       }
     ]
   },
+  {
+    "apiName": "Wallet88",
+    "name": "Wallet88",
+    "landscapeLogo": null,
+    "portraitLogo": null,
+    "summary": "Wallet88 payment method.",
+    "description": "Wallet88 payment method.",
+    "countries": {
+      "mode": "unknown",
+      "values": []
+    },
+    "storefrontEnabled": true,
+    "_links": [
+      {
+        "rel": "self",
+        "href": "https://api.rebilly.com/payment-methods/Wallet88"
+      }
+    ]
+  },
   {
     "apiName": "WeChat Pay",
     "name": "WeChat Pay",

package/src/functions/mount/index.js

@@ -28,13 +28,13 @@ import { showError } from '../../views/errors';
  *
  * @typedef {object} GooglePayDisplayOptions
  * @property {"back" | "white"} [buttonColor=black] - Color of google pay button
- * @property {"short" | "long"} [buttonType=short] - The length of the button
- * @property {string} [buttonHeight=44px] - The value and units of the button to match other payment buttons
+ * @property {"book" | "buy" | "checkout" | "donate" | "order" | "pay" | "plain" | "subscribe" | "short" | "long"} [buttonType=plain] - The length of the button
+ * @property {string} [buttonHeight=48px] - The value and units of the button to match other payment buttons
  *
  * @typedef {object} ApplePayDisplayOptions
  * @property {"back" | "white"} [buttonColor=black] - Color of apple pay button
  * @property {"short" | "long"} [buttonType=short] - The length of the button
- * @property {string} [buttonHeight=44px] - The value and units of the button to match other payment buttons
+ * @property {string} [buttonHeight=48px] - The value and units of the button to match other payment buttons
  *
  * @typedef {object} ApplePayMerchantOptions
  * @property {string} merchantName - The name of the merchant store.

package/src/functions/mount/setup-options.js

@@ -22,22 +22,22 @@ export const defaults = {
     googlePay: {
       displayOptions: {
         buttonColor: 'black',
-        buttonType: 'short',
-        buttonHeight: '44px'
+        buttonType: 'plain',
+        buttonHeight: '48px'
       }
     },
     applePay: {
       displayOptions: {
         buttonColor: 'black',
         buttonType: 'plain',
-        buttonHeight: '44px'
+        buttonHeight: '48px'
       }
     },
     paymentCard: {
       popup: false
     },
     paypal: {
-      buttonHeight: 44,
+      buttonHeight: 48,
     }
   },
   transactionType: 'purchase',

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: 44px;
+  height: 48px;
 }
 
 .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > *:last-child {
@@ -145,6 +145,10 @@ export const vars = (theme) => `
   white-space: nowrap;
 }
 
+.rebilly-instruments-express-methods .rebilly-instruments-google-pay-method {
+  border-radius: 100px;
+}
+
 @media (max-width: 600px) {
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container  {
     -webkit-box-orient: vertical;

package/src/views/method-selector/generate-digital-wallet.spec.js

@@ -13,15 +13,15 @@ describe('generateDigitalWallet', () => {
         googlePay: {
           displayOptions: {
             buttonColor: 'black',
-            buttonType: 'short',
-            buttonHeight: '44px'
+            buttonType: 'plain',
+            buttonHeight: '48px'
           }
         },
         applePay: {
           displayOptions: {
             buttonColor: 'black',
             buttonType: 'buy',
-            buttonHeight: '44px'
+            buttonHeight: '48px'
           },
           merchantConfig: {
             merchantName: 'Test Store Name',
@@ -76,8 +76,8 @@ describe('generateDigitalWallet', () => {
         },
         googlePayDisplayOptions: { 
           buttonColor: 'black', 
-          buttonType: 'short', 
-          buttonHeight: '44px' 
+          buttonType: 'plain', 
+          buttonHeight: '48px' 
         }
       }
     }
@@ -120,7 +120,7 @@ describe('generateDigitalWallet', () => {
         applePayDisplayOptions: { 
           buttonColor: 'black', 
           buttonType: 'buy', 
-          buttonHeight: '44px' 
+          buttonHeight: '48px' 
         }
       }
     }

package/src/views/method-selector/index.js

@@ -113,6 +113,7 @@ export async function mountMethodSelector() {
 
     iframes.form = iframe;
   } else {
+    state.loader.stopLoading({id: 'rebilly-instruments-form'});
     METHODS_CONTAINER.style.display = 'none';
     document.querySelectorAll('[data-rebilly-instruments="divider"]')
       .forEach(el => { el.style.display = 'none' });