diff --git a/Block/Adminhtml/ColorPicker.php b/Block/Adminhtml/ColorPicker.php
new file mode 100644
index 0000000..7ed7a7c
--- /dev/null
+++ b/Block/Adminhtml/ColorPicker.php
@@ -0,0 +1,59 @@
+<?php
+/**
+ * Copyright (c) 2022 Mastercard
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+namespace MasterCard\SimplifyCommerce\Block\Adminhtml;
+
+use Magento\Config\Block\System\Config\Form\Field;
+use Magento\Framework\Data\Form\Element\AbstractElement;
+
+class ColorPicker extends Field
+{
+    /**
+     * @param AbstractElement $element
+     *
+     * @return string
+     */
+    protected function _getElementHtml(AbstractElement $element)
+    {
+        $html      = $element->getElementHtml();
+        $value     = $element->getData('value');
+        $elementId = $element->getHtmlId();
+        $html      .= '<script type="text/javascript">
+            require(["jquery", "tinycolor"], function($) {
+                $(document).ready(function(e) {
+                    $("#' . $elementId . '").css("color", "#ffffff");
+                    $("#' . $elementId . '").css("background-color", "' . $value . '");
+                    $("#' . $elementId . '").colpick({
+                        layout: "hex",
+                        submit: 0,
+                        color: "' . $value . '",
+                        onChange: function(hsb, hex, rgb, el, bySetColor) {
+                            $(el).css("background-color", "#" + hex);
+                            if (!bySetColor) {
+                                $(el).val("#" + hex);
+                            }
+                        }
+                    }).keyup(function() {
+                        $(this).colpickSetColor(this.value);
+                    });
+                });
+            });
+            </script>';
+
+        return $html;
+    }
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a63385b..edfd242 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,12 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [3.2.0] - 2022-03-11
+### Changed
+- Installation instructions in the README.md file were updated
+- Color selector for Pay Button on the module Configuration page
+
+
 ## [3.1.1] - 2022-01-04
 ### Fixed
 - Installation instructions in the README.md file were updated
diff --git a/Ui/ConfigProvider.php b/Ui/ConfigProvider.php
index e788ca5..ad27950 100644
--- a/Ui/ConfigProvider.php
+++ b/Ui/ConfigProvider.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * Copyright (c) 2013-2021 Mastercard
+ * Copyright (c) 2013-2022 Mastercard
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -35,6 +35,7 @@ class ConfigProvider implements ConfigProviderInterface
     const IS_MODAL = 'is_modal';
     const REDIRECT_URL = 'redirect_url';
     const VAULT_CODE = 'vault_code';
+    const BUTTON_COLOR = 'button_color';
 
     /**
      * @var ConfigInterface
@@ -53,6 +54,7 @@ class ConfigProvider implements ConfigProviderInterface
 
     /**
      * ConfigProvider constructor.
+     *
      * @param ConfigInterface $config
      * @param UrlInterface $urlBuilder
      * @param ConfigInterface $embeddedConfig
@@ -62,8 +64,8 @@ public function __construct(
         UrlInterface $urlBuilder,
         ConfigInterface $embeddedConfig
     ) {
-        $this->config = $config;
-        $this->urlBuilder = $urlBuilder;
+        $this->config         = $config;
+        $this->urlBuilder     = $urlBuilder;
         $this->embeddedConfig = $embeddedConfig;
     }
 
@@ -73,7 +75,7 @@ public function __construct(
     protected function getPlaceOrderUrl()
     {
         return $this->urlBuilder->getUrl('mastercard/simplify/placeOrder', [
-            '_secure' => 1
+            '_secure' => 1,
         ]);
     }
 
@@ -86,21 +88,22 @@ public function getConfig()
     {
         return [
             'payment' => [
-                self::CODE => [
+                self::CODE          => [
                     self::JS_COMPONENT => $this->config->getValue(self::JS_COMPONENT),
-                    self::PUBLIC_KEY => $this->config->getValue(self::PUBLIC_KEY),
-                    self::IS_MODAL => $this->config->getValue(self::PAYMENT_FORM_TYPE) == FormType::MODAL,
+                    self::PUBLIC_KEY   => $this->config->getValue(self::PUBLIC_KEY),
+                    self::IS_MODAL     => $this->config->getValue(self::PAYMENT_FORM_TYPE) == FormType::MODAL,
                     self::REDIRECT_URL => $this->getPlaceOrderUrl(),
-                    self::VAULT_CODE => self::VAULT_PAYMENT_CODE,
+                    self::VAULT_CODE   => self::VAULT_PAYMENT_CODE,
                 ],
                 self::EMBEDDED_CODE => [
                     self::JS_COMPONENT => $this->embeddedConfig->getValue(self::JS_COMPONENT),
-                    self::PUBLIC_KEY => $this->embeddedConfig->getValue(self::PUBLIC_KEY),
-                    self::IS_MODAL => $this->embeddedConfig->getValue(self::PAYMENT_FORM_TYPE) == FormType::MODAL,
+                    self::PUBLIC_KEY   => $this->embeddedConfig->getValue(self::PUBLIC_KEY),
+                    self::IS_MODAL     => $this->embeddedConfig->getValue(self::PAYMENT_FORM_TYPE) == FormType::MODAL,
                     self::REDIRECT_URL => $this->getPlaceOrderUrl(),
-                    self::VAULT_CODE => self::VAULT_EMBEDDED_PAYMENT_CODE,
-                ]
-            ]
+                    self::VAULT_CODE   => self::VAULT_EMBEDDED_PAYMENT_CODE,
+                    self::BUTTON_COLOR => $this->embeddedConfig->getValue(self::BUTTON_COLOR),
+                ],
+            ],
         ];
     }
 }
diff --git a/composer.json b/composer.json
index dd20260..cfa5f09 100755
--- a/composer.json
+++ b/composer.json
@@ -1,8 +1,8 @@
 {
     "name": "mastercard/module-simplifycommerce",
-    "version": "3.1.1",
-    "description": "Mastercard Simplify Commerce",
-    "license": "proprietary",
+    "version": "3.2.0",
+    "description": "Mastercard Payment Gateway Services - Simplify",
+    "license": "Apache-2.0",
     "authors": [
         {
             "name": "Tomasz Waraksa",
@@ -14,7 +14,7 @@
         }
     ],
     "require": {
-        "magento/framework": "^101.0.0|^102.0.0|^103.0.0|^104.0.0"
+        "magento/framework": "^101.0.0|^102.0.0|^103.0.0"
     },
     "type": "magento2-module",
     "autoload": {
diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml
index 62bd312..f1ccab7 100755
--- a/etc/adminhtml/system.xml
+++ b/etc/adminhtml/system.xml
@@ -146,6 +146,11 @@
                         <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                         <config_path>payment/simplifycommerce_embedded_vault/active</config_path>
                     </field>
+                    <field id="button_color" translate="label" type="text" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="0">
+                        <label>Hosted Payments Button Color</label>
+                        <config_path>payment/simplifycommerce_embedded/button_color</config_path>
+                        <frontend_model>MasterCard\SimplifyCommerce\Block\Adminhtml\ColorPicker</frontend_model>
+                    </field>
                 </group>
             </group>
         </section>
diff --git a/etc/config.xml b/etc/config.xml
index 62ac0dc..558f02c 100755
--- a/etc/config.xml
+++ b/etc/config.xml
@@ -73,6 +73,7 @@
                 <can_use_internal>0</can_use_internal>
                 <privateInfoKeys />
                 <paymentInfoKeys>last4,type,expMonth,expYear,source,paymentStatus</paymentInfoKeys>
+                <button_color>#1979c3</button_color>
             </simplifycommerce_embedded>
             <simplifycommerce_vault>
                 <model>SimplifyVaultFacade</model>
diff --git a/lib/SimplifyAdapter.php b/lib/SimplifyAdapter.php
index 194bd7e..34098a2 100644
--- a/lib/SimplifyAdapter.php
+++ b/lib/SimplifyAdapter.php
@@ -41,7 +41,7 @@ public function __construct($publicKey, $privateKey)
 
         Simplify::$publicKey = $publicKey;
         Simplify::$privateKey = $privateKey;
-        Simplify::$userAgent = 'Magento-3.1.1';
+        Simplify::$userAgent = 'Magento-3.2.0';
     }
 
     /**
diff --git a/view/frontend/web/js/view/payment/method-renderer/simplifycommerce-embedded-method.js b/view/frontend/web/js/view/payment/method-renderer/simplifycommerce-embedded-method.js
index 5536294..a957981 100644
--- a/view/frontend/web/js/view/payment/method-renderer/simplifycommerce-embedded-method.js
+++ b/view/frontend/web/js/view/payment/method-renderer/simplifycommerce-embedded-method.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2013-2020 Mastercard
+ * Copyright (c) 2013-2022 Mastercard
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
diff --git a/view/frontend/web/js/view/payment/method-renderer/simplifycommerce-method.js b/view/frontend/web/js/view/payment/method-renderer/simplifycommerce-method.js
index 5895f3e..8975fa7 100644
--- a/view/frontend/web/js/view/payment/method-renderer/simplifycommerce-method.js
+++ b/view/frontend/web/js/view/payment/method-renderer/simplifycommerce-method.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2013-2021 Mastercard
+ * Copyright (c) 2013-2022 Mastercard
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -194,5 +194,17 @@ define([
         isVaultEnabled: function () {
             return this.vaultEnabler.isVaultEnabled();
         },
+
+        /**
+         * @returns {String}
+         */
+        getButtonColor: function () {
+            var config, buttonColor;
+
+            config = window.checkoutConfig["payment"][this.getCode()] || {};
+            buttonColor = config["button_color"] || null;
+
+            return buttonColor;
+        }
     });
 });
diff --git a/view/frontend/web/template/payment/simplifycommerce.html b/view/frontend/web/template/payment/simplifycommerce.html
index 11d6017..6f6704f 100755
--- a/view/frontend/web/template/payment/simplifycommerce.html
+++ b/view/frontend/web/template/payment/simplifycommerce.html
@@ -1,89 +1,89 @@
-<!--
-  ~ Copyright (c) 2013-2021 Mastercard
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~ http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
-<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
-    <div class="payment-method-title field choice">
-        <input type="radio"
-               name="payment[method]"
-               class="radio"
-               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()" />
-        <label class="label" data-bind="attr: {'for': getCode()}">
-            <span data-bind="text: getTitle()"></span>
-        </label>
-    </div>
-    <div class="payment-method-content">
-        <!-- ko foreach: getRegion('messages') -->
-        <!-- ko template: getTemplate() --><!-- /ko -->
-        <!--/ko-->
-        <fieldset class="fieldset" data-bind='attr: {id: "payment_form_" + getCode()}'>
-            <div class="payment-method-billing-address">
-                <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
-                <!-- ko template: getTemplate() --><!-- /ko -->
-                <!--/ko-->
-            </div>
-            <!-- ko if: (isVaultEnabled())-->
-            <div class="field choice">
-                <input type="checkbox"
-                       name="vault[is_enabled]"
-                       class="checkbox"
-                       data-bind="attr: {'id': getCode() + '_enable_vault'}, checked: vaultEnabler.isActivePaymentTokenEnabler"/>
-                <label class="label" data-bind="attr: {'for': getCode() + '_enable_vault'}">
-                    <span><!-- ko i18n: 'Save for later use.'--><!-- /ko --></span>
-                </label>
-                <div class="field-tooltip toggle">
-                            <span class="field-tooltip-action action-vault"
-                                  tabindex="0"
-                                  data-toggle="dropdown"
-                                  data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
-                                <span translate="'What is this?'"></span>
-                            </span>
-                    <div class="field-tooltip-content"
-                         data-target="dropdown"
-                         translate="'We store your payment information securely on the payment gateway\'s servers via SSL.'"></div>
-                </div>
-            </div>
-            <!-- /ko -->
-            <!-- ko ifnot: isModal() -->
-            <div class="payment-method-simplifycommerce">
-                <iframe name="simplifycommerce-embedded-form"
-                        title="Simplify Commerce Payment Form"
-                        data-bind='attr: {"data-sc-key": getPublicKey(), "data-role": getCode() + "_pay", "title": $t("Simplify Commerce Payment Form")}, afterRender: initializeSimplify'></iframe>
-            </div>
-            <!--/ko-->
-        </fieldset>
-        <div class="checkout-agreements-block">
-            <!-- ko foreach: $parent.getRegion('before-place-order') -->
-            <!-- ko template: getTemplate() --><!-- /ko -->
-            <!--/ko-->
-        </div>
-        <!-- ko if: isModal() -->
-        <div class="actions-toolbar">
-            <div class="primary">
-                <button type="button" data-bind='visible: false, attr: {"data-sc-key": getPublicKey(), "data-role": getCode() + "_pay"}'>
-                    <span data-bind="i18n: 'Pay', afterRender: initializeSimplify"></span>
-                </button>
-                <button class="action primary checkout"
-                        title="Pay"
-                        type="button"
-                        data-bind='attr: {"title": $t("Pay")}, click: savePayment, enable: (getCode() == isChecked()), css: {disabled: !isPlaceOrderActionAllowed()}'
-                        disabled>
-                    <span data-bind="i18n: 'Pay'"></span>
-                </button>
-            </div>
-        </div>
-        <!--/ko-->
-    </div>
-</div>
+<!--
+  ~ Copyright (c) 2013-2022 Mastercard
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
+    <div class="payment-method-title field choice">
+        <input type="radio"
+               name="payment[method]"
+               class="radio"
+               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()" />
+        <label class="label" data-bind="attr: {'for': getCode()}">
+            <span data-bind="text: getTitle()"></span>
+        </label>
+    </div>
+    <div class="payment-method-content">
+        <!-- ko foreach: getRegion('messages') -->
+        <!-- ko template: getTemplate() --><!-- /ko -->
+        <!--/ko-->
+        <fieldset class="fieldset" data-bind='attr: {id: "payment_form_" + getCode()}'>
+            <div class="payment-method-billing-address">
+                <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
+                <!-- ko template: getTemplate() --><!-- /ko -->
+                <!--/ko-->
+            </div>
+            <!-- ko if: (isVaultEnabled())-->
+            <div class="field choice">
+                <input type="checkbox"
+                       name="vault[is_enabled]"
+                       class="checkbox"
+                       data-bind="attr: {'id': getCode() + '_enable_vault'}, checked: vaultEnabler.isActivePaymentTokenEnabler"/>
+                <label class="label" data-bind="attr: {'for': getCode() + '_enable_vault'}">
+                    <span><!-- ko i18n: 'Save for later use.'--><!-- /ko --></span>
+                </label>
+                <div class="field-tooltip toggle">
+                            <span class="field-tooltip-action action-vault"
+                                  tabindex="0"
+                                  data-toggle="dropdown"
+                                  data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
+                                <span translate="'What is this?'"></span>
+                            </span>
+                    <div class="field-tooltip-content"
+                         data-target="dropdown"
+                         translate="'We store your payment information securely on the payment gateway\'s servers via SSL.'"></div>
+                </div>
+            </div>
+            <!-- /ko -->
+            <!-- ko ifnot: isModal() -->
+            <div class="payment-method-simplifycommerce">
+                <iframe name="simplifycommerce-embedded-form"
+                        title="Simplify Commerce Payment Form"
+                        data-bind='attr: {"data-color": getButtonColor(), "data-sc-key": getPublicKey(), "data-role": getCode() + "_pay", "title": $t("Simplify Commerce Payment Form")}, afterRender: initializeSimplify'></iframe>
+            </div>
+            <!--/ko-->
+        </fieldset>
+        <div class="checkout-agreements-block">
+            <!-- ko foreach: $parent.getRegion('before-place-order') -->
+            <!-- ko template: getTemplate() --><!-- /ko -->
+            <!--/ko-->
+        </div>
+        <!-- ko if: isModal() -->
+        <div class="actions-toolbar">
+            <div class="primary">
+                <button type="button" data-bind='visible: false, attr: {"data-sc-key": getPublicKey(), "data-role": getCode() + "_pay"}'>
+                    <span data-bind="i18n: 'Pay', afterRender: initializeSimplify"></span>
+                </button>
+                <button class="action primary checkout"
+                        title="Pay"
+                        type="button"
+                        data-bind='attr: {"title": $t("Pay")}, click: savePayment, enable: (getCode() == isChecked()), css: {disabled: !isPlaceOrderActionAllowed()}'
+                        disabled>
+                    <span data-bind="i18n: 'Pay'"></span>
+                </button>
+            </div>
+        </div>
+        <!--/ko-->
+    </div>
+</div>