@rebilly/framepay-vue 12.123.0 → 12.125.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
-## [12.123.0](https://github.com/Rebilly/rebilly/compare/framepay-vue-v12.122.0...framepay-vue-v12.123.0) (2026-06-15)
+## [12.125.0](https://github.com/Rebilly/rebilly/compare/framepay-vue-v12.124.0...framepay-vue-v12.125.0) (2026-06-17)
 
 
 ### Features
 
-* **api-metadata, rebilly-js-sdk:** Update resources based on latest api definitions ([#22691](https://github.com/Rebilly/rebilly/issues/22691)) ([1ad1ebe](https://github.com/Rebilly/rebilly/commit/1ad1ebedd1501017cec860ec915eb3783b54803d))
+* **recomm, replay-elements, team-docs:** Extract ScoringStrategy into a named schema and rebuild SDK ([#22767](https://github.com/Rebilly/rebilly/issues/22767)) ([82dd5b4](https://github.com/Rebilly/rebilly/commit/82dd5b442850113ca5e229afef4c3f7079d4876f))

package/README.md

@@ -2,13 +2,15 @@
 
 > Vue components for FramePay.js
 
-Supported: 
+Supported:
+
 - framepay-vue < 3.0.0 supports Vue 2.4+
 - framepay-vue >= 3.0.0 supports Vue 3
 
 This is the repo for the official Vue.js wrapper for Rebilly's [FramePay](https://www.rebilly.com/docs/dev-docs/framepay/). This package provides a flexible set of methods and components to allow drop-in support of FramePay in any Vue project.
 
 ## Table of Contents
+
 - [framepay-vue](#framepay-vue)
   - [Table of Contents](#table-of-contents)
   - [FramePay Documentation](#framepay-documentation)
@@ -57,18 +59,21 @@ This is the repo for the official Vue.js wrapper for Rebilly's [FramePay](https:
 For more information on FramePay see its [official documentation](https://www.rebilly.com/docs/developer-docs/framepay/).
 
 ## Demos
-- [Basic card example](https://codesandbox.io/s/framepay-vue-basic-card-example-ydr7s)
 
+- [Basic card example](https://codesandbox.io/s/framepay-vue-basic-card-example-ydr7s)
 
 ## Installation
+
 **Step 1:**
 
 Install using [Yarn](https://yarnpkg.com/en/):
+
 ```
 yarn add @rebilly/framepay-vue
 ```
 
 Or using NPM:
+
 ```
 npm install @rebilly/framepay-vue --save
 ```
@@ -82,6 +87,7 @@ import FramePay from '@rebilly/framepay-vue';
 
 app.use(FramePay);
 ```
+
 `app.use()` also accepts an optional argument for initialization options. See [Initialization](#initialization) below.
 
 ## Getting Started
@@ -99,7 +105,7 @@ See here for all initialization options: https://www.rebilly.com/docs/dev-docs/f
 import FramePay from '@rebilly/framepay-vue';
 
 const configuration = {
-    publishableKey: 'pk_sandbox_1234567890',
+  publishableKey: 'pk_sandbox_1234567890',
 };
 app.use(FramePay, configuration);
 ```
@@ -110,48 +116,45 @@ Add the `publishableKey` on only the first component in the template.
 
 ```html
 <rebilly-form :configuration="{ publishableKey: 'pk_sandbox_1234567890' }">
-	<input data-rebilly="firstName">
-	<input data-rebilly="lastName">
-	<rebilly-card></rebilly-card>
-</rebilly-form> 
+  <input data-rebilly="firstName" />
+  <input data-rebilly="lastName" />
+  <rebilly-card></rebilly-card>
+</rebilly-form>
 ```
 
-*NOTE:* Do not include the `publishableKey` on a component if you have already passed it via the config object when calling `app.use(Framepay, config)`.
+_NOTE:_ Do not include the `publishableKey` on a component if you have already passed it via the config object when calling `app.use(Framepay, config)`.
 
 #### Lazy loading Framepay files
 
-The Framepay script files will be loaded as soon as `app.use(Framepay)` is called. This does not necessarily need to be done when the app loads, and can instead be done inside the Vue component which actually uses Framepay. In the following example, the Framepay script will not be fetched until the `created()` hook is called. 
+The Framepay script files will be loaded as soon as `app.use(Framepay)` is called. This does not necessarily need to be done when the app loads, and can instead be done inside the Vue component which actually uses Framepay. In the following example, the Framepay script will not be fetched until the `created()` hook is called.
 
 The script will only be loaded the first time `created()` is called, so you can safely call `created()` multiple times without worrying about duplicates.
 
 ```html
 <template>
-    <rebilly-form>
-        <input data-rebilly="firstName">
-        <input data-rebilly="lastName">
-        <rebilly-card></rebilly-card>
-    </rebilly-form> 
+  <rebilly-form>
+    <input data-rebilly="firstName" />
+    <input data-rebilly="lastName" />
+    <rebilly-card></rebilly-card>
+  </rebilly-form>
 </template>
 
 <script>
-    import FramePay, {
-        RebillyForm,
-        RebillyCard,
-    } from '@rebilly/framepay-vue';
-
-    export default {
-        components: {
-            RebillyForm,
-            RebillyCard,
-        },
-        created() {
-            const config = {
-                publishableKey: 'pk_sandbox_1234567890',
-                // etc
-            };
-            app.use(FramePay, config);
-        },
-    };
+  import FramePay, { RebillyForm, RebillyCard } from '@rebilly/framepay-vue';
+
+  export default {
+    components: {
+      RebillyForm,
+      RebillyCard,
+    },
+    created() {
+      const config = {
+        publishableKey: 'pk_sandbox_1234567890',
+        // etc
+      };
+      app.use(FramePay, config);
+    },
+  };
 </script>
 ```
 
@@ -164,21 +167,22 @@ The script will only be loaded the first time `created()` is called, so you can
 - `RebillyBankAccountNumber`, `RebillyBankAccountType`, and `RebillyBankRoutingNumber` mount the `ach` (bank account) payment method
 - `RebillyGooglePay` and `RebillyApplePay` mount Google Pay and Apple Pay respectively. These two methods are different from the rest, as they require additional inputs and emit the payment token with a separate event.
 
-Two more components are also offered for convenience: 
+Two more components are also offered for convenience:
 
 - `RebillyForm` wraps a regular HTML `form`. It automatically detects payment method components and performs token creation/injection when the form is submitted. It is the simplest way to get started with `framepay-vue`.
-- `RebillyToken` can be added to any standard form, and when present will automatically receive the token created by `createToken()`. You do not need to use `RebillyToken` if you are using `RebillyForm` already. 
+- `RebillyToken` can be added to any standard form, and when present will automatically receive the token created by `createToken()`. You do not need to use `RebillyToken` if you are using `RebillyForm` already.
 
 #### Google Pay and Apple Pay
+
 `RebillyGooglePay` and `RebillyApplePay` are used like so:
+
 ```html
-<rebilly-apple-pay
-    @token-ready="handleToken"
-/>
+<rebilly-apple-pay @token-ready="handleToken" />
 ```
 
 whereas:
-* `@token-ready` is an event emitted once the payment token has been generated and its payload contains the token object.
+
+- `@token-ready` is an event emitted once the payment token has been generated and its payload contains the token object.
 
 #### With rebilly-form
 
@@ -186,22 +190,23 @@ The default behavior of `RebillyForm` is to intercept the regular submit event,
 
 ```html
 <rebilly-form @error="" @token-ready="" :extraData="{}">
-	<input data-rebilly="firstName">
-	<input data-rebilly="lastName">
-	<rebilly-card></rebilly-card>
+  <input data-rebilly="firstName" />
+  <input data-rebilly="lastName" />
+  <rebilly-card></rebilly-card>
 </rebilly-form>
 
 <script>
-import { RebillyForm, RebillyCard } from '@rebilly/framepay-vue';
+  import { RebillyForm, RebillyCard } from '@rebilly/framepay-vue';
 
-export default {
+  export default {
     components: {
-        RebillyCard,
-        RebillyForm,
+      RebillyCard,
+      RebillyForm,
     },
-};
+  };
 </script>
 ```
+
 Any DOM attributes you attach to `RebillyForm` will automatically be passed to the base `form` element.
 
 `@error` will expose the error message returned if the `Rebilly.createToken()` request failed. You can inspect `error.message` and `error.code`.
@@ -212,104 +217,103 @@ See here for all arguments to `extraData`: https://www.rebilly.com/docs/dev-docs
 
 See here for list of `data-rebilly` types: https://www.rebilly.com/docs/dev-docs/form-setup.
 
-
 #### With rebilly-form and custom submit logic
 
 If you want to perform your own logic after token creation but before form submission, attach a listener to `@submit` on `RebillyForm`. If `RebillyForm` detects the listener on `@submit`, it will not submit the form automatically but instead emit it alongside the newly created token.
 
 ```html
 <rebilly-form @submit="submitHandler" @error="" :extraData="{}">
-	<input data-rebilly="firstName">
-	<input data-rebilly="lastName">
-	<rebilly-card></rebilly-card>
+  <input data-rebilly="firstName" />
+  <input data-rebilly="lastName" />
+  <rebilly-card></rebilly-card>
 </rebilly-form>
 
 <script>
-import { RebillyForm, RebillyCard } from '@rebilly/framepay-vue';
+  import { RebillyForm, RebillyCard } from '@rebilly/framepay-vue';
 
-export default {
+  export default {
     components: {
-        RebillyCard,
-        RebillyForm,
+      RebillyCard,
+      RebillyForm,
     },
     methods: {
-        submitHandler(token, form) {
-     	    // do something with token
-     	    form.submit()
-        },
+      submitHandler(token, form) {
+        // do something with token
+        form.submit();
+      },
     },
-};
+  };
 </script>
 ```
 
 #### With rebilly-token
 
-If you prefer to call `createToken()` manually, use the example below. Note that you don't want to use the `Framepay` object directly, but rather the proxied `createToken` method provided by `framepay-vue`. This method returns a promise that waits for the FramePay script to be loaded before calling `Rebilly.createToken()`. Using the pattern below will help eliminate errors due to race conditions. 
+If you prefer to call `createToken()` manually, use the example below. Note that you don't want to use the `Framepay` object directly, but rather the proxied `createToken` method provided by `framepay-vue`. This method returns a promise that waits for the FramePay script to be loaded before calling `Rebilly.createToken()`. Using the pattern below will help eliminate errors due to race conditions.
 
 ```html
 <form @submit="submitHandler">
-	<input data-rebilly="firstName">
-	<input data-rebilly="lastName">
-	<rebilly-card></rebilly-card>
-	<rebilly-token></rebilly-token>
+  <input data-rebilly="firstName" />
+  <input data-rebilly="lastName" />
+  <rebilly-card></rebilly-card>
+  <rebilly-token></rebilly-token>
 </form>
 
 <script>
-import { createToken, RebillyCard, RebillyToken } from '@rebilly/framepay-vue';
-
-export default {
-    methods: {
-        submitHandler(event) {
-            event.preventDefault();
-            const form = event.target;
-            const extraData = { } // some stuff
-            createToken(form, extraData))
-                .then((token) => {
-                    // the token is already added to the form via RebillyToken
-       	            form.submit();
-                })
-                .catch((error) => {
-                    // see error.code and error.message
-                    console.log(error);
-                });
-        },
-    },
-};
+  import { createToken, RebillyCard, RebillyToken } from '@rebilly/framepay-vue';
+
+  export default {
+      methods: {
+          submitHandler(event) {
+              event.preventDefault();
+              const form = event.target;
+              const extraData = { } // some stuff
+              createToken(form, extraData))
+                  .then((token) => {
+                      // the token is already added to the form via RebillyToken
+         	            form.submit();
+                  })
+                  .catch((error) => {
+                      // see error.code and error.message
+                      console.log(error);
+                  });
+          },
+      },
+  };
 </script>
 ```
 
 #### Handle token manually
 
-The token can also be handled entirely manually. As above, be sure to call the imported `createToken()` method instead of the global `Framepay` object. This approach offers the most flexibility, but still removes the need for you to handle initialization, mounting and destruction of payment method elements. 
+The token can also be handled entirely manually. As above, be sure to call the imported `createToken()` method instead of the global `Framepay` object. This approach offers the most flexibility, but still removes the need for you to handle initialization, mounting and destruction of payment method elements.
 
 ```html
 <form @submit="submitHandler">
-	<input data-rebilly="firstName">
-	<input data-rebilly="lastName">
-	<rebilly-card></rebilly-card>
+  <input data-rebilly="firstName" />
+  <input data-rebilly="lastName" />
+  <rebilly-card></rebilly-card>
 </form>
 
 <script>
-    import { createToken, RebillyCard } from '@rebilly/framepay-vue';
-
-	export default {
-	  methods: {
-	    submitHandler(event) {
-	        event.preventDefault();
-	        const form = event.target;
-	        const extraData = { } // some stuff
-	        createToken(form, extraData))
-	            .then((token) => {
-                    // you must dynamically add the token id to the form
-	        	    form.submit();
-	            })
-	            .catch((error) => {
-	                // see error.code and error.message
-	                console.log(error);
-	            });
-	    },
-	  },
-	};
+     import { createToken, RebillyCard } from '@rebilly/framepay-vue';
+
+  export default {
+    methods: {
+      submitHandler(event) {
+          event.preventDefault();
+          const form = event.target;
+          const extraData = { } // some stuff
+          createToken(form, extraData))
+              .then((token) => {
+                     // you must dynamically add the token id to the form
+          	    form.submit();
+              })
+              .catch((error) => {
+                  // see error.code and error.message
+                  console.log(error);
+              });
+      },
+    },
+  };
 </script>
 ```
 
@@ -323,37 +327,36 @@ Framepay will automatically use the first payment method it detects in the form.
 
 ```html
 <rebilly-form @error="" :extraData="{}">
-	<input data-rebilly="firstName">
-	<input data-rebilly="lastName">
-	<rebilly-card v-if="paymentMethod === 'payment-card'"></rebilly-card>
-	<div v-if="paymentMethod=== 'ach'">
-		<rebilly-bank-account-type></rebilly-bank-account-type>
-		<rebilly-bank-account-number></rebilly-bank-account-number>
-		<rebilly-bank-routing-number></rebilly-bank-routing-number>
-	</div>
+  <input data-rebilly="firstName" />
+  <input data-rebilly="lastName" />
+  <rebilly-card v-if="paymentMethod === 'payment-card'"></rebilly-card>
+  <div v-if="paymentMethod=== 'ach'">
+    <rebilly-bank-account-type></rebilly-bank-account-type>
+    <rebilly-bank-account-number></rebilly-bank-account-number>
+    <rebilly-bank-routing-number></rebilly-bank-routing-number>
+  </div>
 </rebilly-form>
 
 <button @click="paymentMethod = 'payment-card'">PaymentCard</button>
 <button @click="paymentMethod = 'ach'">Bank</button>
 ```
 
-
 #### v-show
 
-`v-if` causes the elements to be destroyed and recycled, meaning payment method fields will be re-mounted each time `method` changes in the above example. 
+`v-if` causes the elements to be destroyed and recycled, meaning payment method fields will be re-mounted each time `method` changes in the above example.
 
-It is possible to use `v-show` instead, which will allow you to preserve the user's input when they switch payment methods in your UI. However, you must specify which `method` FramePay should use to create the token, by passing it to `extraData`. 
+It is possible to use `v-show` instead, which will allow you to preserve the user's input when they switch payment methods in your UI. However, you must specify which `method` FramePay should use to create the token, by passing it to `extraData`.
 
 ```html
 <rebilly-form @error="" :extraData="{ method: paymentMethod }">
-	<input data-rebilly="firstName">
-	<input data-rebilly="lastName">
-	<rebilly-card v-show="paymentMethod === 'payment-card'"></rebilly-card>
-	<div v-show="paymentMethod=== 'ach'">
-		<rebilly-bank-account-type></rebilly-bank-account-type>
-		<rebilly-bank-account-number></rebilly-bank-account-number>
-		<rebilly-bank-routing-number></rebilly-bank-routing-number>
-	</div>
+  <input data-rebilly="firstName" />
+  <input data-rebilly="lastName" />
+  <rebilly-card v-show="paymentMethod === 'payment-card'"></rebilly-card>
+  <div v-show="paymentMethod=== 'ach'">
+    <rebilly-bank-account-type></rebilly-bank-account-type>
+    <rebilly-bank-account-number></rebilly-bank-account-number>
+    <rebilly-bank-routing-number></rebilly-bank-routing-number>
+  </div>
 </rebilly-form>
 
 <button @click="paymentMethod = 'payment-card'">PaymentCard</button>
@@ -364,7 +367,7 @@ It is possible to use `v-show` instead, which will allow you to preserve the use
 
 #### `rebilly-form`
 
-As covered above, `rebilly-form` emits `error` and `submit` events. 
+As covered above, `rebilly-form` emits `error` and `submit` events.
 
 #### on payment method components
 
@@ -374,23 +377,23 @@ See details: https://www.rebilly.com/docs/dev-docs/element
 
 ### Validation
 
- Validation errors on payment method components can be detected by attaching a listener to `change`. 
+Validation errors on payment method components can be detected by attaching a listener to `change`.
 
 ```html
 <rebilly-form @error="" :extraData="{}">
-	<input data-rebilly="firstName">
-	<input data-rebilly="lastName">
-	<rebilly-card @change="changeHandler"></rebilly-card>
+  <input data-rebilly="firstName" />
+  <input data-rebilly="lastName" />
+  <rebilly-card @change="changeHandler"></rebilly-card>
 </rebilly-form>
 
 <script>
-	export default {
-	    methods: {
-	        changeHandler(e) {
-	    	    // e.valid, e.source, e.error
-	        },
-	    },
-	};
+  export default {
+    methods: {
+      changeHandler(e) {
+        // e.valid, e.source, e.error
+      },
+    },
+  };
 </script>
 ```
 
@@ -410,7 +413,7 @@ Because this will only change the ID of the element you are mounting Framepay to
 
 #### `createToken` Proxy Method
 
-`framepay-vue` exports a single method: `createToken()`. This method simply wraps the Framepay method `Rebilly.createToken()` in a promise to ensure that the Framepay script has loaded and the object is available. Be sure to import `createToken` from `@rebilly/framepay-vue` instead of using `Rebilly.createToken()`, otherwise you may run into errors due to race conditions. 
+`framepay-vue` exports a single method: `createToken()`. This method simply wraps the Framepay method `Rebilly.createToken()` in a promise to ensure that the Framepay script has loaded and the object is available. Be sure to import `createToken` from `@rebilly/framepay-vue` instead of using `Rebilly.createToken()`, otherwise you may run into errors due to race conditions.
 
 Again, you don't need to use `createToken` at all if you choose to use the `RebillyForm` component.
 
@@ -480,4 +483,3 @@ Payment method components all accept the same props:
 
 Rebilly API for Payment Tokens
 https://rebilly.github.io/RebillyAPI/#tag/Payment-Tokens
-

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebilly/framepay-vue",
   "type": "module",
-  "version": "12.123.0",
+  "version": "12.125.0",
   "description": "Official Vue wrapper for Rebilly FramePay",
   "author": "Rebilly",
   "repository": {