diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3b56c2534..6e07921d37 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed en-CA translation warning in terminal. [#2278][https://github.com/bigcommerce/cornerstone/pull/2278]
 - Added manual captcha to Contact Us form for additional spam protection. [#2290](https://github.com/bigcommerce/cornerstone/pull/2290)
 - Fixed PDP not respecting "quantity box" display settings. [#2291](https://github.com/bigcommerce/cornerstone/pull/2291)
+- Added integrarion of storefront-account-payments lib [#2288][https://github.com/bigcommerce/cornerstone/pull/2288]
 
 ## 6.7.0 (11-03-2022)
 - Fixed escaping on created store account confirm message. [#2265]https://github.com/bigcommerce/cornerstone/pull/2265
diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js
index 608dc7883b..860d5a2e84 100644
--- a/assets/js/theme/account.js
+++ b/assets/js/theme/account.js
@@ -32,6 +32,7 @@ export default class Account extends PageManager {
         const $paymentMethodForm = classifyForm('form[data-payment-method-form]');
         const $reorderForm = classifyForm('[data-account-reorder-form]');
         const $invoiceButton = $('[data-print-invoice]');
+        const $bigCommerce = window.BigCommerce;
 
         compareProducts(this.context);
 
@@ -82,6 +83,31 @@ export default class Account extends PageManager {
             this.initReorderForm($reorderForm);
         }
 
+        if ($bigCommerce && $bigCommerce.accountPayments) {
+            window.BigCommerce.accountPayments({
+                widgetStyles: {
+                    base: {
+                        color: '#666666',
+                        cursor: 'pointer',
+                        display: 'block',
+                        fontSize: '1rem',
+                        lineHeight: '1.5',
+                        marginBottom: '0.5rem',
+                    },
+                    error: {
+                        color: 'red',
+                    },
+                    placeholder: {
+                        color: '#d8d8d8',
+                    },
+                    validated: {
+                        color: 'green',
+                    },
+                },
+                countries: this.context.countries,
+            });
+        }
+
         this.bindDeleteAddress();
         this.bindDeletePaymentMethod();
     }
diff --git a/templates/pages/account/add-payment-method.html b/templates/pages/account/add-payment-method.html
index 832c9234ab..5edfa30693 100644
--- a/templates/pages/account/add-payment-method.html
+++ b/templates/pages/account/add-payment-method.html
@@ -36,76 +36,85 @@ <h2 class="page-heading">{{lang 'forms.payment_methods.add.heading'}}</h2>
             {{> components/common/alert/alert-error forms.error}}
         {{/if}}
 
-        <form data-payment-method-form class="form">
-            <input type="hidden" name="email" value="{{customer.email}}">
-            <input type="hidden" name="provider_id" value="{{forms.provider}}">
-            <input type="hidden" name="currency_code" value="{{currency_selector.active_currency_code}}">
+        {{#if account_payments}}
+            {{{ account_payments }}}
+            <script>
+                window.BigCommerce = window.BigCommerce || {};
+                window.BigCommerce.customerEmail = '{{customer.email}}';
+                window.BigCommerce.providerId = '{{forms.provider}}';
+                window.BigCommerce.currencyCode = '{{currency_selector.active_currency_code}}';
+            </script>
+        {{else}}
+            <form data-payment-method-form class="form">
+                <input type="hidden" name="email" value="{{customer.email}}">
+                <input type="hidden" name="provider_id" value="{{forms.provider}}">
+                <input type="hidden" name="currency_code" value="{{currency_selector.active_currency_code}}">
 
-            <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.payment_method'}}</h3>
-
-            <div class="paymentMethodForm">
-                <p class="paymentMethodForm-subheading">
-                    {{forms.payment_method.provider_name}}
-                    <span class="paymentMethodForm-cards">
-                        {{#each ../theme_settings.supported_card_type_icons}}
-                            <img class="paymentMethodForm-cards-icon" src="{{cdn (concat (concat 'img/payment-methods/' this) '.svg')}}" alt="{{lang (concat 'account.payment_methods.card_types.' this)}}" title="{{lang (concat 'account.payment_methods.card_types.' this)}}">
-                        {{/each}}
-                    </span>
-                </p>
-                <fieldset class="form-fieldset">
-                    <div class="paymentMethodForm-column">
-                        <div class="paymentMethodForm-inputs">
-                            {{> components/common/forms/text id="credit_card_number" name="credit_card_number" label=(lang 'account.payment_methods.credit_card_number')}}
-                            <svg class="paymentMethodForm-inputs-icon icon">
-                                <use xlink:href="#icon-lock" />
-                            </svg>
-                        </div>
-                        <div class="paymentMethodForm-inputs">
-                            {{> components/common/forms/text id="expiration" name="expiration" label=(lang 'account.payment_methods.expiration') placeholder="MM/YY"}}
+                <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.payment_method'}}</h3>
+                <div class="paymentMethodForm">
+                    <p class="paymentMethodForm-subheading">
+                        {{forms.payment_method.provider_name}}
+                        <span class="paymentMethodForm-cards">
+                            {{#each ../theme_settings.supported_card_type_icons}}
+                                <img class="paymentMethodForm-cards-icon" src="{{cdn (concat (concat 'img/payment-methods/' this) '.svg')}}" alt="{{lang (concat 'account.payment_methods.card_types.' this)}}" title="{{lang (concat 'account.payment_methods.card_types.' this)}}">
+                            {{/each}}
+                        </span>
+                    </p>
+                    <fieldset class="form-fieldset">
+                        <div class="paymentMethodForm-column">
+                            <div class="paymentMethodForm-inputs">
+                                {{> components/common/forms/text id="credit_card_number" name="credit_card_number" label=(lang 'account.payment_methods.credit_card_number')}}
+                                <svg class="paymentMethodForm-inputs-icon icon">
+                                    <use xlink:href="#icon-lock" />
+                                </svg>
+                            </div>
+                            <div class="paymentMethodForm-inputs">
+                                {{> components/common/forms/text id="expiration" name="expiration" label=(lang 'account.payment_methods.expiration') placeholder="MM/YY"}}
+                            </div>
                         </div>
-                    </div>
-                    <div class="paymentMethodForm-column">
-                        <div class="paymentMethodForm-inputs">
-                            {{> components/common/forms/text id="name_on_card" name="name_on_card" label=(lang 'account.payment_methods.name_on_card')}}
+                        <div class="paymentMethodForm-column">
+                            <div class="paymentMethodForm-inputs">
+                                {{> components/common/forms/text id="name_on_card" name="name_on_card" label=(lang 'account.payment_methods.name_on_card')}}
+                            </div>
+                            <div class="paymentMethodForm-inputs">
+                                {{> components/common/forms/text id="cvv" name="cvv" label=(lang 'account.payment_methods.cvv')}}
+                                <svg class="paymentMethodForm-inputs-icon icon">
+                                    <use xlink:href="#icon-lock" />
+                                </svg>
+                            </div>
                         </div>
-                        <div class="paymentMethodForm-inputs">
-                            {{> components/common/forms/text id="cvv" name="cvv" label=(lang 'account.payment_methods.cvv')}}
-                            <svg class="paymentMethodForm-inputs-icon icon">
-                                <use xlink:href="#icon-lock" />
-                            </svg>
+                        <div class="form-field">
+                            <input type="checkbox" name="default_instrument" id="default_instrument" data-label="{{lang 'forms.payment_methods.default_instrument'}}" class="form-checkbox">
+                            <label class="form-label" for="default_instrument">{{lang 'forms.payment_methods.default_instrument'}}</label>
                         </div>
-                    </div>
-                    <div class="form-field">
-                        <input type="checkbox" name="default_instrument" id="default_instrument" data-label="{{lang 'forms.payment_methods.default_instrument'}}" class="form-checkbox">
-                        <label class="form-label" for="default_instrument">{{lang 'forms.payment_methods.default_instrument'}}</label>
-                    </div>
-                </fieldset>
-            </div>
+                    </fieldset>
+                </div>
 
-            <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.billing_address'}}</h3>
+                <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.billing_address'}}</h3>
 
-            <fieldset class="form-fieldset">
-                <div class="form-row form-row--half">
-                    {{> components/common/forms/text private_id="FirstName" required=true id="first_name" name="first_name" label=(lang 'forms.payment_methods.first_name')}}
-                    {{> components/common/forms/text private_id="LastName" required=true id="last_name" name="last_name" label=(lang 'forms.payment_methods.last_name')}}
-                    {{> components/common/forms/text private_id="CompanyName" required=false id="company" name="company" label=(lang 'forms.payment_methods.company')}}
-                    {{> components/common/forms/text private_id="Phone" required=false id="phone" name="phone" label=(lang 'forms.payment_methods.phone')}}
-                    {{> components/common/forms/text private_id="AddressLine1" required=true id="address1" name="address1" label=(lang 'forms.payment_methods.address1')}}
-                    {{> components/common/forms/text private_id="AddressLine2" required=false id="address2" name="address2" label=(lang 'forms.payment_methods.address2')}}
-                    {{> components/common/forms/text private_id="City" required=true id="city" name="city" label=(lang 'forms.payment_methods.city')}}
-                    {{> components/common/forms/select private_id="Country" required=true id="country" name="country" label=(lang 'forms.payment_methods.country') chooseprefix=(lang 'forms.payment_methods.choose_country') options=countries}}
-                    {{> components/common/forms/text private_id="State" required=true id="state" name="state" label=(lang 'forms.payment_methods.state')}}
-                    {{> components/common/forms/text private_id="Zip" required=true id="postal_code" name="postal_code" label=(lang 'forms.payment_methods.postal_code')}}
+                <fieldset class="form-fieldset">
+                    <div class="form-row form-row--half">
+                        {{> components/common/forms/text private_id="FirstName" required=true id="first_name" name="first_name" label=(lang 'forms.payment_methods.first_name')}}
+                        {{> components/common/forms/text private_id="LastName" required=true id="last_name" name="last_name" label=(lang 'forms.payment_methods.last_name')}}
+                        {{> components/common/forms/text private_id="CompanyName" required=false id="company" name="company" label=(lang 'forms.payment_methods.company')}}
+                        {{> components/common/forms/text private_id="Phone" required=false id="phone" name="phone" label=(lang 'forms.payment_methods.phone')}}
+                        {{> components/common/forms/text private_id="AddressLine1" required=true id="address1" name="address1" label=(lang 'forms.payment_methods.address1')}}
+                        {{> components/common/forms/text private_id="AddressLine2" required=false id="address2" name="address2" label=(lang 'forms.payment_methods.address2')}}
+                        {{> components/common/forms/text private_id="City" required=true id="city" name="city" label=(lang 'forms.payment_methods.city')}}
+                        {{> components/common/forms/select private_id="Country" required=true id="country" name="country" label=(lang 'forms.payment_methods.country') chooseprefix=(lang 'forms.payment_methods.choose_country') options=countries}}
+                        {{> components/common/forms/text private_id="State" required=true id="state" name="state" label=(lang 'forms.payment_methods.state')}}
+                        {{> components/common/forms/text private_id="Zip" required=true id="postal_code" name="postal_code" label=(lang 'forms.payment_methods.postal_code')}}
+                    </div>
+                </fieldset>
+                <div class="form-actions">
+                    <input type="submit" class="button button--primary" value="{{lang 'forms.payment_methods.submit_value'}}">
+                    <a href="{{urls.account.payment_methods.all}}" class="button">{{lang 'common.cancel'}}</a>
+                    {{inject 'required' (lang 'common.required')}}
+                    {{inject 'state_error' (lang 'errors.state_error')}}
+                    {{inject 'generic_error' (lang 'common.generic_error')}}
                 </div>
-            </fieldset>
-            <div class="form-actions">
-                <input type="submit" class="button button--primary" value="{{lang 'forms.payment_methods.submit_value'}}">
-                <a href="{{urls.account.payment_methods.all}}" class="button">{{lang 'common.cancel'}}</a>
-                {{inject 'required' (lang 'common.required')}}
-                {{inject 'state_error' (lang 'errors.state_error')}}
-                {{inject 'generic_error' (lang 'common.generic_error')}}
-            </div>
-        </form>
+            </form>
+        {{/if}}
     </div>
 
 {{/partial}}