@rebilly/instruments 8.9.0 → 8.10.0

package/dist/index.js

@@ -648,7 +648,7 @@ function isRef(r2) {
   return !!(r2 && r2.__v_isRef === true);
 }
 function isDOMElement(element) {
-  return element instanceof Element || element instanceof HTMLDocument;
+  return element instanceof Element || element instanceof Document;
 }
 const summaryLoaderHTML = `
   <div class="rebilly-instruments-summary-loader-total rebilly-instruments-loader-display-flex rebilly-instruments-loader-align-center rebilly-instruments-loader-justify-space-between">
@@ -1626,6 +1626,11 @@ function validateOptions$1(options) {
     );
   }
 }
+function validateData(data) {
+  if (data == null) {
+    throw new Error("Could not access data instance");
+  }
+}
 const state = (() => {
   let state2 = null;
   const defaultState = {
@@ -2707,6 +2712,7 @@ class BaseEvent {
 const events = {
   dataReady: new BaseEvent("data-ready"),
   instrumentReady: new BaseEvent("instrument-ready"),
+  payoutCompleted: new BaseEvent("payout-completed"),
   purchaseCompleted: new BaseEvent("purchase-completed"),
   setupCompleted: new BaseEvent("setup-completed")
 };
@@ -5977,7 +5983,7 @@ function cloneArrayDeep(val, instanceClone) {
   return res;
 }
 var cloneDeep_1 = cloneDeep;
-const version = "55.8.1";
+const version = "55.9.0";
 let urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
 let nanoid = (size2 = 21) => {
   let id2 = "";
@@ -10515,7 +10521,11 @@ function getPaymentMethods() {
     expressMethods: [],
     methods: []
   };
-  (_a = state.data.readyToPay) == null ? void 0 : _a.forEach((method) => {
+  let methods = state.data.readyToPay;
+  if ((_a = state.options) == null ? void 0 : _a.payout) {
+    methods = state.data.readyToPayout;
+  }
+  methods == null ? void 0 : methods.forEach((method) => {
     if (method.metadata.isExpressMethod) {
       result.expressMethods.push(method);
     } else {
@@ -14061,6 +14071,66 @@ async function fetchReadyToPay() {
     return filterReadyToPay(readyToPay);
   });
 }
+function filterReadyToPayout(readyToPayout) {
+  const paymentMethodsMetadata = [...paymentMethods];
+  const EXPRESS_METHODS = ["Google Pay", "Apple Pay", "paypal"];
+  const BLOCKED_METHODS = [
+    // account number, routing number, and account type required
+    "echeck",
+    // payment instrument is required
+    // card number is required
+    // card cvv is required
+    // expiration month is required
+    // expiration year is required
+    "Khelocard",
+    // Klarna authorization token is required
+    // Klarna session ID is required
+    "Klarna"
+  ];
+  const isExpressMethod = ({ method, feature }) => EXPRESS_METHODS.includes(method) || EXPRESS_METHODS.includes(feature == null ? void 0 : feature.name);
+  return readyToPayout.filter((readyData) => {
+    const isOldPayPal = readyData.method === "paypal" && !readyData.feature;
+    const isPlaid = readyData.method === "ach" && readyData.feature;
+    const isBlocked = BLOCKED_METHODS.includes(readyData.method);
+    return !isOldPayPal && !isPlaid && !isBlocked;
+  }).map((fields, index2) => {
+    const metadata2 = paymentMethodsMetadata.find(
+      (methodMetadata) => methodMetadata.apiName === fields.method
+    ) || {};
+    metadata2.isExpressMethod = isExpressMethod(fields);
+    return new ReadyToPayModel({
+      index: index2,
+      metadata: metadata2,
+      ...fields
+    });
+  }).filter(({ metadata: metadata2 }) => metadata2.storefrontEnabled);
+}
+async function fetchReadyToPayout() {
+  return Endpoint(async () => {
+    var _a, _b, _c;
+    validateOptions$1(state.options);
+    validateData(state.data);
+    validateStorefront(state.storefront);
+    if (!((_a = state == null ? void 0 : state.data) == null ? void 0 : _a.riskMetadata)) {
+      const { riskMetadata: data2 } = await j();
+      state.data.riskMetadata = data2;
+    }
+    const data = {
+      riskMetadata: state.data.riskMetadata,
+      websiteId: state.options.websiteId || null
+    };
+    if ((_c = (_b = state == null ? void 0 : state.data) == null ? void 0 : _b.account) == null ? void 0 : _c.address) {
+      data.billingAddress = state.data.account.address;
+    }
+    if (state.data.payout) {
+      data.amount = state.data.payout.amount;
+      data.currency = state.data.payout.currency;
+    }
+    const { fields: readyToPayFields } = await state.storefront.readyToPayout.readyToPayout({ data });
+    const readyToPayout = Object.values(readyToPayFields);
+    return filterReadyToPayout(readyToPayout);
+  });
+}
 const _InvoiceModel = class _InvoiceModel extends BaseModel {
   get isPaid() {
     return this.status === _InvoiceModel.Status.paid;
@@ -14217,6 +14287,15 @@ async function fetchPaymentInstrument() {
     return instruments.map(({ fields }) => fields);
   });
 }
+async function createPaymentInstrument({
+  data
+}) {
+  return Endpoint(async () => {
+    validateStorefront(state.storefront);
+    const { fields: instrument } = await state.storefront.paymentInstruments.create({ data });
+    return instrument;
+  });
+}
 class DepositRequestModel extends BaseModel {
   constructor(fields) {
     super(fields);
@@ -14253,6 +14332,26 @@ async function fetchDepositRequest({
     return new DepositRequestModel(fields);
   });
 }
+class PayoutRequestModel extends BaseModel {
+  constructor(fields = {}) {
+    super(fields);
+  }
+}
+async function fetchPayoutRequest(data) {
+  return Endpoint(async () => {
+    validateStorefront(state.storefront);
+    validateOptions$1(state.options);
+    const { fields } = await state.storefront.payoutRequests.get(data);
+    return new PayoutRequestModel(fields);
+  });
+}
+async function updatePayoutRequest(data) {
+  return Endpoint(async () => {
+    validateStorefront(state.storefront);
+    const { fields } = await state.storefront.payoutRequests.update(data);
+    return new PayoutRequestModel(fields);
+  });
+}
 function optional(schema2) {
   return schema2;
 }
@@ -14443,18 +14542,22 @@ async function fetchData({
   fetchTransaction: fetchTransaction$1 = fetchTransaction,
   fetchAccountAndWebsite: fetchAccountAndWebsite$1 = fetchAccountAndWebsite,
   fetchInstruments = fetchPaymentInstrument,
-  fetchDepositRequest: fetchDepositRequest$1 = fetchDepositRequest
+  fetchDepositRequest: fetchDepositRequest$1 = fetchDepositRequest,
+  fetchPayoutRequest: fetchPayoutRequest$1 = fetchPayoutRequest
 } = {}) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   try {
     state.data = new DataInstance();
+    if (state.storefront && ((_a = state.options) == null ? void 0 : _a.jwt)) {
+      state.storefront.setSessionToken(state.options.jwt);
+    }
     if (!riskMetadata) {
       const { riskMetadata: data } = await j();
       state.data.riskMetadata = data;
     } else {
       state.data.riskMetadata = riskMetadata;
     }
-    if ((_a = state.options) == null ? void 0 : _a.deposit) {
+    if ((_b = state.options) == null ? void 0 : _b.deposit) {
       if (isDepositRequest(state.options.deposit)) {
         state.data.deposit = await fetchDepositRequest$1({
           data: {
@@ -14468,9 +14571,15 @@ async function fetchData({
         );
       }
     }
+    if ((_c = state.options) == null ? void 0 : _c.payout) {
+      state.data.payout = await fetchPayoutRequest$1({
+        id: state.options.payout.payoutRequestId
+      });
+    }
     let readyToPayPromise = Promise.resolve(null);
+    let readyToPayoutPromise = Promise.resolve(null);
     let availableInstrumentsPromise = null;
-    if ((_b = state.options) == null ? void 0 : _b.jwt) {
+    if ((_d = state.options) == null ? void 0 : _d.jwt) {
       fetchAccountAndWebsite$1().then(({ account, website }) => {
         if (state.data == null) {
           throw new Error("Invalid data instance");
@@ -14478,12 +14587,20 @@ async function fetchData({
         state.data.account = account;
         state.data.website = website;
       });
-      readyToPayPromise = fetchReadyToPay();
+      if ((_e = state.options) == null ? void 0 : _e.payout) {
+        readyToPayoutPromise = fetchReadyToPayout();
+      } else {
+        readyToPayPromise = fetchReadyToPay();
+      }
       availableInstrumentsPromise = fetchInstruments();
     } else {
-      readyToPayPromise = fetchReadyToPay();
+      if ((_f = state.options) == null ? void 0 : _f.payout) {
+        readyToPayoutPromise = fetchReadyToPayout();
+      } else {
+        readyToPayPromise = fetchReadyToPay();
+      }
     }
-    if ((_c = state.options) == null ? void 0 : _c.transactionId) {
+    if ((_g = state.options) == null ? void 0 : _g.transactionId) {
       state.data.transaction = await fetchTransaction$1({
         data: {
           id: state.options.transactionId
@@ -14491,7 +14608,7 @@ async function fetchData({
       });
     }
     let productsPromise;
-    const invoiceId = ((_d = state.options) == null ? void 0 : _d.invoiceId) || ((_f = (_e = state.data) == null ? void 0 : _e.transaction) == null ? void 0 : _f.invoiceId);
+    const invoiceId = ((_h = state.options) == null ? void 0 : _h.invoiceId) || ((_j = (_i = state.data) == null ? void 0 : _i.transaction) == null ? void 0 : _j.invoiceId);
     if (invoiceId) {
       const { invoice, products: products2 } = await fetchInvoiceAndProducts$1({
         data: {
@@ -14501,23 +14618,25 @@ async function fetchData({
       productsPromise = Promise.resolve(products2);
       state.data.invoice = invoice;
     }
-    const previewPurchasePromise = ((_g = state.options) == null ? void 0 : _g.items) ? fetchSummary() : null;
-    if (!((_h = state.options) == null ? void 0 : _h.jwt)) {
+    const previewPurchasePromise = ((_k = state.options) == null ? void 0 : _k.items) ? fetchSummary() : null;
+    if (!((_l = state.options) == null ? void 0 : _l.jwt)) {
       productsPromise = fetchProductsFromPlans();
     }
     let plansPromise = new Promise((resolve2) => {
       resolve2([]);
     });
-    if (((_i = state.options) == null ? void 0 : _i.addons) || ((_j = state.options) == null ? void 0 : _j.bumpOffer)) {
+    if (((_m = state.options) == null ? void 0 : _m.addons) || ((_n = state.options) == null ? void 0 : _n.bumpOffer)) {
       plansPromise = fetchPlansFromAddonsBumpOffer();
     }
     const [
+      readyToPayout,
       readyToPay,
       previewPurchase,
       products,
       plans,
       availableInstruments
     ] = await Promise.all([
+      readyToPayoutPromise,
       readyToPayPromise,
       previewPurchasePromise,
       productsPromise,
@@ -14525,6 +14644,7 @@ async function fetchData({
       availableInstrumentsPromise
     ]);
     return new DataInstance({
+      readyToPayout,
       readyToPay,
       previewPurchase,
       products,
@@ -14586,7 +14706,7 @@ function generateFramepayConfig({ methodIds } = {}) {
     locale: (options == null ? void 0 : options.locale) || "auto",
     organizationId: options.organizationId,
     websiteId: options.websiteId,
-    methods: data.readyToPay
+    methods: options.payout ? data.readyToPayout : data.readyToPay
   };
   if (methodIds.includes("pay-pal-billing-agreement")) {
     config.transactionData = merge$1(
@@ -15139,10 +15259,10 @@ function processPropertyAsDOMElement({
   if (typeof prop === "undefined") {
     throw new Error('processPropertyDOMElement: Missing argument "prop"');
   }
-  if (hasValidCSSSelector(prop)) {
-    DOMElement = document.querySelector(prop);
-  } else if (isDOMElement(prop)) {
+  if (isDOMElement(prop)) {
     DOMElement = prop;
+  } else if (typeof prop === "string" && hasValidCSSSelector(prop)) {
+    DOMElement = document.querySelector(prop);
   } else {
     throw new Error(
       `Please provide a valid CSS class, id or DOM element for "${propName}" property`
@@ -22262,6 +22382,19 @@ jsonSchema201909.default = addMetaSchema2019;
 })(_2019, _2019.exports);
 var _2019Exports = _2019.exports;
 const AJV = /* @__PURE__ */ getDefaultExportFromCjs(_2019Exports);
+const planItemsSchema = {
+  type: "array",
+  items: {
+    type: "object",
+    properties: {
+      planId: { type: "string" },
+      quantity: { type: "number" },
+      thumbnail: optional({ type: "string" })
+    },
+    required: ["planId", "quantity"]
+  },
+  default: []
+};
 const itemsSchema = {
   type: "array",
   items: {
@@ -22294,19 +22427,6 @@ const itemsSchema = {
   },
   minItems: 1
 };
-const planItemsSchema = {
-  type: "array",
-  items: {
-    type: "object",
-    properties: {
-      planId: { type: "string" },
-      quantity: { type: "number" },
-      thumbnail: optional({ type: "string" })
-    },
-    required: ["planId", "quantity"]
-  },
-  default: []
-};
 const moneySchema = {
   type: "object",
   properties: {
@@ -22321,6 +22441,15 @@ const moneySchema = {
   },
   required: ["amount", "currency"]
 };
+const payoutSchema = {
+  type: "object",
+  properties: {
+    payoutRequestId: {
+      type: "string"
+    }
+  },
+  required: ["payoutRequestId"]
+};
 const i18nSchema = {
   type: "object",
   patternProperties: {
@@ -22936,6 +23065,15 @@ const devSchema = {
     framePayStyleLink: optional({ type: "string" })
   }
 };
+const purchaseDataKeys = [
+  "items",
+  "transactionId",
+  "invoiceId",
+  "money",
+  "deposit",
+  "payout"
+];
+const requireJWT = ["invoiceId", "transactionId", "deposit", "payout"];
 const schema = {
   title: "Mount Options Schema",
   type: "object",
@@ -22944,21 +23082,48 @@ const schema = {
     publishableKey: optional({ type: "string" }),
     websiteId: optional({ type: "string" }),
     items: itemsSchema,
-    addons: optional(planItemsSchema),
-    bumpOffer: optional(planItemsSchema),
     money: moneySchema,
     invoiceId: { type: "string" },
     transactionId: { type: "string" },
     deposit: depositSchema,
+    payout: payoutSchema,
+    jwt: optional({ type: "string" }),
+    addons: optional(planItemsSchema),
+    bumpOffer: optional(planItemsSchema),
     form: optional({
-      type: "string",
-      default: ".rebilly-instruments"
+      default: ".rebilly-instruments",
+      type: ["string", "object"],
+      oneOf: [
+        {
+          type: "string"
+        },
+        {
+          type: "object",
+          properties: {
+            id: {
+              type: "string"
+            }
+          }
+        }
+      ]
     }),
     summary: optional({
-      type: "string",
-      default: ".rebilly-instruments-summary"
+      default: ".rebilly-instruments-summary",
+      type: ["string", "object"],
+      oneOf: [
+        {
+          type: "string"
+        },
+        {
+          type: "object",
+          properties: {
+            id: {
+              type: "string"
+            }
+          }
+        }
+      ]
     }),
-    jwt: optional({ type: "string" }),
     apiMode: {
       type: "string",
       enum: ["sandbox", "live"]
@@ -22985,71 +23150,36 @@ const schema = {
   },
   required: ["apiMode"],
   dependentRequired: {
-    invoiceId: ["jwt"],
-    transactionId: ["jwt"],
-    deposit: ["jwt"]
+    ...requireJWT.reduce((accumulator, currentValue) => {
+      return {
+        ...accumulator,
+        [`${currentValue}`]: ["jwt"]
+      };
+    }, {})
   },
   anyOf: [
-    {
-      if: { required: ["items"] },
-      then: {
-        properties: {
-          transactionId: false,
-          invoiceId: false,
-          deposit: false,
-          money: false
-        }
-      },
-      else: false
-    },
-    {
-      if: { required: ["money"] },
-      then: {
-        properties: {
-          transactionId: false,
-          invoiceId: false,
-          deposit: false,
-          items: false
-        }
-      },
-      else: false
-    },
-    {
-      if: { required: ["transactionId"] },
-      then: {
-        properties: {
-          invoiceId: false,
-          deposit: false,
-          items: false,
-          money: false
-        }
-      },
-      else: false
-    },
-    {
-      if: { required: ["invoiceId"] },
-      then: {
-        properties: {
-          transactionId: false,
-          deposit: false,
-          items: false,
-          money: false
-        }
-      },
-      else: false
-    },
-    {
-      if: { required: ["deposit"] },
-      then: {
-        properties: {
-          invoiceId: false,
-          transactionId: false,
-          items: false,
-          money: false
-        }
-      },
-      else: false
-    },
+    ...purchaseDataKeys.map((key) => {
+      const otherPurchaseDataKeys = purchaseDataKeys.filter(
+        (value) => value !== key
+      );
+      return {
+        if: { required: [key] },
+        then: {
+          properties: {
+            ...otherPurchaseDataKeys.reduce(
+              (otherProperties, currentKey) => {
+                return {
+                  ...otherProperties,
+                  [currentKey]: false
+                };
+              },
+              {}
+            )
+          }
+        },
+        else: false
+      };
+    }),
     {
       required: ["jwt"]
     }
@@ -23072,7 +23202,11 @@ const ajv = new AJV({
 });
 const validate = ajv.compile(schema);
 function sanitize2(data) {
-  return JSON.parse(JSON.stringify(data));
+  return Object.assign(JSON.parse(JSON.stringify(data)), {
+    // HTMLElement is turned into objects by JSON.stringify
+    form: data.form,
+    summary: data.summary
+  });
 }
 function validateOptions(data) {
   const sanitizedData = sanitize2(data);
@@ -23155,7 +23289,7 @@ function handleComputedProperty(options) {
   var _a;
   return Object.assign({}, options, {
     _computed: {
-      version: "8.8.1",
+      version: "8.9.0",
       paymentMethodsUrl: ((_a = options._dev) == null ? void 0 : _a.paymentMethodsUrl) ?? "https://forms.secure-payments.app"
     }
   });
@@ -25729,62 +25863,6 @@ function on({ eventName, callback }) {
   const internalEventName = camelCase$1(eventName);
   events[internalEventName].addEventListener(callback);
 }
-async function postPurchase({ data }) {
-  return Endpoint(async () => {
-    validateStorefront(state.storefront);
-    const purchaseSchemaKeys = [
-      "websiteId",
-      "paymentInstruction",
-      "items",
-      "billingAddress",
-      "deliveryAddress",
-      "shippingRateId",
-      "couponIds",
-      "password",
-      "redirectUrl"
-    ];
-    Object.keys(data).forEach((key) => {
-      if (!purchaseSchemaKeys.includes(key)) {
-        delete data[key];
-      }
-    });
-    return state.storefront.purchase.purchase({ data });
-  });
-}
-async function postPayment({ data }) {
-  return Endpoint(async () => {
-    validateStorefront(state.storefront);
-    const {
-      token,
-      transactionId,
-      invoiceId,
-      websiteId,
-      paymentInstrumentId
-    } = data;
-    const purchaseSchemaKeys = ["riskMetadata", "redirectUrl"];
-    if (token) {
-      purchaseSchemaKeys.push("token");
-    }
-    if (paymentInstrumentId) {
-      purchaseSchemaKeys.push("paymentInstrumentId");
-    }
-    if (transactionId) {
-      purchaseSchemaKeys.push("transactionId");
-    }
-    if (invoiceId) {
-      purchaseSchemaKeys.push("invoiceId");
-    }
-    if (websiteId) {
-      purchaseSchemaKeys.push("amount", "currency", "websiteId");
-    }
-    Object.keys(data).forEach((key) => {
-      if (!purchaseSchemaKeys.includes(key)) {
-        delete data[key];
-      }
-    });
-    return state.storefront.purchase.payment({ data });
-  });
-}
 const modalTemplate = (isRedirect, method) => `
   <div class="rebilly-instruments-modal-overlay">
     <div class="rebilly-instruments-modal-container ${method ? `rebilly-instruments-${method}` : ""} ${isRedirect ? "is-redirect" : ""}">
@@ -25868,6 +25946,117 @@ async function mountModal({
   });
   return iframe;
 }
+function handleApprovalUrl({ fields, payload }) {
+  var _a, _b, _c, _d, _e;
+  if (state.options.features.fullPageRedirect && (payload.redirectUrl || ((_a = fields.transaction) == null ? void 0 : _a.approvalUrl))) {
+    window.location = payload.redirectUrl || ((_b = fields.transaction) == null ? void 0 : _b.approvalUrl);
+    return;
+  }
+  if (payload.redirectUrl || !((_c = fields.transaction) == null ? void 0 : _c.approvalUrl)) {
+    const { paymentMethodsUrl } = state.options._computed;
+    const modelSafeFields = JSON.parse(JSON.stringify(fields));
+    const model = {};
+    if (state.data.isPayment) {
+      model.payment = modelSafeFields;
+    } else {
+      model.purchase = modelSafeFields;
+    }
+    state.data = new DataInstance({ ...fields });
+    const name = "rebilly-instruments-approval-url";
+    mountModal({
+      name,
+      url: `${paymentMethodsUrl}?name=${name}`,
+      model,
+      close: (updatedPurchase) => {
+        events.purchaseCompleted.dispatch(updatedPurchase);
+      }
+    });
+  } else if ((_d = fields.transaction) == null ? void 0 : _d.approvalUrl) {
+    window.location = (_e = fields.transaction) == null ? void 0 : _e.approvalUrl;
+  }
+}
+async function postPurchase({ data }) {
+  return Endpoint(async () => {
+    validateStorefront(state.storefront);
+    const purchaseSchemaKeys = [
+      "websiteId",
+      "paymentInstruction",
+      "items",
+      "billingAddress",
+      "deliveryAddress",
+      "shippingRateId",
+      "couponIds",
+      "password",
+      "redirectUrl"
+    ];
+    Object.keys(data).forEach((key) => {
+      if (!purchaseSchemaKeys.includes(key)) {
+        delete data[key];
+      }
+    });
+    return state.storefront.purchase.purchase({ data });
+  });
+}
+async function postPayment({ data }) {
+  return Endpoint(async () => {
+    validateStorefront(state.storefront);
+    const {
+      token,
+      transactionId,
+      invoiceId,
+      websiteId,
+      paymentInstrumentId
+    } = data;
+    const purchaseSchemaKeys = ["riskMetadata", "redirectUrl"];
+    if (token) {
+      purchaseSchemaKeys.push("token");
+    }
+    if (paymentInstrumentId) {
+      purchaseSchemaKeys.push("paymentInstrumentId");
+    }
+    if (transactionId) {
+      purchaseSchemaKeys.push("transactionId");
+    }
+    if (invoiceId) {
+      purchaseSchemaKeys.push("invoiceId");
+    }
+    if (websiteId) {
+      purchaseSchemaKeys.push("amount", "currency", "websiteId");
+    }
+    Object.keys(data).forEach((key) => {
+      if (!purchaseSchemaKeys.includes(key)) {
+        delete data[key];
+      }
+    });
+    return state.storefront.purchase.payment({ data });
+  });
+}
+async function makePurchase({ payload }) {
+  const data = {
+    websiteId: state.options.websiteId,
+    paymentInstruction: {
+      token: payload._raw.id
+    },
+    ...payload
+  };
+  if (state.data.acceptBumpOffer) {
+    data.items = state.options.bumpOffer;
+  } else {
+    data.items = mapItemsQuantities(state.options.items);
+  }
+  if (state.data.couponIds && Array.isArray(state.data.couponIds)) {
+    data.couponIds = state.data.couponIds;
+  }
+  if (state.options.addons && state.data.addons && Array.isArray(state.data.addons)) {
+    state.options.addons.forEach((addon) => {
+      if (state.data.addons.includes(addon.planId)) {
+        data.items.push(addon);
+      }
+    });
+  }
+  const { fields } = await postPurchase({ data });
+  return fields;
+}
 async function makePayment({ payload }) {
   var _a, _b, _c, _d, _e, _f;
   const {
@@ -25906,10 +26095,7 @@ async function makePayment({ payload }) {
   if ((_f = state.data) == null ? void 0 : _f.riskMetadata) {
     data.riskMetadata = state.data.riskMetadata;
   }
-  let { fields } = await postPayment({
-    state,
-    data
-  });
+  let { fields } = await postPayment({ data });
   fields = {
     transaction: fields,
     token: fields.token || state.options.jwt
@@ -25919,66 +26105,28 @@ async function makePayment({ payload }) {
   }
   return fields;
 }
-async function makePurchase({ payload }) {
-  const data = {
-    websiteId: state.options.websiteId,
-    paymentInstruction: {
-      token: payload._raw.id
-    },
-    ...payload
-  };
-  if (state.data.acceptBumpOffer) {
-    data.items = state.options.bumpOffer;
-  } else {
-    data.items = mapItemsQuantities(state.options.items);
-  }
-  if (state.data.couponIds && Array.isArray(state.data.couponIds)) {
-    data.couponIds = state.data.couponIds;
+async function makePayout({
+  payload: {
+    isExistingInstrument,
+    _raw: { id: paymentInstrumentId }
   }
-  if (state.options.addons && state.data.addons && Array.isArray(state.data.addons)) {
-    state.options.addons.forEach((addon) => {
-      if (state.data.addons.includes(addon.planId)) {
-        data.items.push(addon);
-      }
+}) {
+  if (!isExistingInstrument) {
+    const { id: newPaymentInstrumentId } = await createPaymentInstrument({
+      data: { token: paymentInstrumentId }
     });
+    paymentInstrumentId = newPaymentInstrumentId;
   }
-  const { fields } = await postPurchase({
-    state,
-    data
-  });
-  return fields;
-}
-function handleApprovalUrl({ fields, payload }) {
-  var _a, _b, _c, _d, _e;
-  if (state.options.features.fullPageRedirect && (payload.redirectUrl || ((_a = fields.transaction) == null ? void 0 : _a.approvalUrl))) {
-    window.location = payload.redirectUrl || ((_b = fields.transaction) == null ? void 0 : _b.approvalUrl);
-    return;
-  }
-  if (payload.redirectUrl || !((_c = fields.transaction) == null ? void 0 : _c.approvalUrl)) {
-    const { paymentMethodsUrl } = state.options._computed;
-    const modelSafeFields = JSON.parse(JSON.stringify(fields));
-    const model = {};
-    if (state.data.isPayment) {
-      model.payment = modelSafeFields;
-    } else {
-      model.purchase = modelSafeFields;
+  const payoutRequest = await updatePayoutRequest({
+    id: state.data.payout.id,
+    data: {
+      paymentInstrumentId
     }
-    state.data = new DataInstance({ ...fields });
-    const name = "rebilly-instruments-approval-url";
-    mountModal({
-      name,
-      url: `${paymentMethodsUrl}?name=${name}`,
-      model,
-      close: (updatedPurchase) => {
-        events.purchaseCompleted.dispatch(updatedPurchase);
-      }
-    });
-  } else if ((_d = fields.transaction) == null ? void 0 : _d.approvalUrl) {
-    window.location = (_e = fields.transaction) == null ? void 0 : _e.approvalUrl;
-  }
+  });
+  return payoutRequest;
 }
 async function purchase({ payload }) {
-  var _a, _b, _c;
+  var _a, _b;
   Object.keys(payload).forEach((key) => {
     if (payload[key] === null) {
       delete payload[key];
@@ -25986,19 +26134,27 @@ async function purchase({ payload }) {
   });
   try {
     let fields;
-    if (state.data.isPayment) {
+    let completedEvent;
+    if (state.options.payout) {
+      fields = await makePayout({ payload });
+      completedEvent = events.payoutCompleted;
+    } else if (state.data.isPayment) {
       fields = await makePayment({ payload });
+      completedEvent = events.purchaseCompleted;
     } else {
       fields = await makePurchase({ payload });
+      completedEvent = events.purchaseCompleted;
     }
     if (((_a = fields.transaction) == null ? void 0 : _a.approvalUrl) && ((_b = fields.transaction) == null ? void 0 : _b.result) === "unknown") {
       if (state.options.features.fullPageRedirect) {
-        window.location = (_c = fields.transaction) == null ? void 0 : _c.approvalUrl;
+        window.location = fields.transaction.approvalUrl;
       } else {
         handleApprovalUrl({ fields, payload });
       }
+    } else if (fields.selectedPaymentInstrumentRedirectUrl) {
+      window.location = fields.selectedPaymentInstrumentRedirectUrl;
     } else {
-      events.purchaseCompleted.dispatch(fields);
+      completedEvent.dispatch(fields);
     }
   } catch (error2) {
     showError(error2);
@@ -26100,10 +26256,15 @@ async function mountResult({ payload }) {
   }
   const modelSafeState = state.toModel();
   const model = {
+    data: modelSafeState.data,
     options: modelSafeState.options,
-    mainStyleVars: modelSafeState.mainStyleVars,
-    [state.options.transactionType]: payload
+    mainStyleVars: modelSafeState.mainStyleVars
   };
+  if (state.data.payout) {
+    model.payoutRequest = payload;
+  } else {
+    model[state.options.transactionType] = payload;
+  }
   (_a = iframe == null ? void 0 : iframe.component) == null ? void 0 : _a.call("route", {
     name: "result"
   });
@@ -26162,6 +26323,13 @@ const setupUserFlow = ({ state: state2 = {} }) => {
     });
   }
   if (!((_d = (_c = state2 == null ? void 0 : state2.options) == null ? void 0 : _c.features) == null ? void 0 : _d.hideResult)) {
+    on({
+      eventName: "payout-completed",
+      callback: (payload) => {
+        payload = JSON.parse(JSON.stringify(payload));
+        showResult({ state: state2, payload });
+      }
+    });
     on({
       eventName: "purchase-completed",
       callback: (payload) => {
@@ -26182,7 +26350,7 @@ async function mount({
   setupFramepay: setupFramepay$1 = setupFramepay,
   ...options
 } = {}) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   try {
     state.data = {};
     state.options = {};
@@ -26236,7 +26404,13 @@ async function mount({
         false
       );
     }
-    if (!((_h = data.readyToPay) == null ? void 0 : _h.length)) {
+    let hasNoPaymentMethods = false;
+    if (data.payout) {
+      hasNoPaymentMethods = !((_h = data.readyToPayout) == null ? void 0 : _h.length);
+    } else {
+      hasNoPaymentMethods = !((_i = data.readyToPay) == null ? void 0 : _i.length);
+    }
+    if (hasNoPaymentMethods) {
       state.loader.stopLoading({ id: "rebilly-instruments-form" });
       showError(
         state.translate.getTranslation("form.error.noPaymentMethods")
@@ -26304,7 +26478,7 @@ class RebillyInstrumentsInstance {
     await show({ componentName, payload });
   }
   get version() {
-    return `RebillyInstruments Ver.${"8.8.1"}`;
+    return `RebillyInstruments Ver.${"8.9.0"}`;
   }
   on(eventName, callback) {
     on({ eventName, callback });