From 8414f1705fbccf0a8be23c839efc143e4c8837a8 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 16 Jul 2024 21:36:43 +0800
Subject: [PATCH] payments onboard and extension purchasing flow completed

---
 .eslintignore                                 |  10 +
 .gitignore                                    |  15 +-
 .stylelintignore                              |   4 +
 addon/components/extension-card.hbs           |   8 +-
 addon/components/extension-card.js            | 157 ++++++++++++-
 .../modals/confirm-extension-purchase.hbs     |   5 +
 .../modals/confirm-extension-purchase.js      |   3 +
 .../modals/extension-purchase-form.hbs        |   5 +
 .../modals/extension-purchase-form.js         |   3 +
 .../controllers/developers/extensions/edit.js |   4 +-
 .../controllers/developers/payments/index.js  |   6 +
 .../developers/payments/onboard.js            |  67 ++++++
 addon/models/registry-extension.js            |   2 +
 addon/routes.js                               |   5 +-
 addon/routes/developers/payments/index.js     |  15 ++
 addon/routes/developers/payments/onboard.js   |  21 ++
 addon/services/stripe.js                      |  83 +++++++
 addon/styles/registry-bridge-engine.css       |  25 ++
 addon/templates/application.hbs               |   1 -
 .../templates/developers/extensions/edit.hbs  |   1 +
 addon/templates/developers/payments/index.hbs |  17 ++
 .../templates/developers/payments/onboard.hbs |  48 ++++
 .../modals/confirm-extension-purchase.js      |   1 +
 .../modals/extension-purchase-form.js         |   1 +
 app/controllers/developers/payments/index.js  |   1 +
 .../developers/payments/onboard.js            |   1 +
 app/routes/developers/payments/index.js       |   1 +
 app/routes/developers/payments/onboard.js     |   1 +
 app/services/stripe.js                        |   1 +
 app/templates/developers/payments/index.js    |   1 +
 app/templates/developers/payments/onboard.js  |   1 +
 composer.json                                 |   4 +-
 config/environment.js                         |   7 +
 package.json                                  |   5 +-
 pnpm-lock.yaml                                |  13 +-
 server/config/registry-bridge.php             |   8 +-
 ...51614_create_registry_extensions_table.php |   1 +
 ...00_create_registry_extension_purchases.php |  41 ++++
 .../v1/RegistryPaymentsController.php         | 197 ++++++++++++++++
 server/src/Models/RegistryExtension.php       | 221 +++++++++++++++---
 .../src/Models/RegistryExtensionPurchase.php  |  85 +++++++
 server/src/Support/Utils.php                  |  19 ++
 server/src/routes.php                         |   7 +
 .../modals/confirm-extension-purchase-test.js |  26 +++
 .../modals/extension-purchase-form-test.js    |  26 +++
 .../developers/payments/index-test.js         |  12 +
 .../developers/payments/onboard-test.js       |  12 +
 .../routes/developers/payments/index-test.js  |  11 +
 .../developers/payments/onboard-test.js       |  11 +
 tests/unit/services/stripe-test.js            |  12 +
 50 files changed, 1189 insertions(+), 43 deletions(-)
 create mode 100644 addon/components/modals/confirm-extension-purchase.hbs
 create mode 100644 addon/components/modals/confirm-extension-purchase.js
 create mode 100644 addon/components/modals/extension-purchase-form.hbs
 create mode 100644 addon/components/modals/extension-purchase-form.js
 create mode 100644 addon/controllers/developers/payments/index.js
 create mode 100644 addon/controllers/developers/payments/onboard.js
 create mode 100644 addon/routes/developers/payments/index.js
 create mode 100644 addon/routes/developers/payments/onboard.js
 create mode 100644 addon/services/stripe.js
 create mode 100644 addon/templates/developers/payments/index.hbs
 create mode 100644 addon/templates/developers/payments/onboard.hbs
 create mode 100644 app/components/modals/confirm-extension-purchase.js
 create mode 100644 app/components/modals/extension-purchase-form.js
 create mode 100644 app/controllers/developers/payments/index.js
 create mode 100644 app/controllers/developers/payments/onboard.js
 create mode 100644 app/routes/developers/payments/index.js
 create mode 100644 app/routes/developers/payments/onboard.js
 create mode 100644 app/services/stripe.js
 create mode 100644 app/templates/developers/payments/index.js
 create mode 100644 app/templates/developers/payments/onboard.js
 create mode 100644 server/migrations/2024_07_16_155000_create_registry_extension_purchases.php
 create mode 100644 server/src/Http/Controllers/Internal/v1/RegistryPaymentsController.php
 create mode 100644 server/src/Models/RegistryExtensionPurchase.php
 create mode 100644 server/src/Support/Utils.php
 create mode 100644 tests/integration/components/modals/confirm-extension-purchase-test.js
 create mode 100644 tests/integration/components/modals/extension-purchase-form-test.js
 create mode 100644 tests/unit/controllers/developers/payments/index-test.js
 create mode 100644 tests/unit/controllers/developers/payments/onboard-test.js
 create mode 100644 tests/unit/routes/developers/payments/index-test.js
 create mode 100644 tests/unit/routes/developers/payments/onboard-test.js
 create mode 100644 tests/unit/services/stripe-test.js

diff --git a/.eslintignore b/.eslintignore
index 9385391..02adf1b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,8 +6,18 @@
 
 # misc
 /coverage/
+/scripts/
 !.*
 .*/
 
 # ember-try
 /.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+#server
+/server
+/server_vendor
diff --git a/.gitignore b/.gitignore
index a944ffb..c840f41 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
 
 # dependencies
 /node_modules/
+/scripts/node_modules/
 
 # misc
 /.env*
@@ -13,7 +14,6 @@
 /npm-debug.log*
 /testem.log
 /yarn-error.log
-/.php-cs-fixer.cache
 
 # ember-try
 /.node_modules.ember-try/
@@ -24,3 +24,16 @@
 
 # broccoli-debug
 /DEBUG/
+
+# server
+.idea/*
+.idea/codeStyleSettings.xml
+composer.lock
+/server_vendor
+/server/vendor/
+.phpunit.result.cache
+.php_cs.cache
+.php-cs-fixer.cache
+*.swp
+*.swo
+.DS_Store
diff --git a/.stylelintignore b/.stylelintignore
index a0cf71c..29348e2 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -6,3 +6,7 @@
 
 # addons
 /.node_modules.ember-try/
+
+# server
+/server/
+/server_vendor/
diff --git a/addon/components/extension-card.hbs b/addon/components/extension-card.hbs
index ddb0c3b..b7ffc79 100644
--- a/addon/components/extension-card.hbs
+++ b/addon/components/extension-card.hbs
@@ -1,4 +1,10 @@
-<button type="button" class="rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm w-40 hover:opacity-50 {{@buttonClass}}" ...attributes {{on "click" this.onClick}}>
+<button
+    type="button"
+    class="rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm w-40 hover:opacity-50 {{@buttonClass}}"
+    ...attributes
+    {{on "click" this.onClick}}
+    {{did-update this.onExtensionUpdated @extension}}
+>
     <div class="flex items-center justify-center rounded-t-lg w-full h-36 {{@iconWrapperClass}}" {{background-url @extension.icon_url overlay=true}}>
         <Image src={{@extension.icon_url}} class="w-full h-36 rounded-t-lg {{@iconClass}}" alt={{@extension.name}} @fallbackSrc={{config "defaultValues.extensionIcon"}} />
     </div>
diff --git a/addon/components/extension-card.js b/addon/components/extension-card.js
index 0243ad4..476dcc5 100644
--- a/addon/components/extension-card.js
+++ b/addon/components/extension-card.js
@@ -3,32 +3,60 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { later } from '@ember/runloop';
+import formatCurrency from '@fleetbase/ember-ui/utils/format-currency';
+import isModel from '@fleetbase/ember-core/utils/is-model';
+
+function removeParamFromCurrentUrl(paramToRemove) {
+    const url = new URL(window.location.href);
+    url.searchParams.delete(paramToRemove);
+    window.history.pushState({ path: url.href }, '', url.href);
+}
+
+function addParamToCurrentUrl(paramName, paramValue) {
+    const url = new URL(window.location.href);
+    url.searchParams.set(paramName, paramValue);
+    window.history.pushState({ path: url.href }, '', url.href);
+}
 
 export default class ExtensionCardComponent extends Component {
     @service modalsManager;
     @service notifications;
     @service currentUser;
     @service socket;
+    @service fetch;
+    @service stripe;
+    @service urlSearchParams;
     @tracked extension;
 
     constructor(owner, { extension }) {
         super(...arguments);
         this.extension = extension;
+        this.checkForCheckoutSession();
     }
 
-    @action onClick() {
+    @action onExtenstionUpdated(el, [extension]) {
+        this.extension = extension;
+    }
+
+    @action onClick(options = {}) {
         const installChannel = `install.${this.currentUser.companyId}.${this.extension.id}`;
+        const isAlreadyPurchased = this.extension.is_purchased === true;
+        const isAlreadyInstalled = this.extension.is_installed === true;
+        const isPaymentRequired = this.extension.payment_required === true && isAlreadyPurchased === false;
 
         if (typeof this.args.onClick === 'function') {
             this.args.onClick(this.extension);
         }
 
+        addParamToCurrentUrl('extension_id', this.extension.id);
         this.modalsManager.show('modals/extension-details', {
             titleComponent: 'extension-modal-title',
             modalClass: 'flb--extension-modal modal-lg',
             modalHeaderClass: 'flb--extension-modal-header',
-            acceptButtonText: 'Install',
-            acceptButtonIcon: 'download',
+            acceptButtonText: isPaymentRequired ? `Purchase for ${formatCurrency(this.extension.price, this.extension.currency)}` : isAlreadyInstalled ? 'Installed' : 'Install',
+            acceptButtonIcon: isPaymentRequired ? 'credit-card' : isAlreadyInstalled ? 'check' : 'download',
+            acceptButtonDisabled: isAlreadyInstalled,
+            acceptButtonScheme: isPaymentRequired ? 'success' : 'primary',
             declineButtonText: 'Done',
             process: null,
             step: null,
@@ -38,6 +66,11 @@ export default class ExtensionCardComponent extends Component {
             confirm: async (modal) => {
                 modal.startLoading();
 
+                // Handle purchase flow
+                if (isPaymentRequired) {
+                    return this.startCheckoutSession();
+                }
+
                 // Listen for install progress
                 this.socket.listen(installChannel, ({ process, step, progress }) => {
                     let stepDescription;
@@ -74,11 +107,129 @@ export default class ExtensionCardComponent extends Component {
                         },
                         1200
                     );
+                    removeParamFromCurrentUrl('extension_id');
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
                 }
             },
+            decline: (modal) => {
+                modal.done();
+                removeParamFromCurrentUrl('extension_id');
+            },
+            ...options,
+        });
+    }
+
+    async startCheckoutSession() {
+        const checkout = await this.stripe.initEmbeddedCheckout({
+            fetchClientSecret: this.fetchClientSecret.bind(this),
         });
+
+        await this.modalsManager.done();
+        later(
+            this,
+            () => {
+                this.modalsManager.show('modals/extension-purchase-form', {
+                    title: `Purchase the '${this.extension.name}' Extension`,
+                    modalClass: 'stripe-extension-purchase',
+                    modalFooterClass: 'hidden-i',
+                    extension: this.extension,
+                    checkoutElementInserted: (el) => {
+                        checkout.mount(el);
+                    },
+                    decline: async (modal) => {
+                        checkout.destroy();
+                        await modal.done();
+                        later(
+                            this,
+                            () => {
+                                this.onClick();
+                            },
+                            100
+                        );
+                    },
+                });
+            },
+            100
+        );
+    }
+
+    async fetchClientSecret() {
+        try {
+            const { clientSecret } = await this.fetch.post(
+                'payments/create-checkout-session',
+                { extension: this.extension.id, uri: window.location.pathname },
+                { namespace: '~registry/v1' }
+            );
+
+            return clientSecret;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    async checkForCheckoutSession() {
+        later(
+            this,
+            async () => {
+                const checkoutSessionId = this.urlSearchParams.get('checkout_session_id');
+                const extensionId = this.urlSearchParams.get('extension_id');
+
+                if (!checkoutSessionId && this.extension.id === extensionId) {
+                    return this.onClick();
+                }
+
+                if (checkoutSessionId && this.extension.id === extensionId) {
+                    this.modalsManager.show('modals/confirm-extension-purchase', {
+                        title: 'Finalizing Purchase',
+                        modalClass: 'finalize-extension-purchase',
+                        loadingMessage: 'Completing purchase do not refresh or exit window...',
+                        modalFooterClass: 'hidden-i',
+                        backdropClose: false,
+                    });
+
+                    try {
+                        const { status, extension } = await this.fetch.post(
+                            'payments/get-checkout-session',
+                            { checkout_session_id: checkoutSessionId, extension: this.extension.id },
+                            { namespace: '~registry/v1' }
+                        );
+
+                        // Update this extension
+                        const extensionModel = this.fetch.jsonToModel(extension, 'registry-extension');
+                        if (isModel(extensionModel)) {
+                            this.extension = extensionModel;
+                        }
+
+                        // Fire a callback
+                        if (typeof this.args.onCheckoutCompleted === 'function') {
+                            this.args.onCheckoutCompleted(this.extension, status);
+                        }
+
+                        if (status === 'complete' || status === 'purchase_complete') {
+                            // remove checkout session id
+                            removeParamFromCurrentUrl('checkout_session_id');
+
+                            // close confirmation dialog and notify payment completed
+                            await this.modalsManager.done();
+                            if (status === 'complete') {
+                                this.notifications.success('Payment Completed.');
+                            }
+                            later(
+                                this,
+                                () => {
+                                    this.onClick();
+                                },
+                                100
+                            );
+                        }
+                    } catch (error) {
+                        this.notifications.serverError(error);
+                    }
+                }
+            },
+            300
+        );
     }
 }
diff --git a/addon/components/modals/confirm-extension-purchase.hbs b/addon/components/modals/confirm-extension-purchase.hbs
new file mode 100644
index 0000000..f2a63c7
--- /dev/null
+++ b/addon/components/modals/confirm-extension-purchase.hbs
@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="pt-4 pb-6 px-4">
+        <Spinner @loadingMessage={{@options.loadingMessage}} @loadingMessageClass="ml-2 text-black dark:text-white" @wrapperClass="flex flex-row items-center" />
+    </div>
+</Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/confirm-extension-purchase.js b/addon/components/modals/confirm-extension-purchase.js
new file mode 100644
index 0000000..74c512a
--- /dev/null
+++ b/addon/components/modals/confirm-extension-purchase.js
@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsConfirmExtensionPurchaseComponent extends Component {}
diff --git a/addon/components/modals/extension-purchase-form.hbs b/addon/components/modals/extension-purchase-form.hbs
new file mode 100644
index 0000000..292e80a
--- /dev/null
+++ b/addon/components/modals/extension-purchase-form.hbs
@@ -0,0 +1,5 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="p-1">
+        <div id="checkout" {{did-insert @options.checkoutElementInserted}}></div>
+    </div>
+</Modal::Default>
\ No newline at end of file
diff --git a/addon/components/modals/extension-purchase-form.js b/addon/components/modals/extension-purchase-form.js
new file mode 100644
index 0000000..170f18d
--- /dev/null
+++ b/addon/components/modals/extension-purchase-form.js
@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class ModalsExtensionPurchaseFormComponent extends Component {}
diff --git a/addon/controllers/developers/extensions/edit.js b/addon/controllers/developers/extensions/edit.js
index 41a2635..f661ace 100644
--- a/addon/controllers/developers/extensions/edit.js
+++ b/addon/controllers/developers/extensions/edit.js
@@ -11,15 +11,17 @@ export default class DevelopersExtensionsEditController extends Controller {
     @service notifications;
     @service intl;
     @tracked isReady = false;
+    @tracked isReadyMessage = null;
 
     @task *save() {
         try {
             yield this.model.save();
+            this.notifications.success('Extension details saved.');
             const isReady = this.validateExtensionForReview();
             if (isReady === true) {
                 this.isReady = isReady;
             } else if (isArray(isReady) && isReady.length) {
-                this.notifications.warning(isReady[0]);
+                this.isReadyMessage = isReady[0];
             }
         } catch (error) {
             this.notifications.warning(error.message);
diff --git a/addon/controllers/developers/payments/index.js b/addon/controllers/developers/payments/index.js
new file mode 100644
index 0000000..44164ad
--- /dev/null
+++ b/addon/controllers/developers/payments/index.js
@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+export default class DevelopersPaymentsIndexController extends Controller {
+    @tracked hasStripeConnectAccount = true;
+}
diff --git a/addon/controllers/developers/payments/onboard.js b/addon/controllers/developers/payments/onboard.js
new file mode 100644
index 0000000..5d0afc7
--- /dev/null
+++ b/addon/controllers/developers/payments/onboard.js
@@ -0,0 +1,67 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { loadConnectAndInitialize } from '@stripe/connect-js';
+import config from '../config/environment';
+
+export default class DevelopersPaymentsOnboardController extends Controller {
+    @service fetch;
+    @service notifications;
+    @tracked connectedAccountId;
+    @tracked onboardInProgress = false;
+    @tracked onboardCompleted = false;
+
+    @task *startOnboard() {
+        try {
+            const { account } = yield this.fetch.post('payments/account', {}, { namespace: '~registry/v1' });
+
+            this.connectedAccountId = account;
+            this.onboardInProgress = true;
+
+            const instance = loadConnectAndInitialize({
+                publishableKey: config.stripe.publishableKey,
+                fetchClientSecret: this.fetchClientSecret.bind(this),
+                appearance: {
+                    overlays: 'dialog',
+                    variables: {
+                        colorPrimary: '#635BFF',
+                    },
+                },
+            });
+
+            const container = this.getTrackedElement('embeddedOnboardingContainer');
+            const embeddedOnboardingComponent = instance.create('account-onboarding');
+            embeddedOnboardingComponent.setOnExit(() => {
+                this.onboardInProgress = false;
+                this.onboardCompleted = true;
+            });
+            container.appendChild(embeddedOnboardingComponent);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    async fetchClientSecret() {
+        try {
+            const { clientSecret } = await this.fetch.post('payments/account-session', { account: this.connectedAccountId }, { namespace: '~registry/v1' });
+
+            return clientSecret;
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    @action createTrackedElement(name, el) {
+        this[name] = el;
+    }
+
+    getTrackedElement(name) {
+        if (this[name] instanceof HTMLElement) {
+            return this[name];
+        }
+
+        return null;
+    }
+}
diff --git a/addon/models/registry-extension.js b/addon/models/registry-extension.js
index 2ece050..71a9dca 100644
--- a/addon/models/registry-extension.js
+++ b/addon/models/registry-extension.js
@@ -62,6 +62,8 @@ export default class RegistryExtensionModel extends Model {
     @attr('array') languages;
     @attr('object') meta;
     @attr('boolean') core_service;
+    @attr('boolean') is_purchased;
+    @attr('boolean') is_installed;
     @attr('string', { defaultValue: 'pending' }) status;
 
     /** @dates */
diff --git a/addon/routes.js b/addon/routes.js
index 1aa901b..4e0ea42 100644
--- a/addon/routes.js
+++ b/addon/routes.js
@@ -14,7 +14,10 @@ export default buildRoutes(function () {
             });
         });
         this.route('analytics');
-        this.route('payments');
+        this.route('payments', function () {
+            this.route('index', { path: '/' });
+            this.route('onboard');
+        });
         this.route('credentials');
     });
     this.route('explore', { path: '/' }, function () {
diff --git a/addon/routes/developers/payments/index.js b/addon/routes/developers/payments/index.js
new file mode 100644
index 0000000..54b8689
--- /dev/null
+++ b/addon/routes/developers/payments/index.js
@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class DevelopersPaymentsIndexRoute extends Route {
+    @service fetch;
+
+    async setupController(controller) {
+        try {
+            const { hasStripeConnectAccount } = await this.fetch.get('payments/has-stripe-connect-account', {}, { namespace: '~registry/v1' });
+            controller.hasStripeConnectAccount = hasStripeConnectAccount;
+        } catch (error) {
+            controller.hasStripeConnectAccount = false;
+        }
+    }
+}
diff --git a/addon/routes/developers/payments/onboard.js b/addon/routes/developers/payments/onboard.js
new file mode 100644
index 0000000..1451cf7
--- /dev/null
+++ b/addon/routes/developers/payments/onboard.js
@@ -0,0 +1,21 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class DevelopersPaymentsOnboardRoute extends Route {
+    @service fetch;
+    @service hostRouter;
+    @service notifications;
+
+    async beforeModel() {
+        try {
+            const { hasStripeConnectAccount } = await this.fetch.get('payments/has-stripe-connect-account', {}, { namespace: '~registry/v1' });
+            if (hasStripeConnectAccount) {
+                this.notifications.info('Your account is already enabled to accept payments.');
+                this.hostRouter.transitionTo('console.extensions.payments');
+            }
+        } catch (error) {
+            this.notifications.serverError(error);
+            this.hostRouter.transitionTo('console.extensions.payments');
+        }
+    }
+}
diff --git a/addon/services/stripe.js b/addon/services/stripe.js
new file mode 100644
index 0000000..ba161b0
--- /dev/null
+++ b/addon/services/stripe.js
@@ -0,0 +1,83 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { later } from '@ember/runloop';
+import config from '../config/environment';
+
+const STRIPE_JS_INITIALIZE_DELAY_MS = 900;
+export default class StripeService extends Service {
+    @tracked stripe;
+    @tracked loaded = false;
+
+    constructor() {
+        super(...arguments);
+        this.loadAndInitialize();
+    }
+
+    async initEmbeddedCheckout() {
+        if (!this.stripe) {
+            await this.loadAndInitialize();
+        }
+
+        if (typeof this.stripe.initEmbeddedCheckout === 'function') {
+            return this.stripe.initEmbeddedCheckout(...arguments);
+        }
+
+        throw new Error('Stripe not initialized!');
+    }
+
+    getInstance() {
+        return this.stripe;
+    }
+
+    createStripeInstance(options = {}) {
+        this.stripe = Stripe(config.stripe.publishableKey, options);
+        return this.stripe;
+    }
+
+    async loadAndInitialize() {
+        return new Promise((resolve) => {
+            this.load(() => {
+                resolve(this.createStripeInstance());
+            });
+        });
+    }
+
+    load(callback = null) {
+        const stripeJs = document.querySelector('script[data-stripe-js="loaded"]');
+        if (stripeJs) {
+            later(
+                this,
+                () => {
+                    if (typeof callback === 'function') {
+                        callback();
+                    }
+                },
+                STRIPE_JS_INITIALIZE_DELAY_MS
+            );
+            return;
+        }
+
+        // Create a new script element
+        const script = document.createElement('script');
+        script.src = 'https://js.stripe.com/v3/';
+        script.async = true;
+
+        // Use a data attribute to mark that the script is loaded
+        script.setAttribute('data-stripe-js', 'loaded');
+        script.onload = () => {
+            this.loaded = true;
+            later(
+                this,
+                () => {
+                    if (typeof callback === 'function') {
+                        callback();
+                    }
+                },
+                STRIPE_JS_INITIALIZE_DELAY_MS
+            );
+        };
+
+        // Append the script to the document's head
+        document.head.appendChild(script);
+    }
+}
diff --git a/addon/styles/registry-bridge-engine.css b/addon/styles/registry-bridge-engine.css
index 4d54a74..5c35682 100644
--- a/addon/styles/registry-bridge-engine.css
+++ b/addon/styles/registry-bridge-engine.css
@@ -62,3 +62,28 @@ body[data-theme='dark'] .flb--extension-screenshot {
         0 10px 15px -3px rgb(0 0 0 / 10%),
         0 4px 6px -4px rgb(0 0 0 / 10%);
 }
+
+body[data-theme='dark'] .flb--modal.flb--default-modal.finalize-extension-purchase,
+body[data-theme='light'] .flb--modal.flb--default-modal.finalize-extension-purchase,
+.flb--modal.flb--default-modal.finalize-extension-purchase {
+    pointer-events: none !important;
+}
+
+.flb--modal.flb--default-modal.finalize-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header button.close,
+body[data-theme='dark'] .flb--modal.flb--default-modal.finalize-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header button.close,
+body[data-theme='light'] .flb--modal.flb--default-modal.finalize-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header button.close {
+    display: none !important;
+    pointer-events: none;
+}
+
+.flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content,
+body[data-theme='dark'] .flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content,
+body[data-theme='light'] .flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content {
+    background-color: #fff;
+}
+
+.flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header,
+body[data-theme='dark'] .flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header,
+body[data-theme='light'] .flb--modal.flb--default-modal.stripe-extension-purchase > .flb--modal-dialog > .flb--modal-content > .flb--modal-header {
+    display: none !important;
+}
diff --git a/addon/templates/application.hbs b/addon/templates/application.hbs
index 7d56550..f28f2a5 100644
--- a/addon/templates/application.hbs
+++ b/addon/templates/application.hbs
@@ -16,7 +16,6 @@
         <Layout::Sidebar::Item @route="console.extensions.developers.extensions" @icon="box-archive">Extensions</Layout::Sidebar::Item>
         <Layout::Sidebar::Item @route="console.extensions.developers.analytics" @icon="chart-simple">Analytics</Layout::Sidebar::Item>
         <Layout::Sidebar::Item @route="console.extensions.developers.payments" @icon="cash-register">Payments</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.extensions.developers.credentials" @icon="key">Credentials</Layout::Sidebar::Item>
     </Layout::Sidebar::Panel>
     <Spacer @height="200px" />
 </EmberWormhole>
diff --git a/addon/templates/developers/extensions/edit.hbs b/addon/templates/developers/extensions/edit.hbs
index 1da3168..da81f30 100644
--- a/addon/templates/developers/extensions/edit.hbs
+++ b/addon/templates/developers/extensions/edit.hbs
@@ -9,6 +9,7 @@
         @size="sm"
         @icon="paper-plane"
         @text={{t "registry-bridge.developers.extensions.extension-form.submit-for-review"}}
+        @helpText={{this.isReadyMessage}}
         @onClick={{this.submitForReview}}
         @disabled={{not this.isReady}}
         @isLoading={{not this.startReview.isIdle}}
diff --git a/addon/templates/developers/payments/index.hbs b/addon/templates/developers/payments/index.hbs
new file mode 100644
index 0000000..2a3ffa5
--- /dev/null
+++ b/addon/templates/developers/payments/index.hbs
@@ -0,0 +1,17 @@
+<Layout::Section::Header @title="Payments" />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    {{#unless this.hasStripeConnectAccount}}
+        <div class="container">
+            <div class="max-w-3xl mx-auto mt-4">
+                <div class="content">
+                    <div class="flex flex-col items-center justify-center">
+                        <h1 class="text-lg font-semibold mb-1">Your account is not setup to accept payments yet.</h1>
+                        <p class="text-sm mb-2">To accept payments for extensions, you must complete the onboard process via Stripe.</p>
+                        <Button @type="primary" @size="lg" @text="Start payments onboard" @onClick={{transition-to "developers.payments.onboard"}} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{/unless}}
+</Layout::Section::Body>
\ No newline at end of file
diff --git a/addon/templates/developers/payments/onboard.hbs b/addon/templates/developers/payments/onboard.hbs
new file mode 100644
index 0000000..7ba4497
--- /dev/null
+++ b/addon/templates/developers/payments/onboard.hbs
@@ -0,0 +1,48 @@
+<Layout::Section::Header @title="Payments Onboard" />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="container">
+        <div class="max-w-3xl mx-auto mt-4">
+            <div class="content">
+                <div class="onboard-header">
+                    <h2 id="title" class="text-base font-semibold mb-1 {{if this.onboardCompleted 'text-green-700'}}">
+                        {{#if this.onboardCompleted}}
+                            <FaIcon @icon="check" @size="sm" class="text-green-700" />
+                            Onboarding was completed successfully!
+                        {{else}}
+                            Complete this onboard process to accept payments via Fleetbase.
+                        {{/if}}
+                    </h2>
+                    <p id="subtitle" class="text-sm mb-2">
+                        {{#if this.onboardCompleted}}
+                            Your onboard was successful and you're now able to sell and receive payments for published extensions.
+                        {{else}}
+                            Extension authors who wish to receive payments for their published extensions must complete this onboarding.
+                        {{/if}}
+                    </p>
+                    <div class="flex mb-2">
+                        {{#if this.onboardCompleted}}
+                            <Button @icon="check" @type="primary" @size="lg" @text="Continue" @onClick={{transition-to "developers.payments"}} @disabled={{this.onboardInProgress}} />
+                        {{else}}
+                            <Button
+                                @icon="play"
+                                @type="default"
+                                @size="lg"
+                                @text={{if this.onboardInProgress "Onboard in progress" "Start onboard now"}}
+                                @onClick={{perform this.startOnboard}}
+                                @isLoading={{this.startOnboard.isRunning}}
+                                @disabled={{this.onboardInProgress}}
+                            />
+                        {{/if}}
+                    </div>
+                </div>
+                <div
+                    id="embedded-onboarding-container"
+                    class="min-h-20 bg-gray-50 dark:bg-gray-100 shadow-md rounded-lg border border-gray-300 dark:border-gray-900 {{unless this.onboardInProgress 'hidden'}}"
+                    {{did-insert (fn this.createTrackedElement "embeddedOnboardingContainer")}}
+                >
+                </div>
+            </div>
+        </div>
+    </div>
+</Layout::Section::Body>
\ No newline at end of file
diff --git a/app/components/modals/confirm-extension-purchase.js b/app/components/modals/confirm-extension-purchase.js
new file mode 100644
index 0000000..aca0879
--- /dev/null
+++ b/app/components/modals/confirm-extension-purchase.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/registry-bridge-engine/components/modals/confirm-extension-purchase';
diff --git a/app/components/modals/extension-purchase-form.js b/app/components/modals/extension-purchase-form.js
new file mode 100644
index 0000000..3464101
--- /dev/null
+++ b/app/components/modals/extension-purchase-form.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/registry-bridge-engine/components/modals/extension-purchase-form';
diff --git a/app/controllers/developers/payments/index.js b/app/controllers/developers/payments/index.js
new file mode 100644
index 0000000..2da37a7
--- /dev/null
+++ b/app/controllers/developers/payments/index.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/registry-bridge-engine/controllers/developers/payments/index';
diff --git a/app/controllers/developers/payments/onboard.js b/app/controllers/developers/payments/onboard.js
new file mode 100644
index 0000000..aa899fa
--- /dev/null
+++ b/app/controllers/developers/payments/onboard.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/registry-bridge-engine/controllers/developers/payments/onboard';
diff --git a/app/routes/developers/payments/index.js b/app/routes/developers/payments/index.js
new file mode 100644
index 0000000..20238ea
--- /dev/null
+++ b/app/routes/developers/payments/index.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/registry-bridge-engine/routes/developers/payments/index';
diff --git a/app/routes/developers/payments/onboard.js b/app/routes/developers/payments/onboard.js
new file mode 100644
index 0000000..d1fc30a
--- /dev/null
+++ b/app/routes/developers/payments/onboard.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/registry-bridge-engine/routes/developers/payments/onboard';
diff --git a/app/services/stripe.js b/app/services/stripe.js
new file mode 100644
index 0000000..071f306
--- /dev/null
+++ b/app/services/stripe.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/registry-bridge-engine/services/stripe';
diff --git a/app/templates/developers/payments/index.js b/app/templates/developers/payments/index.js
new file mode 100644
index 0000000..2c26320
--- /dev/null
+++ b/app/templates/developers/payments/index.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/registry-bridge-engine/templates/developers/payments/index';
diff --git a/app/templates/developers/payments/onboard.js b/app/templates/developers/payments/onboard.js
new file mode 100644
index 0000000..36b4102
--- /dev/null
+++ b/app/templates/developers/payments/onboard.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/registry-bridge-engine/templates/developers/payments/onboard';
diff --git a/composer.json b/composer.json
index 4e1b173..fd0a5f9 100644
--- a/composer.json
+++ b/composer.json
@@ -21,8 +21,10 @@
     "require": {
         "php": "^8.0",
         "fleetbase/core-api": "^1.4.27",
+        "laravel/cashier": "^15.2.1",
         "php-http/guzzle7-adapter": "^1.0",
-        "psr/http-factory-implementation": "*"
+        "psr/http-factory-implementation": "*",
+        "stripe/stripe-php": "^13.0"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.34.1",
diff --git a/config/environment.js b/config/environment.js
index 4c07381..68951f9 100644
--- a/config/environment.js
+++ b/config/environment.js
@@ -1,11 +1,18 @@
 'use strict';
 const { name, fleetbase } = require('../package');
 
+function getenv(variable, defaultValue = null) {
+    return process.env[variable] !== undefined ? process.env[variable] : defaultValue;
+}
+
 module.exports = function (environment) {
     let ENV = {
         modulePrefix: name,
         environment,
         mountedEngineRoutePrefix: getMountedEngineRoutePrefix(),
+        stripe: {
+            publishableKey: getenv('STRIPE_KEY'),
+        },
     };
 
     return ENV;
diff --git a/package.json b/package.json
index 7490abb..c2364ac 100644
--- a/package.json
+++ b/package.json
@@ -38,12 +38,14 @@
         "publish:github": "npm config set '@fleetbase:registry' https://npm.pkg.github.com/ && npm publish --access restricted"
     },
     "dependencies": {
+        "@babel/core": "^7.23.2",
         "@fleetbase/ember-core": "^0.2.12",
         "@fleetbase/ember-ui": "^0.2.18",
-        "@babel/core": "^7.23.2",
         "@fortawesome/ember-fontawesome": "^0.4.1",
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
+        "@stripe/connect-js": "^3.3.10",
+        "ember-auto-import": "^2.6.3",
         "ember-cli-babel": "^8.2.0",
         "ember-cli-htmlbars": "^6.3.0",
         "ember-intl": "6.3.2",
@@ -62,7 +64,6 @@
         "broccoli-asset-rev": "^3.0.0",
         "broccoli-funnel": "^3.0.8",
         "concurrently": "^8.2.2",
-        "ember-auto-import": "^2.6.3",
         "ember-cli": "~5.4.1",
         "ember-cli-clean-css": "^3.0.0",
         "ember-cli-dependency-checker": "^3.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7977de2..0b16078 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,12 @@ dependencies:
   '@fortawesome/free-solid-svg-icons':
     specifier: ^6.5.2
     version: 6.5.2
+  '@stripe/connect-js':
+    specifier: ^3.3.10
+    version: 3.3.10
+  ember-auto-import:
+    specifier: ^2.6.3
+    version: 2.6.3(webpack@5.89.0)
   ember-cli-babel:
     specifier: ^8.2.0
     version: 8.2.0(@babel/core@7.23.2)
@@ -69,9 +75,6 @@ devDependencies:
   concurrently:
     specifier: ^8.2.2
     version: 8.2.2
-  ember-auto-import:
-    specifier: ^2.6.3
-    version: 2.6.3(webpack@5.89.0)
   ember-cli:
     specifier: ~5.4.1
     version: 5.4.1
@@ -3366,6 +3369,10 @@ packages:
     resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
     dev: true
 
+  /@stripe/connect-js@3.3.10:
+    resolution: {integrity: sha512-x/z7BUnJXuUq0eLLzfL7NusxnsEYcGGzS46JTXwmdcFS9xYCWJJTI+9kgEROfXaZuD2RVOUw6RIu/l8YvsEijw==}
+    dev: false
+
   /@szmarczak/http-timer@1.1.2:
     resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==}
     engines: {node: '>=6'}
diff --git a/server/config/registry-bridge.php b/server/config/registry-bridge.php
index f09eb2d..525d687 100644
--- a/server/config/registry-bridge.php
+++ b/server/config/registry-bridge.php
@@ -17,7 +17,13 @@
         'host' => env('REGISTRY_HOST', 'https://registry.fleetbase.io'),
         'token' => env('REGISTRY_TOKEN', env('REGISTRY_AUTH_TOKEN'))
     ],
+    'stripe' => [
+        'key' => env('STRIPE_KEY', env('STRIPE_API_KEY')),
+        'secret' => env('STRIPE_SECRET', env('STRIPE_API_SECRET')),
+        'webhook_secret' => env('STRIPE_WEBHOOK_SECRET'),
+    ],
     'extensions' => [
         'preinstalled' => env('PREINSTALLED_EXTENSIONS', false)
-    ]
+    ],
+    'facilitator_fee' => env('REGISTRY_FACILITATOR_FEE', 10)
 ];
diff --git a/server/migrations/2024_03_21_051614_create_registry_extensions_table.php b/server/migrations/2024_03_21_051614_create_registry_extensions_table.php
index 87e68ec..c4bfa6c 100644
--- a/server/migrations/2024_03_21_051614_create_registry_extensions_table.php
+++ b/server/migrations/2024_03_21_051614_create_registry_extensions_table.php
@@ -22,6 +22,7 @@ public function up(): void
             $table->uuid('icon_uuid')->nullable();
             $table->uuid('category_uuid')->nullable();
             $table->string('public_id')->nullable()->index();
+            $table->string('stripe_product_id')->nullable();
             $table->string('name');
             $table->string('subtitle')->nullable();
             $table->boolean('payment_required')->default(0);
diff --git a/server/migrations/2024_07_16_155000_create_registry_extension_purchases.php b/server/migrations/2024_07_16_155000_create_registry_extension_purchases.php
new file mode 100644
index 0000000..1bfb32f
--- /dev/null
+++ b/server/migrations/2024_07_16_155000_create_registry_extension_purchases.php
@@ -0,0 +1,41 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('registry_extension_purchases', function (Blueprint $table) {
+            $table->increments('id');
+            $table->uuid('uuid')->index(); 
+            $table->uuid('company_uuid'); 
+            $table->uuid('extension_uuid'); 
+            $table->string('stripe_checkout_session_id')->nullable();
+            $table->string('stripe_payment_intent_id')->nullable();
+            $table->boolean('is_subcription')->default(0); 
+            $table->integer('locked_price')->nullable();
+            $table->string('subscription_billing_period')->nullable();
+            $table->string('subscription_model')->nullable(); // flat_rate, usage, tiered
+            $table->json('meta')->nullable();
+            $table->timestamps();
+            $table->softDeletes();
+
+            $table->foreign('company_uuid')->references('uuid')->on('companies')->onDelete('cascade');
+            $table->foreign('extension_uuid')->references('uuid')->on('registry_extensions')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('registry_extension_purchases');
+    }
+};
diff --git a/server/src/Http/Controllers/Internal/v1/RegistryPaymentsController.php b/server/src/Http/Controllers/Internal/v1/RegistryPaymentsController.php
new file mode 100644
index 0000000..91bfa41
--- /dev/null
+++ b/server/src/Http/Controllers/Internal/v1/RegistryPaymentsController.php
@@ -0,0 +1,197 @@
+<?php
+
+namespace Fleetbase\RegistryBridge\Http\Controllers\Internal\v1;
+
+use Fleetbase\Http\Controllers\Controller;
+use Fleetbase\RegistryBridge\Models\RegistryExtension;
+use Fleetbase\RegistryBridge\Models\RegistryExtensionPurchase;
+use Fleetbase\RegistryBridge\Support\Utils;
+use Fleetbase\Support\Auth;
+use Illuminate\Http\Request;
+use Illuminate\Support\Str;
+
+/**
+ * Handles payment processing and Stripe account management for registry extensions.
+ *
+ * This controller provides functionalities such as checking if a company has a Stripe Connect account,
+ * creating Stripe accounts, managing Stripe account sessions, and handling Stripe Checkout sessions.
+ */
+class RegistryPaymentsController extends Controller
+{
+    /**
+     * Checks if the currently authenticated company has an associated Stripe Connect account.
+     *
+     * This method verifies if the authenticated company has a Stripe Connect ID that starts with 'acct_'.
+     *
+     * @return \Illuminate\Http\JsonResponse returns a JSON response indicating the presence of a Stripe Connect account
+     */
+    public function hasStripeConnectAccount()
+    {
+        $company = Auth::getCompany();
+        if ($company) {
+            return response()->json([
+                'hasStripeConnectAccount' => !empty($company->stripe_connect_id) && Str::startsWith($company->stripe_connect_id, 'acct_'),
+            ]);
+        }
+
+        return response()->json([
+            'hasStripeConnectAccount' => false,
+        ]);
+    }
+
+    /**
+     * Creates a new Stripe account for the currently authenticated company and stores the account ID.
+     *
+     * This method utilizes the Fleetbase utility class to create a Stripe Express account and saves the
+     * Stripe account ID to the current company's profile. In case of failure, it returns an error.
+     *
+     * @return \Illuminate\Http\JsonResponse returns the Stripe account ID or an error message in JSON format
+     */
+    public function getStripeAccount()
+    {
+        $stripe = Utils::getStripeClient();
+
+        try {
+            $account = $stripe->accounts->create([
+                'controller' => [
+                    'stripe_dashboard' => [
+                        'type' => 'express',
+                    ],
+                    'fees' => [
+                        'payer' => 'application',
+                    ],
+                    'losses' => [
+                        'payments' => 'application',
+                    ],
+                ],
+            ]);
+
+            // Save account ID to current company session
+            $company = Auth::getCompany();
+            if ($company) {
+                $company->update(['stripe_connect_id' => $account->id]);
+            }
+
+            return response()->json(['account' => $account->id]);
+        } catch (\Exception $e) {
+            return response()->error($e->getMessage());
+        }
+    }
+
+    /**
+     * Creates a Stripe account session for account onboarding or management.
+     *
+     * This method creates a session for the current company's Stripe account, allowing for onboarding or management activities.
+     * It accepts an 'account' parameter from the request, defaulting to the company's stored Stripe Connect ID if not provided.
+     *
+     * @param Request $request the incoming HTTP request containing optional 'account' parameter
+     *
+     * @return \Illuminate\Http\JsonResponse returns a JSON response with the session's client secret or an error message
+     */
+    public function getStripeAccountSession(Request $request)
+    {
+        $stripe  = Utils::getStripeClient();
+        $company = Auth::getCompany();
+
+        try {
+            $accountSession = $stripe->accountSessions->create([
+                'account'    => $request->input('account', $company->stripe_connect_id),
+                'components' => [
+                    'account_onboarding' => [
+                        'enabled' => true,
+                    ],
+                ],
+            ]);
+
+            return response()->json([
+                'clientSecret' => $accountSession->client_secret,
+            ]);
+        } catch (\Exception $e) {
+            return response()->error($e->getMessage());
+        }
+    }
+
+    /**
+     * Creates a Stripe Checkout session for a specified registry extension.
+     *
+     * This method initializes a checkout session for purchasing a registry extension identified by a UUID.
+     * It requires a 'uri' for redirection after the checkout and an 'extension' UUID to identify the product.
+     *
+     * @param Request $request the incoming HTTP request with 'uri' and 'extension' parameters
+     *
+     * @return \Illuminate\Http\JsonResponse returns the checkout session's client secret or an error message
+     */
+    public function createStripeCheckoutSession(Request $request)
+    {
+        $redirectUri       = $request->input('uri');
+        $extension         = RegistryExtension::where('uuid', $request->input('extension'))->first();
+        if (!$extension) {
+            return response()->error('The extension you attempted to purchase does not exist.');
+        }
+
+        try {
+            $checkoutSession = $extension->createStripeCheckoutSession($redirectUri);
+        } catch (\Throwable $e) {
+            return response()->error($e->getMessage());
+        }
+
+        return response()->json(['clientSecret' => $checkoutSession->client_secret]);
+    }
+
+    /**
+     * Retrieves the status of an ongoing Stripe Checkout session.
+     *
+     * This method checks the status of a Stripe Checkout session associated with a registry extension purchase.
+     * It ensures the extension exists and checks if it has already been purchased. It then retrieves and returns
+     * the checkout session status or creates a purchase record if the session is complete.
+     *
+     * @param Request $request the incoming HTTP request containing 'extension' and 'checkout_session_id'
+     *
+     * @return \Illuminate\Http\JsonResponse returns the checkout session status or an error message
+     */
+    public function getStripeCheckoutSessionStatus(Request $request)
+    {
+        $extension = RegistryExtension::where('uuid', $request->input('extension'))->first();
+        if (!$extension) {
+            return response()->error('The extension you attempted to purchase does not exist.');
+        }
+
+        // Flush cache for extension
+        if (method_exists($extension, 'flushCache')) {
+            $extension->flushCache();
+        }
+
+        // Check if already purchased
+        $purchaseRecordExists = RegistryExtensionPurchase::where(['company_uuid' => session('company'), 'extension_uuid' => $extension->uuid])->exists();
+        if ($purchaseRecordExists) {
+            return response()->json(['status' => 'purchase_complete', 'extension' => $extension]);
+        }
+
+        $stripe          = Utils::getStripeClient();
+        try {
+            $session = $stripe->checkout->sessions->retrieve($request->input('checkout_session_id'));
+            if (isset($session->status) && $session->status === 'complete') {
+                RegistryExtensionPurchase::firstOrCreate(
+                    [
+                        'company_uuid'   => session('company'),
+                        'extension_uuid' => $extension->uuid,
+                    ],
+                    [
+                        'stripe_checkout_session_id' => $session->id,
+                        'stripe_payment_intent_id'   => $session->payment_intent,
+                        'locked_price'               => $session->amount_total,
+                    ]
+                );
+            }
+
+            // Flush cache for extension
+            if (method_exists($extension, 'flushCache')) {
+                $extension->flushCache();
+            }
+
+            return response()->json(['status' => $session->status, 'extension' => $extension]);
+        } catch (\Error $e) {
+            return response()->error($e->getMessage());
+        }
+    }
+}
diff --git a/server/src/Models/RegistryExtension.php b/server/src/Models/RegistryExtension.php
index cf3a765..2202642 100644
--- a/server/src/Models/RegistryExtension.php
+++ b/server/src/Models/RegistryExtension.php
@@ -9,6 +9,8 @@
 use Fleetbase\Models\File;
 use Fleetbase\Models\Model;
 use Fleetbase\Models\User;
+use Fleetbase\RegistryBridge\Support\Utils;
+use Fleetbase\Support\Utils as SupportUtils;
 use Fleetbase\Traits\HasApiModelBehavior;
 use Fleetbase\Traits\HasMetaAttributes;
 use Fleetbase\Traits\HasPublicId;
@@ -53,6 +55,7 @@ class RegistryExtension extends Model
         'next_bundle_uuid',
         'icon_uuid',
         'public_id',
+        'stripe_product_id',
         'name',
         'subtitle',
         'payment_required',
@@ -116,6 +119,8 @@ class RegistryExtension extends Model
         'next_bundle_public_id',
         'category_name',
         'publisher_name',
+        'is_purchased',
+        'is_installed',
     ];
 
     /**
@@ -144,6 +149,24 @@ class RegistryExtension extends Model
      */
     protected $searchableColumns = ['name'];
 
+    /**
+     * The "booting" method of the model.
+     *
+     * This method is called on the model boot and sets up
+     * event listeners, such as creating a unique bundle ID
+     * when a new model instance is being created.
+     */
+    protected static function boot()
+    {
+        parent::boot();
+
+        static::saving(function ($model) {
+            if ($model->isDirty('price')) {
+                $model->updateOrCreateStripePrice();
+            }
+        });
+    }
+
     /**
      * Get the options for generating the slug.
      */
@@ -223,7 +246,7 @@ public function screenshots()
      */
     public function bundles()
     {
-        return $this->hasMany(RegistryExtensionBundle::class, 'extension+uuid', 'uuid');
+        return $this->hasMany(RegistryExtensionBundle::class, 'extension_uuid', 'uuid');
     }
 
     /**
@@ -242,12 +265,38 @@ public function installs()
         return $this->hasMany(RegistryExtensionInstall::class, 'extension_uuid', 'uuid');
     }
 
+    /**
+     * @return \Illuminate\Database\Eloquent\Relations\HasMany
+     */
+    public function purchases()
+    {
+        return $this->hasMany(RegistryExtensionPurchase::class, 'extension_uuid', 'uuid');
+    }
+
+    /**
+     * Check if current session has purchased extension.
+     */
+    public function getIsPurchasedAttribute(): bool
+    {
+        return $this->purchases->contains(function ($purchase) {
+            return $purchase->company_uuid === session('company');
+        });
+    }
+
+    /**
+     * Check if current session has installed extension.
+     */
+    public function getIsInstalledAttribute(): bool
+    {
+        return $this->installs->contains(function ($purchase) {
+            return $purchase->company_uuid === session('company');
+        });
+    }
+
     /**
      * Get avatar URL attribute.
-     *
-     * @return string
      */
-    public function getIconUrlAttribute()
+    public function getIconUrlAttribute(): ?string
     {
         if ($this->icon instanceof File) {
             return $this->icon->url;
@@ -258,10 +307,8 @@ public function getIconUrlAttribute()
 
     /**
      * Get the current bundle public ID.
-     *
-     * @return string
      */
-    public function getCurrentBundlePublicIdAttribute()
+    public function getCurrentBundlePublicIdAttribute(): ?string
     {
         if ($this->currentBundle instanceof RegistryExtensionBundle) {
             return $this->currentBundle->public_id;
@@ -272,10 +319,8 @@ public function getCurrentBundlePublicIdAttribute()
 
     /**
      * Get the current bundle ID.
-     *
-     * @return string
      */
-    public function getCurrentBundleIdAttribute()
+    public function getCurrentBundleIdAttribute(): ?string
     {
         if ($this->currentBundle instanceof RegistryExtensionBundle) {
             return $this->currentBundle->bundle_id;
@@ -286,10 +331,8 @@ public function getCurrentBundleIdAttribute()
 
     /**
      * Get the current bundle original filename.
-     *
-     * @return string
      */
-    public function getCurrentBundleFilenameAttribute()
+    public function getCurrentBundleFilenameAttribute(): ?string
     {
         if ($this->currentBundle instanceof RegistryExtensionBundle) {
             return $this->currentBundle->bundle_filename;
@@ -300,10 +343,8 @@ public function getCurrentBundleFilenameAttribute()
 
     /**
      * Get the next bundle public ID.
-     *
-     * @return string
      */
-    public function getNextBundlePublicIdAttribute()
+    public function getNextBundlePublicIdAttribute(): ?string
     {
         if ($this->nextBundle instanceof RegistryExtensionBundle) {
             return $this->nextBundle->public_id;
@@ -314,10 +355,8 @@ public function getNextBundlePublicIdAttribute()
 
     /**
      * Get the next bundle ID.
-     *
-     * @return string
      */
-    public function getNextBundleIdAttribute()
+    public function getNextBundleIdAttribute(): ?string
     {
         if ($this->nextBundle instanceof RegistryExtensionBundle) {
             return $this->nextBundle->bundle_id;
@@ -328,10 +367,8 @@ public function getNextBundleIdAttribute()
 
     /**
      * Get the current bundle original filename.
-     *
-     * @return string
      */
-    public function getNextBundleFilenameAttribute()
+    public function getNextBundleFilenameAttribute(): ?string
     {
         if ($this->nextBundle instanceof RegistryExtensionBundle) {
             return $this->nextBundle->bundle_filename;
@@ -342,10 +379,8 @@ public function getNextBundleFilenameAttribute()
 
     /**
      * Get the extension's category.
-     *
-     * @return string
      */
-    public function getCategoryNameAttribute()
+    public function getCategoryNameAttribute(): ?string
     {
         if ($this->category instanceof Category) {
             return $this->category->name;
@@ -356,10 +391,8 @@ public function getCategoryNameAttribute()
 
     /**
      * Get the extension's category.
-     *
-     * @return string
      */
-    public function getPublisherNameAttribute()
+    public function getPublisherNameAttribute(): ?string
     {
         if ($this->company instanceof Company) {
             return $this->company->name;
@@ -488,4 +521,136 @@ public static function isExtensionReadyForSubmission($extensionId): bool
 
         return true;
     }
+
+    /**
+     * Retrieves or creates a Stripe product associated with this model instance.
+     *
+     * This method attempts to fetch a Stripe product based on an existing 'stripe_product_id'.
+     * If no product is found or if 'stripe_product_id' is not set, it creates a new Stripe product
+     * with the current model's name and description and updates the model's 'stripe_product_id'.
+     *
+     * @return \Stripe\Product|null returns the Stripe Product object if successful, or null if the Stripe client is not available
+     */
+    public function getStripeProduct(): ?\Stripe\Product
+    {
+        $stripe = Utils::getStripeClient();
+        if ($stripe) {
+            $product = $this->stripe_product_id ? $stripe->products->retrieve($this->stripe_product_id, []) : null;
+            if (!$product) {
+                $product = $stripe->products->create(['name' => $this->name, 'description' => $this->description, 'metadata' => ['fleetbase_id' => $this->public_id]]);
+            }
+
+            // Update stripe product id
+            $this->update(['stripe_product_id' => $product->id]);
+
+            return $product;
+        }
+
+        return null;
+    }
+
+    /**
+     * Retrieves the active Stripe price for the associated product.
+     *
+     * This method first ensures the product exists in Stripe by calling getStripeProduct().
+     * It then fetches the current active price for the product. If no active prices are found,
+     * it returns null.
+     *
+     * @return \Stripe\Price|null returns the Stripe Price object if available, or null otherwise
+     */
+    public function getStripePrice(): ?\Stripe\Price
+    {
+        if (!$this->stripe_product_id) {
+            $this->getStripeProduct();
+        }
+
+        $stripe = Utils::getStripeClient();
+        $price  = null;
+        if ($stripe) {
+            $prices = $stripe->prices->all(['product' => $this->stripe_product_id, 'limit' => 1, 'active' => true]);
+            $price  = is_array($prices->data) && count($prices->data) ? $prices->data[0] : null;
+        }
+
+        return $price;
+    }
+
+    /**
+     * Updates the existing active Stripe price to inactive and creates a new Stripe price.
+     *
+     * This method first retrieves the current active price and deactivates it if it exists.
+     * It then creates a new price with the current model's price and currency, associated with
+     * the Stripe product.
+     *
+     * @return \Stripe\Price|null returns the newly created Stripe Price object
+     */
+    public function updateOrCreateStripePrice(): ?\Stripe\Price
+    {
+        $stripe = Utils::getStripeClient();
+        $price  = $this->getStripePrice();
+        if ($price instanceof \Stripe\Price) {
+            // update stripe price
+            $stripe->prices->update($price->id, ['active' => false]);
+        }
+
+        // create new stripe price
+        $price = $stripe->prices->create(['unit_amount' => $this->price, 'currency' => $this->currency, 'product' => $this->stripe_product_id]);
+
+        return $price;
+    }
+
+    /**
+     * Creates a Stripe Checkout session for purchasing this model's associated product.
+     *
+     * This method ensures that the model has a valid company (extension author) and an active price.
+     * It calculates the facilitator fee based on the total amount and creates a checkout session with
+     * the necessary Stripe configurations, including the return URI with query parameters.
+     *
+     * @param string $returnUri the URI to which the user should be returned after the checkout process
+     *
+     * @return \Stripe\Checkout\Session returns the Stripe Checkout Session object
+     *
+     * @throws \Exception throws an exception if the model does not have an associated company or price
+     */
+    public function createStripeCheckoutSession(string $returnUri): \Stripe\Checkout\Session
+    {
+        // Get extension author
+        $extensionAuthor = $this->company;
+        if (!$extensionAuthor) {
+            throw new \Exception('The extension you attempted to purchase is not available for purchase at this time.');
+        }
+
+        // Get the extension price from stripe
+        $price = $this->getStripePrice();
+        if (!$price) {
+            throw new \Exception('The extension you attempted to purchase is not available for purchase at this time.');
+        }
+
+        // Calculate the fee fleetbase takes for faciliation of extension
+        $totalAmount    = $price->unit_amount;
+        $facilitatorFee = SupportUtils::calculatePercentage(config('registry-bridge.facilitator_fee', 10), $totalAmount);
+
+        // Get the stripe client to create the checkout session
+        $stripe          = Utils::getStripeClient();
+
+        // Create the stripe checkout session
+        $checkoutSession = $stripe->checkout->sessions->create([
+            'ui_mode'    => 'embedded',
+            'line_items' => [
+                [
+                    'price'    => $price->id,
+                    'quantity' => 1,
+                ],
+            ],
+            'mode'                => 'payment',
+            'return_url'          => SupportUtils::consoleUrl($returnUri) . '?extension_id=' . $this->uuid . '&checkout_session_id={CHECKOUT_SESSION_ID}',
+            'payment_intent_data' => [
+                'application_fee_amount' => $facilitatorFee,
+                'transfer_data'          => [
+                    'destination' => $extensionAuthor->stripe_connect_id,
+                ],
+            ],
+        ]);
+
+        return $checkoutSession;
+    }
 }
diff --git a/server/src/Models/RegistryExtensionPurchase.php b/server/src/Models/RegistryExtensionPurchase.php
new file mode 100644
index 0000000..e73f480
--- /dev/null
+++ b/server/src/Models/RegistryExtensionPurchase.php
@@ -0,0 +1,85 @@
+<?php
+
+namespace Fleetbase\RegistryBridge\Models;
+
+use Fleetbase\Casts\Json;
+use Fleetbase\Casts\Money;
+use Fleetbase\Models\Company;
+use Fleetbase\Models\Model;
+use Fleetbase\Traits\HasMetaAttributes;
+use Fleetbase\Traits\HasUuid;
+
+class RegistryExtensionPurchase extends Model
+{
+    use HasUuid;
+    use HasMetaAttributes;
+
+    /**
+     * The database table used by the model.
+     *
+     * @var string
+     */
+    protected $table = 'registry_extension_purchases';
+
+    /**
+     * The attributes that are mass assignable.
+     */
+    protected $fillable = [
+        'uuid',
+        'company_uuid',
+        'extension_uuid',
+        'stripe_checkout_session_id',
+        'stripe_payment_intent_id',
+        'is_subcription',
+        'locked_price',
+        'subscription_billing_period',
+        'subscription_model',
+        'meta',
+    ];
+
+    /**
+     * The attributes that should be cast to native types.
+     */
+    protected $casts = [
+        'meta'                  => Json::class,
+        'locked_price'          => Money::class,
+        'is_subcription'        => 'boolean',
+    ];
+
+    /**
+     * Dynamic attributes that are appended to object.
+     *
+     * @var array
+     */
+    protected $appends = [];
+
+    /**
+     * Relations that should be loaded with model.
+     *
+     * @var array
+     */
+    protected $with = [];
+
+    /**
+     * Relations that should not be loaded.
+     *
+     * @var array
+     */
+    protected $without = ['company', 'extension'];
+
+    /**
+     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
+     */
+    public function company()
+    {
+        return $this->belongsTo(Company::class, 'company_uuid', 'uuid');
+    }
+
+    /**
+     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
+     */
+    public function extension()
+    {
+        return $this->belongsTo(RegistryExtension::class, 'extension_uuid', 'uuid');
+    }
+}
diff --git a/server/src/Support/Utils.php b/server/src/Support/Utils.php
new file mode 100644
index 0000000..ec8b33c
--- /dev/null
+++ b/server/src/Support/Utils.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Fleetbase\RegistryBridge\Support;
+
+use Stripe\StripeClient;
+
+class Utils
+{
+    /**
+     * Get the StripeClient instance.
+     */
+    public static function getStripeClient(array $options = []): ?StripeClient
+    {
+        return new StripeClient([
+            'api_key' => config('registry-bridge.stripe.secret'),
+            ...$options,
+        ]);
+    }
+}
diff --git a/server/src/routes.php b/server/src/routes.php
index 93c9fd6..6016b7f 100644
--- a/server/src/routes.php
+++ b/server/src/routes.php
@@ -34,6 +34,13 @@ function ($router) {
                 $router->post('check-access', 'RegistryAuthController@checkAccess');
                 $router->post('check-publish', 'RegistryAuthController@checkPublishAllowed');
             });
+            $router->group(['prefix' => 'payments'], function ($router) {
+                $router->post('account', 'RegistryPaymentsController@getStripeAccount');
+                $router->post('account-session', 'RegistryPaymentsController@getStripeAccountSession');
+                $router->get('has-stripe-connect-account', 'RegistryPaymentsController@hasStripeConnectAccount');
+                $router->post('create-checkout-session', 'RegistryPaymentsController@createStripeCheckoutSession');
+                $router->post('get-checkout-session', 'RegistryPaymentsController@getStripeCheckoutSessionStatus');
+            });
             $router->fleetbaseRoutes('registry-extensions', function ($router, $controller) {
                 $router->post('{id}/submit', $controller('submit'));
                 $router->post('approve', $controller('approve'));
diff --git a/tests/integration/components/modals/confirm-extension-purchase-test.js b/tests/integration/components/modals/confirm-extension-purchase-test.js
new file mode 100644
index 0000000..6b279c2
--- /dev/null
+++ b/tests/integration/components/modals/confirm-extension-purchase-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | modals/confirm-extension-purchase', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<Modals::ConfirmExtensionPurchase />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Modals::ConfirmExtensionPurchase>
+        template block text
+      </Modals::ConfirmExtensionPurchase>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/integration/components/modals/extension-purchase-form-test.js b/tests/integration/components/modals/extension-purchase-form-test.js
new file mode 100644
index 0000000..1917a99
--- /dev/null
+++ b/tests/integration/components/modals/extension-purchase-form-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | modals/extension-purchase-form', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<Modals::ExtensionPurchaseForm />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Modals::ExtensionPurchaseForm>
+        template block text
+      </Modals::ExtensionPurchaseForm>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});
diff --git a/tests/unit/controllers/developers/payments/index-test.js b/tests/unit/controllers/developers/payments/index-test.js
new file mode 100644
index 0000000..e704ab4
--- /dev/null
+++ b/tests/unit/controllers/developers/payments/index-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'dummy/tests/helpers';
+
+module('Unit | Controller | developers/payments/index', function (hooks) {
+    setupTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it exists', function (assert) {
+        let controller = this.owner.lookup('controller:developers/payments/index');
+        assert.ok(controller);
+    });
+});
diff --git a/tests/unit/controllers/developers/payments/onboard-test.js b/tests/unit/controllers/developers/payments/onboard-test.js
new file mode 100644
index 0000000..77d7c26
--- /dev/null
+++ b/tests/unit/controllers/developers/payments/onboard-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'dummy/tests/helpers';
+
+module('Unit | Controller | developers/payments/onboard', function (hooks) {
+    setupTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it exists', function (assert) {
+        let controller = this.owner.lookup('controller:developers/payments/onboard');
+        assert.ok(controller);
+    });
+});
diff --git a/tests/unit/routes/developers/payments/index-test.js b/tests/unit/routes/developers/payments/index-test.js
new file mode 100644
index 0000000..66653cd
--- /dev/null
+++ b/tests/unit/routes/developers/payments/index-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'dummy/tests/helpers';
+
+module('Unit | Route | developers/payments/index', function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+        let route = this.owner.lookup('route:developers/payments/index');
+        assert.ok(route);
+    });
+});
diff --git a/tests/unit/routes/developers/payments/onboard-test.js b/tests/unit/routes/developers/payments/onboard-test.js
new file mode 100644
index 0000000..29d4e3f
--- /dev/null
+++ b/tests/unit/routes/developers/payments/onboard-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'dummy/tests/helpers';
+
+module('Unit | Route | developers/payments/onboard', function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+        let route = this.owner.lookup('route:developers/payments/onboard');
+        assert.ok(route);
+    });
+});
diff --git a/tests/unit/services/stripe-test.js b/tests/unit/services/stripe-test.js
new file mode 100644
index 0000000..703eddb
--- /dev/null
+++ b/tests/unit/services/stripe-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'dummy/tests/helpers';
+
+module('Unit | Service | stripe', function (hooks) {
+    setupTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it exists', function (assert) {
+        let service = this.owner.lookup('service:stripe');
+        assert.ok(service);
+    });
+});