From 51782ceab60d6be9f555edcdba7d02021aee5492 Mon Sep 17 00:00:00 2001
From: Aashish Gurung <101558497+aashishgurung@users.noreply.github.com>
Date: Wed, 22 Mar 2023 12:43:09 +0700
Subject: [PATCH 1/6] [ENGA3-1056]: Added feature flag options in the credit
 card page to switch between credit card forms (#354)

* [ENGA3-1056]: Added feature flag options in the credit card page to switch between secure and insecure form.

* [ENGA3-1056]: Updated the label and description of embedded form.

* [ENGA3-1056]: Removed unnecessary file.

* [ENGA3-1056]: Added new line.

* [ENGA3-1056]: Fixed some issues.

* [EGNA3-1056]: Added discover card.

* [ENGA3-1056]: Changed the deploy branch from master to develop

---------

Co-authored-by: Aashish <aashish@omise.co>
---
 .github/workflows/deploy-staging.yml          |   2 +-
 assets/css/card-form-customization.css        | 153 ++++++++++++++
 assets/css/omise-css.css                      |   6 +-
 assets/images/green-check.svg                 |   6 +-
 assets/javascripts/card-form-customization.js |  93 +++++++++
 assets/javascripts/omise-embedded-card.js     |  67 ++++++
 .../omise-myaccount-card-handler.js           |  79 +++++--
 .../javascripts/omise-payment-credit-card.js  |  16 ++
 .../javascripts/omise-payment-form-handler.js | 160 ++++++++++-----
 ...ass-omise-page-card-form-customization.php | 158 ++++++++++++++
 .../omise-page-card-form-customization.php    | 194 ++++++++++++++++++
 includes/class-omise-admin.php                |  68 ++++--
 includes/class-omise-wc-myaccount.php         |  25 ++-
 includes/classes/class-omise-card-image.php   |  28 +++
 .../classes/class-omise-customer-card.php     |   3 +-
 .../abstract-omise-payment-base-card.php      |  24 ++-
 .../class-omise-payment-creditcard.php        | 108 ++++++----
 .../gateway/class-omise-payment-googlepay.php |   2 +-
 .../class-omise-payment-rabbit-linepay.php    |   2 +-
 languages/omise-ja.po                         |   2 +-
 languages/omise.pot                           |   2 +-
 omise-woocommerce.php                         |  11 +
 templates/myaccount/my-card.php               |  23 ++-
 templates/payment/form.php                    |  58 ++++--
 24 files changed, 1127 insertions(+), 163 deletions(-)
 create mode 100644 assets/css/card-form-customization.css
 create mode 100644 assets/javascripts/card-form-customization.js
 create mode 100644 assets/javascripts/omise-embedded-card.js
 create mode 100644 assets/javascripts/omise-payment-credit-card.js
 create mode 100644 includes/admin/class-omise-page-card-form-customization.php
 create mode 100644 includes/admin/views/omise-page-card-form-customization.php

diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
index 9b249920..7753145b 100644
--- a/.github/workflows/deploy-staging.yml
+++ b/.github/workflows/deploy-staging.yml
@@ -1,7 +1,7 @@
 name: Deploy to Staging
 on:
   push:
-    branches: [ 'master' ]
+    branches: [ 'develop' ]
 
 jobs:
   static:
diff --git a/assets/css/card-form-customization.css b/assets/css/card-form-customization.css
new file mode 100644
index 00000000..f563f4d8
--- /dev/null
+++ b/assets/css/card-form-customization.css
@@ -0,0 +1,153 @@
+.omise .text-bold {
+  font-weight: 500;
+}
+
+.omise .text-extra-bold {
+  font-weight: 800;
+}
+
+.omise .color-input-container {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  border: 0.5px solid #CCCCCC;
+  border-radius: 3px;
+  padding: 0px 5px;
+  width: 347px;
+  background: white;
+  height: 36px;
+}
+
+.omise .color-input {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  width: 25px;
+  height: 25px;
+  padding: 2px;
+}
+
+.omise .color-input:focus {
+  box-shadow: none;
+}
+
+.omise .color-input-container>span {
+  color: #131926;
+  ;
+}
+
+.omise .color-input::-moz-color-swatch {
+  border: 1px solid #CCCCCC;
+  border-radius: 3px;
+}
+
+.omise .color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: 0;
+}
+
+.omise .color-input::-webkit-color-swatch {
+  border: 1px solid #CCCCCC;
+  border-radius: 3px;
+}
+
+.omise .select-input,
+.omise .omise-input {
+  border: 0.5px solid #CCCCCC;
+  border-radius: 3px;
+  width: 357px;
+  height: 36px;
+}
+
+.omise .select-input:focus,
+.omise .omise-input:focus {
+  box-shadow: none;
+}
+
+.omise .description {
+  color: #475266;
+  font-size: 12px;
+  padding: 3px 0px 0px 10px;
+}
+
+.omise td {
+  padding: 10px 0px !important;
+  vertical-align: baseline;
+}
+
+.omise .button-reset {
+  background: #F24949;
+  border: 0.5px solid #D8D8D8;
+  border-radius: 3px;
+  color: white;
+}
+
+.omise .button-reset:hover {
+  background: #BF0A19;
+  border: 0.5px solid #D8D8D8;
+  border-radius: 3px;
+  color: white;
+}
+
+.omise .button-preview {
+  background: #D7D7D9;
+  border: 0.5px solid #D8D8D8;
+  border-radius: 3px;
+  color: #000000;
+}
+
+.omise .button-preview:hover {
+  background: #CED3DE;
+  border: 0.5px solid #D8D8D8;
+  border-radius: 3px;
+  color: #000000;
+}
+
+.omise .updated {
+  background: #E8FAF3 !important;
+  border: 1px solid #30AD7F !important;
+  border-radius: 8px;
+  box-shadow: none !important;
+  font-weight: 600 !important;
+  display: flex !important;
+  flex-direction: row;
+  align-items: center;
+}
+
+.omise .updated::before {
+  content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9.25C0 4.29297 4.00781 0.25 9 0.25C13.957 0.25 18 4.29297 18 9.25C18 14.2422 13.957 18.25 9 18.25C4.00781 18.25 0 14.2422 0 9.25ZM13.043 7.70312C13.4297 7.31641 13.4297 6.71875 13.043 6.33203C12.6562 5.94531 12.0586 5.94531 11.6719 6.33203L7.875 10.1289L6.29297 8.58203C5.90625 8.19531 5.30859 8.19531 4.92188 8.58203C4.53516 8.96875 4.53516 9.56641 4.92188 9.95312L7.17188 12.2031C7.55859 12.5898 8.15625 12.5898 8.54297 12.2031L13.043 7.70312Z' fill='%2330AD7F'/%3E%3C/svg%3E%0A");
+  height: 18px;
+  margin-right: 6px;
+}
+
+.omise-modal {
+  position: fixed;
+  display: none;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgb(42 43 55 / 77%);
+  z-index: 9999999999;
+  align-items: center;
+  justify-content: center;
+}
+
+.omise-modal .content {
+  background-color: white;
+  border-radius: 8px;
+  padding: 20px;
+  width: 450px;
+  margin-top: -200px;
+}
+
+.omise-modal .body {
+  padding: 10px;
+  padding-top: 10px;
+}
+
+.omise-modal .footer {
+  padding: 10px;
+}
diff --git a/assets/css/omise-css.css b/assets/css/omise-css.css
index 28da9ac3..ae4037a4 100644
--- a/assets/css/omise-css.css
+++ b/assets/css/omise-css.css
@@ -30,11 +30,13 @@ label.omise-label-inline {
 	display: inline-block;
 }
 
-fieldset.card-exists {
+fieldset.card-exists,
+.omise-new-card-form.card-exists {
 	display: none;
 }
 
-#new_card_info:checked ~ fieldset.card-exists {
+#new_card_info:checked ~ fieldset.card-exists,
+#new_card_info:checked ~ .omise-new-card-form.card-exists {
 	display: flex;
 }
 
diff --git a/assets/images/green-check.svg b/assets/images/green-check.svg
index 7ceef80e..4f3eec4b 100644
--- a/assets/images/green-check.svg
+++ b/assets/images/green-check.svg
@@ -1,3 +1,3 @@
-<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 612 792;" version="1.1" viewBox="0 0 612 792" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
-	.st0{fill:#41AD49;}
-</style><g><path class="st0" d="M562,396c0-141.4-114.6-256-256-256S50,254.6,50,396s114.6,256,256,256S562,537.4,562,396L562,396z    M501.7,296.3l-241,241l0,0l-17.2,17.2L110.3,421.3l58.8-58.8l74.5,74.5l199.4-199.4L501.7,296.3L501.7,296.3z"/></g></svg>
\ No newline at end of file
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 9.25C0 4.29297 4.00781 0.25 9 0.25C13.957 0.25 18 4.29297 18 9.25C18 14.2422 13.957 18.25 9 18.25C4.00781 18.25 0 14.2422 0 9.25ZM13.043 7.70312C13.4297 7.31641 13.4297 6.71875 13.043 6.33203C12.6562 5.94531 12.0586 5.94531 11.6719 6.33203L7.875 10.1289L6.29297 8.58203C5.90625 8.19531 5.30859 8.19531 4.92188 8.58203C4.53516 8.96875 4.53516 9.56641 4.92188 9.95312L7.17188 12.2031C7.55859 12.5898 8.15625 12.5898 8.54297 12.2031L13.043 7.70312Z" fill="#30AD7F"/>
+</svg>
diff --git a/assets/javascripts/card-form-customization.js b/assets/javascripts/card-form-customization.js
new file mode 100644
index 00000000..b87123e4
--- /dev/null
+++ b/assets/javascripts/card-form-customization.js
@@ -0,0 +1,93 @@
+function setDesignFormValues() {
+  Object.keys(DEFAULT_FORM_DESIGN).forEach(function (componentKey) {
+    componentValues = DEFAULT_FORM_DESIGN[componentKey];
+    Object.keys(componentValues).forEach(function (key) {
+      setInputValue(`${componentKey}\\[${key}\\]`, componentValues[key])
+    })
+  });
+}
+
+function setInputValue(name, val) {
+  document.querySelector(`[name=${name}]`).value = val
+}
+
+function getInputValue(name) {
+  return document.querySelector(`[name=${name}]`).value
+}
+
+function setColorInputValue(element) {
+  valueElement = element.nextElementSibling
+  if (!valueElement) {
+    element.insertAdjacentHTML('afterend', `<span>${element.value}</span>`);
+  } else {
+    valueElement.innerHTML = element.value;
+  }
+}
+
+function handleColorInputChanges() {
+  var colorInputs = document.querySelectorAll('.color-input-container');
+
+  colorInputs.forEach((element) => {
+    const input = element.querySelector('.color-input')
+
+    setColorInputValue(input)
+    input.addEventListener('change', (event) => {
+      setColorInputValue(event.target)
+    });
+
+    element.addEventListener('click', (event) => {
+      let input = event.target.querySelector('.color-input')
+      if (!input) {
+        input = event.target.previousElementSibling
+      }
+      var clickEvent = new MouseEvent('click');
+      input.dispatchEvent(clickEvent);
+    });
+  })
+}
+
+function getDesignFormValues() {
+  let formValues = DEFAULT_FORM_DESIGN
+  Object.keys(DEFAULT_FORM_DESIGN).forEach(function (componentKey) {
+    componentValues = DEFAULT_FORM_DESIGN[componentKey];
+    Object.keys(componentValues).forEach(function (key) {
+      const val = getInputValue(`${componentKey}\\[${key}\\]`)
+      formValues[componentKey][key] = val;
+    })
+  });
+  return formValues;
+}
+
+function initOmiseCardForm() {
+  const customCardFormTheme = CARD_FORM_THEME ?? 'light';
+  document.querySelector('.omise-modal .content').style.background =
+    customCardFormTheme == 'light' ? 'white' : '#272934'
+  showOmiseEmbeddedCardForm({
+    element: document.getElementById('omise-card'),
+    publicKey: PUBLIC_KEY,
+    locale: LOCALE,
+    theme: customCardFormTheme,
+    brandIcons: CARD_BRAND_ICONS,
+    design: getDesignFormValues()
+  })
+}
+
+document.getElementById('form-preview').addEventListener('click', (event) => {
+  event.preventDefault()
+  initOmiseCardForm()
+  document.querySelector('.omise-modal').style.display = 'flex'
+});
+
+document.getElementById('close-form-preview').addEventListener('click', (event) => {
+  event.preventDefault()
+  document.querySelector('.omise-modal').style.display = 'none'
+});
+
+document.getElementById('omise-modal').addEventListener('click', (event) => {
+  if (event.target.id == 'omise-modal') {
+    document.querySelector('.omise-modal').style.display = 'none'
+  }
+});
+
+setDesignFormValues();
+handleColorInputChanges();
diff --git a/assets/javascripts/omise-embedded-card.js b/assets/javascripts/omise-embedded-card.js
new file mode 100644
index 00000000..e4ed6b1f
--- /dev/null
+++ b/assets/javascripts/omise-embedded-card.js
@@ -0,0 +1,67 @@
+function showOmiseEmbeddedCardForm({
+  element,
+  publicKey,
+  theme,
+  design,
+  onSuccess,
+  onError,
+  locale,
+  hideRememberCard,
+  brandIcons
+}) {
+  const noop = () => { }
+  const iframeHeightMatching = {
+    '40px': 258,
+    '44px': 270,
+    '48px': 282,
+    '52px': 295,
+  }
+  const { input, font, checkbox } = design;
+
+  let iframeElementHeight = iframeHeightMatching[input.height]
+  
+  if (hideRememberCard) {
+    iframeElementHeight = iframeElementHeight - 25
+  }
+  element.style.height = iframeElementHeight + 'px'
+
+  const localeMatching = {
+    en_US: 'en',
+    ja_JP: 'ja',
+    th_TH: 'th'
+  }
+
+  OmiseCard.configure({
+    publicKey: publicKey,
+    element,
+    customCardForm: true,
+    locale: localeMatching[locale] ?? 'en',
+    customCardFormTheme: theme,
+    customCardFormHideRememberCard: hideRememberCard ?? false,
+    customCardFormBrandIcons: brandIcons ?? null,
+    style: {
+      fontFamily: font.name,
+      fontSize: font.size,
+      input: {
+        height: input.height,
+        borderRadius: input.border_radius,
+        border: `1.2px solid ${input.border_color}`,
+        focusBorder: `1.2px solid ${input.active_border_color}`,
+        background: input.background_color,
+        color: input.text_color,
+        labelColor: input.label_color,
+        placeholderColor: input.placeholder_color,
+      },
+      checkBox: {
+        textColor: checkbox.text_color,
+        themeColor: checkbox.theme_color,
+        border: `1.2px solid ${input.border_color}`,
+      }
+    },
+  });
+
+  OmiseCard.open({
+    onCreateTokenSuccess: onSuccess ?? noop,
+    onError: onError ?? noop
+  });
+}
diff --git a/assets/javascripts/omise-myaccount-card-handler.js b/assets/javascripts/omise-myaccount-card-handler.js
index 8d8a9e8e..30a3e581 100755
--- a/assets/javascripts/omise-myaccount-card-handler.js
+++ b/assets/javascripts/omise-myaccount-card-handler.js
@@ -60,6 +60,34 @@
 			}
 		});
 
+		if(Boolean(parseInt(omise_params.embedded_form_enabled))) {
+			hideError();
+			OmiseCard.requestCardToken()
+		} else {
+			saveCardTraditional()
+		}
+	}
+
+	$(".delete_card").click(function(event){
+		if(confirm('Confirm delete card?')){
+			let $button = $(this);
+			$button.block({
+				message: null,
+				overlayCSS: {
+					background: '#fff url(' + omise_params.ajax_loader_url + ') no-repeat center',
+					backgroundSize: '16px 16px',
+					opacity: 0.6
+				}
+			});
+			delete_card($button.data("card-id"), $button.data("delete-card-nonce"));
+		}
+	});
+	
+	$("#omise_add_new_card").click(function(event){
+		create_card();
+	});
+
+	function saveCardTraditional() {
 		let errors                  = [],
 			omise_card              = {},
 			omise_card_number_field = 'number',
@@ -123,24 +151,39 @@
 			}
 		}
 	}
-	
-	$(".delete_card").click(function(event){
-		if(confirm('Confirm delete card?')){
-			let $button = $(this);
-			$button.block({
-				message: null,
-				overlayCSS: {
-					background: '#fff url(' + omise_params.ajax_loader_url + ') no-repeat center',
-					backgroundSize: '16px 16px',
-					opacity: 0.6
+
+	function saveCardEmbedded(payload) {
+		const data = {
+			action: "omise_create_card",
+			omise_token: payload.token,
+			omise_nonce: $("#omise_add_card_nonce").val()
+		};
+		$.post(omise_params.ajax_url, data, 
+			function(wp_response){
+				if(wp_response.id){
+					window.location.reload();
+				}else{
+					showError(wp_response.message, $form);
 				}
-			});
-			delete_card($button.data("card-id"), $button.data("delete-card-nonce"));
-		}
-	});
-	
-	$("#omise_add_new_card").click(function(event){
-		create_card();
-	});
+			}, "json"
+		);
+	}
+
+	if(Boolean(parseInt(omise_params.embedded_form_enabled))) {
+		showOmiseEmbeddedCardForm({
+			element: document.getElementById('omise-card'),
+			publicKey: omise_params.key,
+			locale: LOCALE,
+			theme: CARD_FORM_THEME ?? 'light',
+			design: FORM_DESIGN,
+			brandIcons: CARD_BRAND_ICONS,
+			hideRememberCard: true,
+			onSuccess: saveCardEmbedded,
+			onError: (error) => {
+				showError(error)
+				$form.unblock()
+			}
+		})
+	}
 }
 )(jQuery);
diff --git a/assets/javascripts/omise-payment-credit-card.js b/assets/javascripts/omise-payment-credit-card.js
new file mode 100644
index 00000000..d09bd04a
--- /dev/null
+++ b/assets/javascripts/omise-payment-credit-card.js
@@ -0,0 +1,16 @@
+(function ($) {
+	const creditCardFormType = $('#woocommerce_omise_embedded_form_enabled');
+	const cardFormTheme = $('#woocommerce_omise_card_form_theme');
+	const cardFormThemeParent = cardFormTheme.closest("tr[valign='top']");
+
+	Boolean(parseInt(creditCardFormType.val()))
+		? cardFormThemeParent.show()
+		: cardFormThemeParent.hide();
+
+	// Add an event listener to the Product Type field
+	creditCardFormType.on('change', function(e) {
+		Boolean(parseInt($(this).val()))
+			? cardFormThemeParent.show()
+			: cardFormThemeParent.hide();
+	});
+})(jQuery);
diff --git a/assets/javascripts/omise-payment-form-handler.js b/assets/javascripts/omise-payment-form-handler.js
index 3c81a6de..d3626ccd 100755
--- a/assets/javascripts/omise-payment-form-handler.js
+++ b/assets/javascripts/omise-payment-form-handler.js
@@ -14,7 +14,7 @@
 		let $ulError = $("<ul>").addClass("woocommerce-error");
 
 		if ($.isArray(message)) {
-			$.each(message, function(i,v) {
+			$.each(message, function(i, v) {
 				$ulError.append($("<li>" + v + "</li>"));
 			})
 		} else {
@@ -58,62 +58,67 @@
 			}
 
 			if (0 === $('input.omise_token').length) {
-				$form.block({
-					message: null,
-					overlayCSS: {
-						background: '#fff url(' + wc_checkout_params.ajax_loader_url + ') no-repeat center',
-						backgroundSize: '16px 16px',
-						opacity: 0.6
-					}
-				});
+				(Boolean(omise_params.embedded_form_enabled))
+					? requestCardToken()
+					: traditionalForm();
+				return false;
+			}
+		}
+	}
 
-				let errors = [],
-					omise_card = {},
-					omise_card_number_field = 'number',
-					omise_card_fields = {
-						'name' : $('#omise_card_name'),
-						'number' : $('#omise_card_number'),
-						'expiration_month' : $('#omise_card_expiration_month'),
-						'expiration_year' : $('#omise_card_expiration_year'),
-						'security_code' : $('#omise_card_security_code')
-					};
-
-				$.each(omise_card_fields, function(index, field) {
-					omise_card[index] = (index === omise_card_number_field) ? field.val().replace(/\s/g, '') : field.val();
-					if ("" === omise_card[index]) {
-						errors.push(omise_params['required_card_' + index]);
-					}
-				});
+	function traditionalForm() {
+		$form.block({
+			message: null,
+			overlayCSS: {
+				background: '#fff url(' + wc_checkout_params.ajax_loader_url + ') no-repeat center',
+				backgroundSize: '16px 16px',
+				opacity: 0.6
+			}
+		});
 
-				if (errors.length > 0) {
-					showError(errors);
-					$form.unblock();
-					return false;
-				}
+		let errors = [],
+			omise_card = {},
+			omise_card_number_field = 'number',
+			omise_card_fields = {
+				'name' : $('#omise_card_name'),
+				'number' : $('#omise_card_number'),
+				'expiration_month' : $('#omise_card_expiration_month'),
+				'expiration_year' : $('#omise_card_expiration_year'),
+				'security_code' : $('#omise_card_security_code')
+			};
+
+		$.each(omise_card_fields, function(index, field) {
+			omise_card[index] = (index === omise_card_number_field) ? field.val().replace(/\s/g, '') : field.val();
+			if ("" === omise_card[index]) {
+				errors.push(omise_params['required_card_' + index]);
+			}
+		});
+
+		if (errors.length > 0) {
+			showError(errors);
+			$form.unblock();
+			return false;
+		}
+
+		hideError();
 
-				hideError();
-
-				if(Omise) {
-					Omise.setPublicKey(omise_params.key);
-					Omise.createToken("card", omise_card, function (statusCode, response) {
-						if (statusCode == 200) {
-							$.each(omise_card_fields, function(index, field) {
-								field.val('');
-							});
-
-							$form.append('<input type="hidden" class="omise_token" name="omise_token" value="' + response.id + '"/>');
-							$form.submit();
-						} else {
-							handleTokensApiError(response);
-						};
+		if(Omise) {
+			Omise.setPublicKey(omise_params.key);
+			Omise.createToken("card", omise_card, function (statusCode, response) {
+				if (statusCode == 200) {
+					$.each(omise_card_fields, function(index, field) {
+						field.val('');
 					});
-				} else {
-					showError(omise_params.cannot_load_omisejs + '<br/>' + omise_params.check_internet_connection);
-					$form.unblock();
-				}
 
-				return false;
-			}
+					$form.append('<input type="hidden" class="omise_token" name="omise_token" value="' + response.id + '"/>');
+					$form.submit();
+				} else {
+					handleTokensApiError(response);
+				};
+			});
+		} else {
+			showError(omise_params.cannot_load_omisejs + '<br/>' + omise_params.check_internet_connection);
+			$form.unblock();
 		}
 	}
 
@@ -187,6 +192,57 @@
 		return omise_params[message] ? omise_params[message] : message;
 	}
 
+	function requestCardToken() {
+		hideError()
+		$form.block({
+			message: null,
+			overlayCSS: {
+				background: '#fff url(' + wc_checkout_params.ajax_loader_url + ') no-repeat center',
+				backgroundSize: '16px 16px',
+				opacity: 0.6
+			}
+		});
+		const billingAddress = {
+			country: document.getElementById('billing_country').value,
+			postal_code: document.getElementById('billing_postcode').value,
+			state: document.getElementById('billing_state').value,
+			city: document.getElementById('billing_city').value,
+			street1: document.getElementById('billing_address_1').value,
+			street2: document.getElementById('billing_address_2').value,
+		}
+		OmiseCard.requestCardToken(billingAddress)
+	}
+
+	function handleCreateOrder(payload) {
+		$form.unblock();
+		if (payload.token) {
+			if (payload.remember) {
+				$('.omise_save_customer_card').val(payload.remember)
+			}
+			$form.append('<input type="hidden" class="omise_token" name="omise_token" value="' + payload.token + '"/>');
+			$form.submit();
+		}
+	}
+
+	if(Boolean(omise_params.embedded_form_enabled)) {
+		$(document).on('updated_checkout', function () {
+			showOmiseEmbeddedCardForm({
+				element: document.getElementById('omise-card'),
+				publicKey: omise_params.key,
+				hideRememberCard: HIDE_REMEMBER_CARD,
+				locale: LOCALE,
+				theme: CARD_FORM_THEME ?? 'light',
+				design: FORM_DESIGN,
+				brandIcons: CARD_BRAND_ICONS,
+				onSuccess: handleCreateOrder,
+				onError: (error) => {
+					showError(error)
+					$form.unblock()
+				}
+			})
+		});
+	}
+
 	$(function () {
 		$('body').on('checkout_error', function () {
 			$('.omise_token').remove();
diff --git a/includes/admin/class-omise-page-card-form-customization.php b/includes/admin/class-omise-page-card-form-customization.php
new file mode 100644
index 00000000..b27e38f9
--- /dev/null
+++ b/includes/admin/class-omise-page-card-form-customization.php
@@ -0,0 +1,158 @@
+<?php
+
+defined('ABSPATH') or die('No direct script access allowed.');
+
+if (class_exists('Omise_Page_Settings')) {
+	return;
+}
+
+class Omise_Page_Card_From_Customization extends Omise_Admin_Page
+{
+	private static $instance;
+
+	public static function get_instance()
+	{
+		if (!isset(self::$instance)) {
+			self::$instance = new self;
+		}
+
+		return self::$instance;
+	}
+
+	const PAGE_NAME = 'omise_card_form_customization_option';
+
+	private function get_light_theme()
+	{
+		return [
+			'font' => [
+				'name' => 'Poppins',
+				'size' => 16,
+			],
+			'input' => [
+				'height' => '44px',
+				'border_radius' => '4px',
+				'border_color' => '#ced3de',
+				'active_border_color' => '#1451cc',
+				'background_color' => '#ffffff',
+				'label_color' => '#212121',
+				'text_color' => '#212121',
+				'placeholder_color' => '#98a1b2',
+			],
+			'checkbox' => [
+				'text_color' => '#1c2433',
+				'theme_color' => '#1451cc',
+			]
+		];
+	}
+
+	private function get_dark_theme()
+	{
+		return [
+			'font' => [
+				'name' => 'Poppins',
+				'size' => 16,
+			],
+			'input' => [
+				'height' => '44px',
+				'border_radius' => '4px',
+				'border_color' => '#475266',
+				'active_border_color' => '#475266',
+				'background_color' => '#131926',
+				'label_color' => '#E6EAF2',
+				'text_color' => '#212121',
+				'placeholder_color' => '#DBDBDB',
+			],
+			'checkbox' => [
+				'text_color' => '#E6EAF2',
+				'theme_color' => '#1451CC',
+			]
+		];
+	}
+
+	protected function get_default_design_setting()
+	{
+		$theme = (new Omise_Payment_Creditcard())->get_option('card_form_theme');
+		return (empty($theme) || $theme == 'light')
+			? $this->get_light_theme()
+			: $this->get_dark_theme();
+	}
+
+	/**
+	 * get design setting
+	 */
+	public function get_design_setting()
+	{
+		$formDesign = get_option(self::PAGE_NAME);
+		if (empty($formDesign)) {
+			$formDesign = $this->get_default_design_setting();
+		}
+		return $formDesign;
+	}
+
+	/**
+	 * @param array $data
+	 *
+	 * @since  3.1
+	 */
+	protected function save($data)
+	{
+		if (!isset($data['omise_setting_page_nonce']) || !wp_verify_nonce($data['omise_setting_page_nonce'], 'omise-setting')) {
+			wp_die(__('You are not allowed to modify the settings from a suspicious source.', 'omise'));
+		}
+		$options = [];
+		$defaultValues = $this->get_default_design_setting();
+
+		// Sanitize the field POST params
+		// the fist loop get the component name. i.e input, checkout, font
+		// and send loop get the styling key of the component. i.e name, size, border, color
+		foreach ($defaultValues as $componentKey => $componentValue) {
+			foreach ($componentValue as $key => $val) {
+				$options[$componentKey][$key] = sanitize_text_field($data[$componentKey][$key]);
+			}
+		}
+		update_option(self::PAGE_NAME, $options);
+		$this->add_message('message', "Update has been saved!");
+	}
+
+	/**
+	 * @param array $data
+	 *
+	 * @since  3.1
+	 */
+	protected function reset_default_setting($data)
+	{
+		if (
+			!isset($data['omise_setting_page_nonce']) ||
+			!wp_verify_nonce($data['omise_setting_page_nonce'], 'omise-setting')
+		) {
+			wp_die(__('You are not allowed to modify the settings from a suspicious source.', 'omise'));
+		}
+
+		update_option(self::PAGE_NAME, null);
+
+		$this->add_message(
+			'message',
+			"Setting have been reset!"
+		);
+	}
+
+	/**
+	 * @since  3.1
+	 */
+	public static function render()
+	{
+		$page = self::get_instance();
+
+		if (isset($_POST['omise_customization_submit'])) {
+			$page->save($_POST);
+		}
+
+		if (isset($_POST['omise_customization_reset'])) {
+			$page->reset_default_setting($_POST);
+		}
+
+		$formDesign = $page->get_design_setting();
+
+		include_once __DIR__ . '/views/omise-page-card-form-customization.php';
+	}
+}
diff --git a/includes/admin/views/omise-page-card-form-customization.php b/includes/admin/views/omise-page-card-form-customization.php
new file mode 100644
index 00000000..d12e44d6
--- /dev/null
+++ b/includes/admin/views/omise-page-card-form-customization.php
@@ -0,0 +1,194 @@
+<?php
+  $assetUrl = Omise::get_assets_url();
+  $omiseCardGateway = new Omise_Payment_Creditcard();
+  $cardFormTheme = $omiseCardGateway->get_option('card_form_theme');
+  $cardIcons = $omiseCardGateway->get_card_icons();
+  $publicKey = Omise()->settings()->public_key();
+?>
+
+<link rel="stylesheet" href="<?php echo $assetUrl . '/css/card-form-customization.css'; ?>">
+
+<div class="wrap omise">
+
+  <?php $page->display_messages(); ?>
+
+  <h2><?php echo _e('Omise card form customization', 'omise'); ?></h2>
+
+  <form method="POST">
+
+    <table class="form-table">
+      <tr>
+        <td class="text-extra-bold" colspan="2">Font</td>
+      </tr>
+
+      <tr>
+        <td class="text-bold" style="width: 250px;">Font Name</td>
+        <td>
+          <select class="select-input" name="font[name]">
+            <option value="Poppins">Poppins</option>
+            <option value="Circular" selected>Circular</option>
+          </select>
+          <div class="description">Match font used in form with your selected font</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold" style="width: 250px;">Font Size</td>
+        <td>
+          <select class="select-input" name="font[size]">
+            <option value="16">Large (16px)</option>
+            <option value="14">Medium (14px)</option>
+            <option value="12">Small (12px)</option>
+          </select>
+          <div class="description">Custom font size in your form</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-extra-bold" colspan="2">Form</td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Input height</td>
+        <td>
+          <select class="select-input" name="input[height]">
+            <option value="40px">Small (40px)</option>
+            <option value="44px">Medium (44px)</option>
+            <option value="48px">Large (48px)</option>
+            <option value="52px">Extra Large (52px)</option>
+          </select>
+          <div class="description">Custom your input height</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Input border radius</td>
+        <td>
+          <select class="select-input" name="input[border_radius]">
+            <option value="0px">Square</option>
+            <option value="4px">Small</option>
+            <option value="8px">Medium</option>
+            <option value="16px">Large</option>
+            <option value="50px">Round</option>
+          </select>
+          <div class="description">Custom your border radius</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Input border color</td>
+        <td>
+          <div class="color-input-container">
+            <input class="color-input" name="input[border_color]" type="color" value="#ced3de">
+          </div>
+          <div class="description">Select border color to apply with your input</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Input active border color</td>
+        <td>
+          <div class="color-input-container">
+            <input class="color-input" name="input[active_border_color]" type="color" value="#1451CC">
+          </div>
+          <div class="description">Select active border color to apply with your input</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Input background color</td>
+        <td>
+          <div class="color-input-container">
+            <input class="color-input" name="input[background_color]" type="color" value="#ffffff">
+          </div>
+          <div class="description">Select background color to apply with your input</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Input label color</td>
+        <td>
+          <div class="color-input-container">
+            <input class="color-input" name="input[label_color]" type="color" value="#212121">
+          </div>
+          <div class="description">Select label color to apply with your input</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Input text color</td>
+        <td>
+          <div class="color-input-container">
+            <input class="color-input" name="input[text_color]" type="color" value="#212121">
+          </div>
+          <div class="description">Select text color to apply with your input</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Input placeholder color</td>
+        <td>
+          <div class="color-input-container">
+            <input class="color-input" name="input[placeholder_color]" type="color" value="#98A1B2">
+          </div>
+          <div class="description">Select placeholder text color to apply with your input</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Checkbox text color</td>
+        <td>
+          <div class="color-input-container">
+            <input class="color-input" name="checkbox[text_color]" type="color" value="#1C2433">
+          </div>
+          <div class="description">Select your text color to apply with your checkbox</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="text-bold">Checkbox theme color</td>
+        <td>
+          <div class="color-input-container">
+            <input class="color-input" name="checkbox[theme_color]" type="color" value="#1451CC">
+          </div>
+          <div class="description">Select your theme color to apply with your checkbox</div>
+        </td>
+      </tr>
+
+      <tr>
+        <td>
+          <input type="submit" name="omise_customization_submit" class="button button-primary" value="Save settings">
+          <button id="form-preview" class="button button-preview">Preview</button>
+        </td>
+        <td>
+          <input type="submit" name="omise_customization_reset" class="button button-reset" value="Reset to default settings">
+        </td>
+      </tr>
+
+    </table>
+
+    <input type="hidden" name="omise_setting_page_nonce" value="<?= wp_create_nonce('omise-setting'); ?>" />
+  </form>
+
+  <div class="omise-modal" id="omise-modal">
+    <div class="content">
+      <div class="body">
+        <div id="omise-card" style="width:100%"></div>
+      </div>
+      <div class="footer">
+        <button id="close-form-preview" class="button button-preview">Close Preview</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="<?php echo Omise::OMISE_JS_LINK ?>"></script>
+<script>
+  window.PUBLIC_KEY = `<?php echo $publicKey ?>`;
+  window.CARD_FORM_THEME = `<?php echo $cardFormTheme;  ?>`;
+  window.DEFAULT_FORM_DESIGN = JSON.parse(`<?php echo json_encode($formDesign) ?>`);
+  window.CARD_BRAND_ICONS = JSON.parse(`<?php echo json_encode($cardIcons) ?>`);
+  window.LOCALE = `<?php echo get_locale(); ?>`;
+</script>
+<script src="<?php echo $assetUrl . '/javascripts/omise-embedded-card.js'; ?>"></script>
+<script src="<?php echo $assetUrl . '/javascripts/card-form-customization.js'; ?>"></script>
diff --git a/includes/class-omise-admin.php b/includes/class-omise-admin.php
index 15ef7261..3c2b932f 100644
--- a/includes/class-omise-admin.php
+++ b/includes/class-omise-admin.php
@@ -1,8 +1,9 @@
 <?php
 defined( 'ABSPATH' ) or die( "No direct script access allowed." );
 
-if ( ! class_exists( 'Omise_Admin' ) ) {
-	class Omise_Admin {
+if (!class_exists('Omise_Admin')) {
+	class Omise_Admin
+	{
 		/**
 		 * The Omise Instance.
 		 *
@@ -13,8 +14,9 @@ class Omise_Admin {
 		/**
 		 * @return \Omise_Admin  The instance.
 		 */
-		public static function get_instance() {
-			if ( ! self::$the_instance ) {
+		public static function get_instance()
+		{
+			if (!self::$the_instance) {
 				self::$the_instance = new self();
 			}
 
@@ -24,8 +26,8 @@ public static function get_instance() {
 		/**
 		 * @since 3.3
 		 */
-		public function init() {
-			require_once OMISE_WOOCOMMERCE_PLUGIN_PATH . '/includes/admin/class-omise-admin-page.php';
+		public function init()
+		{
 			require_once OMISE_WOOCOMMERCE_PLUGIN_PATH . '/includes/admin/class-omise-page-settings.php';
 
 			$this->register_admin_menu();
@@ -35,30 +37,67 @@ public function init() {
 		/**
 		 * Register Omise's custom menu to WordPress admin menus.
 		 */
-		public function register_admin_menu() {
-			add_action( 'admin_menu', array( $this, 'wordpress_hook_admin_menu' ) );
+		public function register_admin_menu()
+		{
+			add_action('admin_menu', [$this, 'wordpress_hook_admin_menu']);
+			add_action('admin_menu', [$this, 'wordpress_hook_card_form_customization']);
 		}
 
 		/**
 		 * Callback to $this::register_admin_menu() method.
 		 * Register Omise's custom menu to WordPress admin menus.
 		 */
-		public function wordpress_hook_admin_menu() {
-			add_menu_page( __( 'Opn Payments Settings', 'omise' ), 'Opn Payments', 'manage_options', 'omise', array( $this, 'page_settings') );
+		public function wordpress_hook_admin_menu()
+		{
+			add_menu_page(
+				__('Opn Payments Settings', 'omise'),
+				'Opn Payments',
+				'manage_options',
+				'omise',
+				[$this, 'page_settings']
+			);
+		}
+
+		/**
+		 * Register Omise's card customization page.
+		 */
+		public function wordpress_hook_card_form_customization()
+		{
+			add_submenu_page(
+				null,
+				__('Custom card form customization', 'omise'),
+				Omise_Page_Card_From_Customization::PAGE_NAME,
+				'manage_options',
+				'omise_card_form_customization',
+				[$this, 'card_form_customization']
+			);
 		}
 
 		/**
 		 * Render Omise Setting page.
 		 */
-		public function page_settings() {
+		public function page_settings()
+		{
 			Omise_Page_Settings::render();
 		}
 
+		/**
+		 * Render Omise card form customization page.
+		 */
+		public function card_form_customization()
+		{
+			Omise_Page_Card_From_Customization::render();
+		}
+
 		/**
 		 * @since 3.3
 		 */
-		public function register_woocommerce_filters() {
-			add_filter( 'woocommerce_order_actions', array( $this, 'woocommerce_filter_order_actions' ) );
+		public function register_woocommerce_filters()
+		{
+			add_filter(
+				'woocommerce_order_actions',
+				[$this, 'woocommerce_filter_order_actions']
+			);
 		}
 
 		/**
@@ -70,7 +109,8 @@ public function register_woocommerce_filters() {
 		 *
 		 * @return array
 		 */
-		public function woocommerce_filter_order_actions( $order_actions ) {
+		public function woocommerce_filter_order_actions($order_actions)
+		{
 			global $theorder;
 
 			/** backward compatible with WooCommerce v2.x series **/
diff --git a/includes/class-omise-wc-myaccount.php b/includes/class-omise-wc-myaccount.php
index 4e99d47b..67381b22 100644
--- a/includes/class-omise-wc-myaccount.php
+++ b/includes/class-omise-wc-myaccount.php
@@ -2,7 +2,8 @@
 defined( 'ABSPATH' ) or die( 'No direct script access allowed.' );
 
 if ( ! class_exists( 'Omise_MyAccount' ) ) {
-	class Omise_MyAccount {
+	class Omise_MyAccount
+	{
 		private static $instance;
 		private $omise_customer_id;
 
@@ -26,6 +27,7 @@ private function __construct() {
 			}
 
 			$this->customerCard = new OmiseCustomerCard;
+			$this->omiseCardGateway = new Omise_Payment_Creditcard();
 
 			add_action( 'woocommerce_after_my_account', array( $this, 'init_panel' ) );
 			add_action( 'wp_ajax_omise_delete_card', array( $this, 'omise_delete_card' ) );
@@ -41,9 +43,13 @@ public function init_panel() {
 			if ( ! empty( $this->omise_customer_id ) ) {
 				try {
 					$viewData['existingCards'] = $this->customerCard->get($this->omise_customer_id);
+					$viewData['cardFormTheme'] = $this->omiseCardGateway->get_option('card_form_theme');
+					$viewData['embedded_form_enabled'] = (boolean)$this->omiseCardGateway->get_option('embedded_form_enabled');
+					$viewData['formDesign'] = Omise_Page_Card_From_Customization::get_instance()->get_design_setting();
+					$viewData['cardIcons'] = $this->omiseCardGateway->get_card_icons();
+					$this->register_omise_my_account_scripts();
 
 					Omise_Util::render_view( 'templates/myaccount/my-card.php', $viewData );
-					$this->register_omise_my_account_scripts();
 				} catch (Exception $e) {
 					// nothing.
 				}
@@ -56,12 +62,20 @@ public function init_panel() {
 		public function register_omise_my_account_scripts() {
 			wp_enqueue_script(
 				'omise-js',
-				'https://cdn.omise.co/omise.js',
+				Omise::OMISE_JS_LINK,
 				array( 'jquery' ),
 				WC_VERSION,
 				true
 			);
 
+			wp_enqueue_script(
+				'embedded-js',
+				plugins_url( '/assets/javascripts/omise-embedded-card.js', dirname( __FILE__ ) ),
+				[],
+				OMISE_WOOCOMMERCE_PLUGIN_VERSION,
+				true
+			);
+
 			wp_enqueue_script(
 				'omise-myaccount-card-handler',
 				plugins_url( '/assets/javascripts/omise-myaccount-card-handler.js', dirname( __FILE__ ) ),
@@ -104,7 +118,8 @@ public function	getParamsForJS()
 				'expiration date cannot be in the past, number is invalid, and brand not supported (unknown)' => __( 'expiration date cannot be in the past, number is invalid, and brand not supported (unknown)', 'omise' ),
 				'number is invalid and brand not supported (unknown)' => __( 'number is invalid and brand not supported (unknown)', 'omise' ),
 				'expiration year is invalid, expiration date cannot be in the past, number is invalid, and brand not supported (unknown)' => __( 'expiration year is invalid, expiration date cannot be in the past, number is invalid, and brand not supported (unknown)', 'omise' ),
-				'expiration month is not between 1 and 12, expiration date is invalid, number is invalid, and brand not supported (unknown)' => __('expiration month is not between 1 and 12, expiration date is invalid, number is invalid, and brand not supported (unknown)', 'omise')
+				'expiration month is not between 1 and 12, expiration date is invalid, number is invalid, and brand not supported (unknown)' => __('expiration month is not between 1 and 12, expiration date is invalid, number is invalid, and brand not supported (unknown)', 'omise'),
+				'embedded_form_enabled'	=> (boolean)$this->omiseCardGateway->get_option('embedded_form_enabled')
 			];
 		}
 
@@ -151,7 +166,7 @@ public function omise_create_card()
 			}
 
 			try {
-				$card = $this->customerCard->create($token, $omiseCustomerId);
+				$card = $this->customerCard->create($this->omise_customer_id, $token);
 				echo json_encode( $card );
 			} catch( Exception $e ) {
 				echo json_encode( array(
diff --git a/includes/classes/class-omise-card-image.php b/includes/classes/class-omise-card-image.php
index b8891684..eb840f76 100644
--- a/includes/classes/class-omise-card-image.php
+++ b/includes/classes/class-omise-card-image.php
@@ -61,6 +61,24 @@ public static function get_diners_image() {
 			return self::get_image( 'diners.svg', 'Diners Club' );
 		}
 
+		/**
+		 * Return the HTML &lt;img&gt; element of Discover logo
+		 *
+		 * @return string
+		 */
+		public static function get_discover_image() {
+			return self::get_image( 'discover.svg', 'Discover' );
+		}
+
+		/**
+		 * Return the default setting of display the Discover logo
+		 *
+		 * @return string
+		 */
+		public static function get_discover_default_display() {
+			return 'no';
+		}
+
 		/**
 		 * Return the default setting of display the JCB logo
 		 *
@@ -129,6 +147,16 @@ public static function is_amex_enabled( $setting ) {
 			return false;
 		}
 
+		/**
+		 * Check whether the setting for Discover logo is configured and it was set to display or not display
+		 *
+		 * @param mixed $setting The array that contains key for checking the flag
+		 * @return boolean
+		 */
+		public static function is_discover_enabled( $setting ) {
+			return isset( $setting['accept_discover'] ) && $setting['accept_discover'] == 'yes';
+		}
+
 		/**
 		 * Check whether the setting for Diners Club logo is configured and it was set to display or not display
 		 *
diff --git a/includes/classes/class-omise-customer-card.php b/includes/classes/class-omise-customer-card.php
index 445fe047..1cb8ee54 100644
--- a/includes/classes/class-omise-customer-card.php
+++ b/includes/classes/class-omise-customer-card.php
@@ -35,8 +35,9 @@ public function delete($cardId, $customerId)
          * 
          * @return string
          */
-        public function create($customer, $token)
+        public function create($customerId, $token)
         {
+            $customer = $this->customer->get($customerId);
             $customer->update( ['card' => $token ]);
 
             $cards = $customer->cards([
diff --git a/includes/gateway/abstract-omise-payment-base-card.php b/includes/gateway/abstract-omise-payment-base-card.php
index 22cf12a7..5e223bea 100644
--- a/includes/gateway/abstract-omise-payment-base-card.php
+++ b/includes/gateway/abstract-omise-payment-base-card.php
@@ -27,7 +27,8 @@ public function charge($order_id, $order)
 		$omise_customer_id = $this->is_test() ? $user->test_omise_customer_id : $user->live_omise_customer_id;
 
 		// Saving card.
-		if (isset($_POST['omise_save_customer_card']) && empty($card_id)) {
+		$saveCustomerCard = $_POST['omise_save_customer_card'];
+		if (isset($saveCustomerCard) && !empty($saveCustomerCard) && empty($card_id)) {
 			$cardDetails = $this->saveCard($omise_customer_id, $token, $order_id, $user->ID);
 			$omise_customer_id = $cardDetails['customer_id'];
 			$card_id = $cardDetails['card_id'];
@@ -110,9 +111,10 @@ public function saveCard($omise_customer_id, $token, $order_id, $user_id)
 			}
 
 			try {
-				$customer->get($omise_customer_id);
 				$customerCard = new OmiseCustomerCard;
-				$card = $customerCard->create($customer, $token);
+
+				// TODO: Save customer with $omise_customer_id from Embedded form
+				$card = $customerCard->create($omise_customer_id, $token);
 
 				return [
 					'customer_id' => $omise_customer_id,
@@ -127,6 +129,7 @@ public function saveCard($omise_customer_id, $token, $order_id, $user_id)
 
 				// Saved customer ID is not found so we create a new customer and save the customer ID
 				$customer_data = $customer->create($user_id, $order_id, $customer_data);
+
 				return [
 					'customer_id' => $customer_data['customer_id'],
 					'card_id' => $customer_data['card_id']
@@ -233,12 +236,20 @@ public function omise_scripts() {
 		if ( is_checkout() && $this->is_available() ) {
 			wp_enqueue_script(
 				'omise-js',
-				'https://cdn.omise.co/omise.js',
+				Omise::OMISE_JS_LINK,
 				[ 'jquery' ],
 				OMISE_WOOCOMMERCE_PLUGIN_VERSION,
 				true
 			);
 
+			wp_enqueue_script(
+				'embedded-js',
+				plugins_url( '../../assets/javascripts/omise-embedded-card.js', __FILE__ ),
+				[],
+				OMISE_WOOCOMMERCE_PLUGIN_VERSION,
+				true
+			);
+
 			wp_enqueue_script(
 				'omise-payment-form-handler',
 				plugins_url( '../../assets/javascripts/omise-payment-form-handler.js', __FILE__ ),
@@ -260,6 +271,8 @@ public function omise_scripts() {
 	 */
 	public function getParamsForJS()
 	{
+		$omiseCardGateway = new Omise_Payment_Creditcard();
+
 		return [
 			'key'                            => $this->public_key(),
 			'required_card_name'             => __(
@@ -333,7 +346,8 @@ public function getParamsForJS()
 			'expiration month is not between 1 and 12, expiration date is invalid, number is invalid, and brand not supported (unknown)' => __(
 				'expiration month is not between 1 and 12, expiration date is invalid, number is invalid, and brand not supported (unknown)',
 				'omise'
-			)
+			),
+			'embedded_form_enabled'	=> (boolean)$omiseCardGateway->get_option('embedded_form_enabled')
 		];
 	}
 }
diff --git a/includes/gateway/class-omise-payment-creditcard.php b/includes/gateway/class-omise-payment-creditcard.php
index c58f4669..39008dd0 100644
--- a/includes/gateway/class-omise-payment-creditcard.php
+++ b/includes/gateway/class-omise-payment-creditcard.php
@@ -2,7 +2,10 @@
 defined( 'ABSPATH' ) or die( 'No direct script access allowed.' );
 
 class Omise_Payment_Creditcard extends Omise_Payment_Base_Card {
-	public function __construct() {
+	const EMBEDDDED_FORM_ENABLED = true;
+
+	public function __construct()
+	{
 		parent::__construct();
 
 		$this->id                 = 'omise';
@@ -27,6 +30,8 @@ public function __construct() {
 		$this->payment_action       = $this->get_option( 'payment_action' );
 		$this->restricted_countries = array( 'TH', 'JP', 'SG', 'MY' );
 
+		$this->register_omise_credit_card_scripts();
+
 		add_action( 'woocommerce_api_' . $this->id . '_callback', 'Omise_Callback::execute' );
 		add_action( 'woocommerce_update_options_payment_gateways_' . $this->id, array( $this, 'process_admin_options' ) );
 		add_action( 'wp_enqueue_scripts', array( $this, 'omise_scripts' ) );
@@ -66,7 +71,7 @@ function init_form_fields() {
 			),
 			array(
 				'advanced' => array(
-					'title'       => __( 'Advance Settings', 'omise' ),
+					'title'       => __( 'Advanced Settings', 'omise' ),
 					'type'        => 'title'
 				),
 				'payment_action' => array(
@@ -81,6 +86,31 @@ function init_form_fields() {
 					),
 					'desc_tip'    => true
 				),
+				'embedded_form_enabled' => [
+					'title'       => __( 'Secure form', 'omise' ),
+					'type'        => 'select',
+					'description' => __( 'Try the new secure form to accept card payments. The new form features additional controls to ensure PCI-DSS compliance.<br /><strong><em>Using this form will be mandatory in a future release</em></strong>.', 'omise' ),
+					'default'     => !self::EMBEDDDED_FORM_ENABLED,
+					'options' => array(
+						!self::EMBEDDDED_FORM_ENABLED => __( 'No', 'omise' ),
+						self::EMBEDDDED_FORM_ENABLED => __( 'Yes', 'omise' )
+					)
+				],
+
+				'card_form_theme' => [
+					'title'       => __( 'Secure form theme', 'omise' ),
+					'type'        => 'select',
+					'default'     => 'light',
+					'class'       => 'wc-enhanced-select',
+					'options'     => array(
+						'light' => __( 'Light', 'omise' ),
+						'dark'  => __( 'Dark', 'omise' )
+					),
+					'description' => wp_kses(
+						__( 'Credit / Debit card form design on checkout page. <br /> <a href="admin.php?page=omise_card_form_customization">Click here for more card form customization.</a>', 'omise' ),
+						['a' => ['href' => []], 'br' => []]
+					),
+				],
 				'accept_visa' => array(
 					'title'       => __( 'Supported card icons', 'omise' ),
 					'type'        => 'checkbox',
@@ -106,6 +136,12 @@ function init_form_fields() {
 					'css'         => Omise_Card_Image::get_css(),
 					'default'     => Omise_Card_Image::get_diners_default_display()
 				),
+				'accept_discover' => array(
+					'type'        => 'checkbox',
+					'label'       => Omise_Card_Image::get_discover_image(),
+					'css'         => Omise_Card_Image::get_css(),
+					'default'     => Omise_Card_Image::get_discover_default_display()
+				),
 				'accept_amex' => array(
 					'type'        => 'checkbox',
 					'label'       => Omise_Card_Image::get_amex_image(),
@@ -120,6 +156,16 @@ function init_form_fields() {
 		);
 	}
 
+	private function register_omise_credit_card_scripts() {
+		wp_enqueue_script(
+			'omise-credit-card',
+			plugins_url( '../assets/javascripts/omise-payment-credit-card.js', dirname( __FILE__ ) ),
+			array( 'jquery' ),
+			WC_VERSION,
+			true
+		);
+	}
+
 	/**
 	 * @see WC_Payment_Gateway::payment_fields()
 	 * @see woocommerce/includes/abstracts/abstract-wc-payment-gateway.php
@@ -145,45 +191,37 @@ public function payment_fields() {
 			$viewData['user_logged_in'] = false;
 		}
 
+		$viewData['embedded_form_enabled'] = (boolean)$this->get_option('embedded_form_enabled');
+
+		if ($viewData['embedded_form_enabled'] === self::EMBEDDDED_FORM_ENABLED) {
+			$viewData['card_form_theme'] = $this->get_option('card_form_theme');
+			$viewData['card_icons'] = $this->get_card_icons();
+			$viewData['form_design'] = Omise_Page_Card_From_Customization::get_instance()->get_design_setting();
+		}
+
 		Omise_Util::render_view( 'templates/payment/form.php', $viewData );
 	}
 
 	/**
-	 * Get icons of all supported card types
-	 *
-	 * @see WC_Payment_Gateway::get_icon()
+	 * Get card icons for credit card form
 	 */
-	public function get_icon() {
-		$icon = '';
-
-		// TODO: Refactor 'Omise_Card_Image' class that we don't need to pass
-		//       these options to check outside this class.
-		$card_icons['accept_amex']       = $this->get_option( 'accept_amex' );
-		$card_icons['accept_diners']     = $this->get_option( 'accept_diners' );
-		$card_icons['accept_jcb']        = $this->get_option( 'accept_jcb' );
-		$card_icons['accept_mastercard'] = $this->get_option( 'accept_mastercard' );
-		$card_icons['accept_visa']       = $this->get_option( 'accept_visa' );
-
-		if ( Omise_Card_Image::is_visa_enabled( $card_icons ) ) {
-			$icon .= Omise_Card_Image::get_visa_image();
-		}
-
-		if ( Omise_Card_Image::is_mastercard_enabled( $card_icons ) ) {
-			$icon .= Omise_Card_Image::get_mastercard_image();
-		}
-
-		if ( Omise_Card_Image::is_jcb_enabled( $card_icons ) ) {
-			$icon .= Omise_Card_Image::get_jcb_image();
-		}
-
-		if ( Omise_Card_Image::is_diners_enabled( $card_icons ) ) {
-			$icon .= Omise_Card_Image::get_diners_image();
-		}
-
-		if ( Omise_Card_Image::is_amex_enabled( $card_icons ) ) {
-			$icon .= Omise_Card_Image::get_amex_image();
+	public function get_card_icons() {
+		$enable_icons = [];
+		$card_icons = [
+			'amex' => 'accept_amex',
+			'diners' => 'accept_diners',
+			'jcb' => 'accept_jcb',
+			'mastercard' => 'accept_mastercard',
+			'visa' => 'accept_visa',
+			'discover' => 'accept_discover',
+		];
+
+		foreach($card_icons as $key => $value) {
+			if($this->get_option($value) == "yes") {
+				$enable_icons[] = $key;
+			}
 		}
 
-		return empty( $icon ) ? '' : apply_filters( 'woocommerce_gateway_icon', $icon, $this->id );
+		return $enable_icons;
 	}
 }
diff --git a/includes/gateway/class-omise-payment-googlepay.php b/includes/gateway/class-omise-payment-googlepay.php
index 1e1198f4..bc585b63 100644
--- a/includes/gateway/class-omise-payment-googlepay.php
+++ b/includes/gateway/class-omise-payment-googlepay.php
@@ -81,7 +81,7 @@ public function init_form_fields() {
             ),
             array(
                 'advanced' => array(
-                    'title'       => __('Advance Settings', 'omise'),
+                    'title'       => __('Advanced Settings', 'omise'),
                     'type'        => 'title'
                 ),
                 'payment_action' => array(
diff --git a/includes/gateway/class-omise-payment-rabbit-linepay.php b/includes/gateway/class-omise-payment-rabbit-linepay.php
index 88021788..7ac7ce7f 100644
--- a/includes/gateway/class-omise-payment-rabbit-linepay.php
+++ b/includes/gateway/class-omise-payment-rabbit-linepay.php
@@ -58,7 +58,7 @@ public function init_form_fields() {
 			),
 			array(
 				'advanced' => array(
-					'title'       => __( 'Advance Settings', 'omise' ),
+					'title'       => __( 'Advanced Settings', 'omise' ),
 					'type'        => 'title'
 				),
 				'payment_action' => array(
diff --git a/languages/omise-ja.po b/languages/omise-ja.po
index 77ce8d9d..d6092278 100644
--- a/languages/omise-ja.po
+++ b/languages/omise-ja.po
@@ -139,7 +139,7 @@ msgid "Credit / Debit Card"
 msgstr "クレジットカード／デビットカード"
 
 #: includes/gateway/class-omise-payment-creditcard.php:78
-msgid "Advance Settings"
+msgid "Advanced Settings"
 msgstr "詳細設定"
 
 #: includes/gateway/class-omise-payment-creditcard.php:82
diff --git a/languages/omise.pot b/languages/omise.pot
index 8636d27e..b1c5a5fd 100644
--- a/languages/omise.pot
+++ b/languages/omise.pot
@@ -138,7 +138,7 @@ msgid "Credit / Debit Card"
 msgstr "クレジットカード／デビットカード"
 
 #: includes/gateway/class-omise-payment-creditcard.php:78
-msgid "Advance Settings"
+msgid "Advanced Settings"
 msgstr "詳細設定"
 
 #: includes/gateway/class-omise-payment-creditcard.php:82
diff --git a/omise-woocommerce.php b/omise-woocommerce.php
index afd8896f..c8b4f9fb 100644
--- a/omise-woocommerce.php
+++ b/omise-woocommerce.php
@@ -40,6 +40,8 @@ class Omise
 	 */
 	protected static $can_initiate = false;
 
+	CONST OMISE_JS_LINK = 'https://cdn.staging-omise.co/omise.js';
+
 	/**
 	 * @since  3.0
 	 */
@@ -50,6 +52,13 @@ public function __construct()
 		do_action('omise_initiated');
 	}
 
+	/**
+	 * get plugin assess url
+	 */
+	public static function get_assets_url() {
+		return plugins_url('assets' , __FILE__);
+	}
+
 	/**
 	 * Check if all dependencies are loaded
 	 * properly before Omise WooCommerce.
@@ -188,6 +197,8 @@ private function include_classes()
 		require_once OMISE_WOOCOMMERCE_PLUGIN_PATH . '/includes/class-omise-setting.php';
 		require_once OMISE_WOOCOMMERCE_PLUGIN_PATH . '/includes/class-omise-wc-myaccount.php';
 		require_once OMISE_WOOCOMMERCE_PLUGIN_PATH . '/omise-util.php';
+		require_once OMISE_WOOCOMMERCE_PLUGIN_PATH . '/includes/admin/class-omise-admin-page.php';
+		require_once OMISE_WOOCOMMERCE_PLUGIN_PATH . '/includes/admin/class-omise-page-card-form-customization.php';
 	}
 
 	/**
diff --git a/templates/myaccount/my-card.php b/templates/myaccount/my-card.php
index 5acc4ef0..a9dc5a3b 100644
--- a/templates/myaccount/my-card.php
+++ b/templates/myaccount/my-card.php
@@ -36,10 +36,25 @@ class='button delete_card'
 	<h4><?php _e( 'Add new card', 'omise' ); ?></h4>
 	<form name="omise_cc_form" id="omise_cc_form">
 		<?php wp_nonce_field('omise_add_card','omise_add_card_nonce'); ?>
-		<fieldset>
-			<?php require_once( __DIR__ . '/../payment/form-creditcard.php' ); ?>
-			<div class="clear"></div>
-		</fieldset>
+
+		<?php if($viewData['embedded_form_enabled']): ?>
+			<div id="omise-card" style="width:100%; max-width: 400px;"></div>
+		<?php else: ?>
+			<fieldset>
+				<?php require_once( __DIR__ . '/../payment/form-creditcard.php' ); ?>
+				<div class="clear"></div>
+			</fieldset>
+		<?php endif; ?>
+
 	</form>
 	<button id="omise_add_new_card" class="button"><?php _e( 'Save card', 'omise' ); ?></button>
 </div>
+
+<?php if($viewData['embedded_form_enabled']): ?>
+	<script>
+		window.CARD_FORM_THEME = "<?php echo $viewData['cardFormTheme'] ?>";
+		window.FORM_DESIGN = JSON.parse(`<?php echo json_encode($viewData['formDesign']) ?>`);
+		window.CARD_BRAND_ICONS = JSON.parse(`<?php echo json_encode($viewData['cardIcons']) ?>`);
+		window.LOCALE = `<?php echo get_locale(); ?>`;
+	</script>
+<?php endif; ?>
diff --git a/templates/payment/form.php b/templates/payment/form.php
index a5ec159f..f56160eb 100644
--- a/templates/payment/form.php
+++ b/templates/payment/form.php
@@ -1,10 +1,13 @@
-<?php $showExistingCards = $viewData['user_logged_in'] && isset( $viewData['existingCards']['data'] ) && sizeof( $viewData['existingCards']['data'] ) > 0; ?>
+<?php
+	$showExistingCards = $viewData['user_logged_in'] && isset($viewData['existingCards']['data']) && sizeof($viewData['existingCards']['data']) > 0;
+	$hideRememberCard = $viewData['user_logged_in'] ? 'no' : 'yes';
+?>
 
 <div id="omise_cc_form">
-	<?php if ( $showExistingCards ) : ?>
-		<h3><?php _e( 'Use an existing card', 'omise' ); ?></h3>
+	<?php if ($showExistingCards) : ?>
+		<h3><?php _e('Use an existing card', 'omise'); ?></h3>
 		<ul class="omise-customer-card-list">
-			<?php foreach ( $viewData['existingCards']['data'] as $row => $card ) : ?>
+			<?php foreach ($viewData['existingCards']['data'] as $row => $card) : ?>
 				<li class="item">
 					<input <?php echo $row === 0 ? 'checked=checked' : ''; ?> id="card-<?php echo $card['id']; ?>" type="radio" name="card_id" value="<?php echo $card['id']; ?>" />
 					<label for="card-<?php echo $card['id']; ?>">
@@ -16,29 +19,46 @@
 	<?php endif; ?>
 
 	<div>
-		<?php if ( $showExistingCards ) : ?>
+		<?php if($showExistingCards) : ?>
 			<input id="new_card_info" type="radio" name="card_id" value="" />
 			<label id="label-new_card_info" for="new_card_info">
-				<h3><?php _e( 'Create a charge using new card', 'omise' ); ?></h3>
+				<h3><?php _e('Create a charge using new card', 'omise'); ?></h3>
 			</label>
 		<?php endif; ?>
 
-		<fieldset class="omise-new-card-form <?php echo $showExistingCards ? 'card-exists' : ''; ?>">
+		<?php if ($viewData['embedded_form_enabled']): ?>
+			<div class="omise-new-card-form <?php echo $showExistingCards ? 'card-exists' : ''; ?>">
+				<div id="omise-card" style="width:100%; max-width: 400px;"></div>
+				<input type="hidden" name="omise_save_customer_card" class="omise_save_customer_card" />
+				<div class="clear"></div>
+			</div>
+		<?php else: ?>
+			<fieldset class="omise-new-card-form <?php echo $showExistingCards ? 'card-exists' : ''; ?>">
 
-			<?php require_once( 'form-creditcard.php' ); ?>
+				<?php require_once('form-creditcard.php'); ?>
 
-			<div class="clear"></div>
+				<div class="clear"></div>
 
-			<?php if ( $viewData['user_logged_in'] ) : ?>
-				<div class="omise-form-child omise-remember-card">
-					<input type="checkbox" name="omise_save_customer_card" id="omise_save_customer_card" />
-					<label for="omise_save_customer_card" class="inline">
-						<?php _e( 'Remember this card', 'omise' ); ?>
-					</label>
-				</div>
-			<?php endif; ?>
+				<?php if ($viewData['user_logged_in']) : ?>
+					<div class="omise-form-child omise-remember-card">
+						<input type="checkbox" name="omise_save_customer_card" id="omise_save_customer_card" />
+						<label for="omise_save_customer_card" class="inline">
+							<?php _e('Remember this card', 'omise'); ?>
+						</label>
+					</div>
+				<?php endif; ?>
 
-			<div class="clear"></div>
-		</fieldset>
+				<div class="clear"></div>
+			</fieldset>
+		<?php endif; ?>
 	</div>
 </div>
+<?php if($viewData['embedded_form_enabled']): ?>
+	<script>
+		window.CARD_FORM_THEME = "<?php echo $viewData['card_form_theme'] ?>";
+		window.CARD_BRAND_ICONS = JSON.parse(`<?php echo json_encode($viewData['card_icons']) ?>`);
+		window.FORM_DESIGN = JSON.parse(`<?php echo json_encode($viewData['form_design']) ?>`);
+		window.LOCALE = `<?php echo get_locale(); ?>`;
+		window.HIDE_REMEMBER_CARD = `<?php echo $hideRememberCard ?>` == 'yes' ? true : false;
+	</script>
+<?php endif; ?>

From 4138aab99147f879903ffea4a40e4eed46fd974a Mon Sep 17 00:00:00 2001
From: Aashish Gurung <101558497+aashishgurung@users.noreply.github.com>
Date: Tue, 28 Mar 2023 09:19:49 +0700
Subject: [PATCH 2/6] [ENGA3-1056]: Updated the wrong URL. (#357)

Co-authored-by: Aashish <aashish@omise.co>
---
 omise-woocommerce.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/omise-woocommerce.php b/omise-woocommerce.php
index c8b4f9fb..89bde6df 100644
--- a/omise-woocommerce.php
+++ b/omise-woocommerce.php
@@ -40,7 +40,7 @@ class Omise
 	 */
 	protected static $can_initiate = false;
 
-	CONST OMISE_JS_LINK = 'https://cdn.staging-omise.co/omise.js';
+	CONST OMISE_JS_LINK = 'https://cdn.omise.co/omise.js';
 
 	/**
 	 * @since  3.0

From eea173ca4b7b2da4ba3ddd4cfbb5c1b9af249ff4 Mon Sep 17 00:00:00 2001
From: Aashish Gurung <101558497+aashishgurung@users.noreply.github.com>
Date: Wed, 29 Mar 2023 17:07:15 +0700
Subject: [PATCH 3/6] [ENGA3-116]: Added logic to show failure page when
 shopeepay payment is cancelled. (#361)

Co-authored-by: Aashish <aashish@omise.co>
---
 includes/class-omise-callback.php | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/includes/class-omise-callback.php b/includes/class-omise-callback.php
index 827cdd42..736a001a 100644
--- a/includes/class-omise-callback.php
+++ b/includes/class-omise-callback.php
@@ -29,7 +29,6 @@ public function __construct( $order ) {
 	public static function execute()
 	{
 		$order_id = isset( $_GET['order_id'] ) ? sanitize_text_field( $_GET['order_id'] ) : null;
-		$token = isset( $_GET['token'] ) ? sanitize_text_field( $_GET['token'] ) : null;
 		$order = wc_get_order( $order_id );
 
 		if(!RequestHelper::validateRequest($order->get_meta('token'))) {
@@ -74,6 +73,12 @@ public function validate() {
 		try {
 			$this->charge = $this->fetchCharge($this->order->get_transaction_id());
 
+			// TODO: Remove this if block once the issue is fixed on the server.
+			if ($this->hasShopeepayFailed()) {
+				$this->payment_failed();
+				return;
+			}
+
 			switch ( strtolower( $this->charge['status'] ) ) {
 				case 'successful':
 				case 'failed':
@@ -98,6 +103,16 @@ public function validate() {
 		}
 	}
 
+	/**
+	 * TODO: Remove this if block once the issue is fixed on the server.
+	 */
+	private function hasShopeepayFailed()
+	{
+		$isPaymentMethodShopeepay = 'shopeepay' === $this->charge['source']['type'];
+		$isChargePending = 'pending' === $this->charge['status'];
+		return $isPaymentMethodShopeepay && $isChargePending;
+	}
+
 	/**
 	 * Resolving a case of undefined charge status
 	 */
@@ -190,7 +205,10 @@ protected function payment_pending() {
 	 */
 	protected function payment_failed() {
 		$message = __( "It seems we've been unable to process your payment properly:<br/>%s", 'omise' );
-		$failure_message = Omise()->translate( $this->charge['failure_message'] ) . ' (code: ' . $this->charge['failure_code'] . ')';
+		$failure_message = Omise()->translate( $this->charge['failure_message'] );
+		$failure_message .= ($this->charge['failure_code']) ?
+			' (code: ' . $this->charge['failure_code'] . ')'
+			: ' (code: Payment failed)'; // for shopeepay
 
 		$this->order->add_order_note( sprintf( wp_kses( __( 'OMISE: Payment failed.<br/>%s', 'omise' ), array( 'br' => array() ) ), $failure_message ) );
 		$this->order->update_status( 'failed' );

From 6c4cd4c84781eed651fcf5173f58e05add945f27 Mon Sep 17 00:00:00 2001
From: Aashish Gurung <101558497+aashishgurung@users.noreply.github.com>
Date: Wed, 29 Mar 2023 17:08:10 +0700
Subject: [PATCH 4/6] [ENGA3-1084]: Track the adoption of the embedded form
 (#359)

* [ENGA3-1084]: Added a data in the metadata of the charge for credit card payment to track embedded form adoption.

* [ENGA3-1084]: Refactored the prepareChargeData. Changed the key embedded_form to secure_form to maintain consistency with the label and other porject.

---------

Co-authored-by: Aashish <aashish@omise.co>
---
 .../omise-myaccount-card-handler.js           |  4 ++--
 .../javascripts/omise-payment-credit-card.js  |  2 +-
 .../javascripts/omise-payment-form-handler.js |  4 ++--
 ...ass-omise-page-card-form-customization.php |  2 +-
 includes/class-omise-wc-myaccount.php         |  4 ++--
 .../abstract-omise-payment-base-card.php      | 19 +++++++++++++++++--
 .../class-omise-payment-creditcard.php        | 14 +++++++-------
 includes/gateway/class-omise-payment.php      |  8 ++++++--
 templates/myaccount/my-card.php               |  4 ++--
 templates/payment/form.php                    |  4 ++--
 10 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/assets/javascripts/omise-myaccount-card-handler.js b/assets/javascripts/omise-myaccount-card-handler.js
index 30a3e581..da0072dd 100755
--- a/assets/javascripts/omise-myaccount-card-handler.js
+++ b/assets/javascripts/omise-myaccount-card-handler.js
@@ -60,7 +60,7 @@
 			}
 		});
 
-		if(Boolean(parseInt(omise_params.embedded_form_enabled))) {
+		if(Boolean(parseInt(omise_params.secure_form_enabled))) {
 			hideError();
 			OmiseCard.requestCardToken()
 		} else {
@@ -169,7 +169,7 @@
 		);
 	}
 
-	if(Boolean(parseInt(omise_params.embedded_form_enabled))) {
+	if(Boolean(parseInt(omise_params.secure_form_enabled))) {
 		showOmiseEmbeddedCardForm({
 			element: document.getElementById('omise-card'),
 			publicKey: omise_params.key,
diff --git a/assets/javascripts/omise-payment-credit-card.js b/assets/javascripts/omise-payment-credit-card.js
index d09bd04a..e4b7d0fc 100644
--- a/assets/javascripts/omise-payment-credit-card.js
+++ b/assets/javascripts/omise-payment-credit-card.js
@@ -1,5 +1,5 @@
 (function ($) {
-	const creditCardFormType = $('#woocommerce_omise_embedded_form_enabled');
+	const creditCardFormType = $('#woocommerce_omise_secure_form_enabled');
 	const cardFormTheme = $('#woocommerce_omise_card_form_theme');
 	const cardFormThemeParent = cardFormTheme.closest("tr[valign='top']");
 
diff --git a/assets/javascripts/omise-payment-form-handler.js b/assets/javascripts/omise-payment-form-handler.js
index d3626ccd..a3672aa9 100755
--- a/assets/javascripts/omise-payment-form-handler.js
+++ b/assets/javascripts/omise-payment-form-handler.js
@@ -58,7 +58,7 @@
 			}
 
 			if (0 === $('input.omise_token').length) {
-				(Boolean(omise_params.embedded_form_enabled))
+				(Boolean(omise_params.secure_form_enabled))
 					? requestCardToken()
 					: traditionalForm();
 				return false;
@@ -224,7 +224,7 @@
 		}
 	}
 
-	if(Boolean(omise_params.embedded_form_enabled)) {
+	if(Boolean(omise_params.secure_form_enabled)) {
 		$(document).on('updated_checkout', function () {
 			showOmiseEmbeddedCardForm({
 				element: document.getElementById('omise-card'),
diff --git a/includes/admin/class-omise-page-card-form-customization.php b/includes/admin/class-omise-page-card-form-customization.php
index b27e38f9..ce325705 100644
--- a/includes/admin/class-omise-page-card-form-customization.php
+++ b/includes/admin/class-omise-page-card-form-customization.php
@@ -59,7 +59,7 @@ private function get_dark_theme()
 				'active_border_color' => '#475266',
 				'background_color' => '#131926',
 				'label_color' => '#E6EAF2',
-				'text_color' => '#212121',
+				'text_color' => '#ffffff',
 				'placeholder_color' => '#DBDBDB',
 			],
 			'checkbox' => [
diff --git a/includes/class-omise-wc-myaccount.php b/includes/class-omise-wc-myaccount.php
index 67381b22..101e7faf 100644
--- a/includes/class-omise-wc-myaccount.php
+++ b/includes/class-omise-wc-myaccount.php
@@ -44,7 +44,7 @@ public function init_panel() {
 				try {
 					$viewData['existingCards'] = $this->customerCard->get($this->omise_customer_id);
 					$viewData['cardFormTheme'] = $this->omiseCardGateway->get_option('card_form_theme');
-					$viewData['embedded_form_enabled'] = (boolean)$this->omiseCardGateway->get_option('embedded_form_enabled');
+					$viewData['secure_form_enabled'] = (boolean)$this->omiseCardGateway->get_option('secure_form_enabled');
 					$viewData['formDesign'] = Omise_Page_Card_From_Customization::get_instance()->get_design_setting();
 					$viewData['cardIcons'] = $this->omiseCardGateway->get_card_icons();
 					$this->register_omise_my_account_scripts();
@@ -119,7 +119,7 @@ public function	getParamsForJS()
 				'number is invalid and brand not supported (unknown)' => __( 'number is invalid and brand not supported (unknown)', 'omise' ),
 				'expiration year is invalid, expiration date cannot be in the past, number is invalid, and brand not supported (unknown)' => __( 'expiration year is invalid, expiration date cannot be in the past, number is invalid, and brand not supported (unknown)', 'omise' ),
 				'expiration month is not between 1 and 12, expiration date is invalid, number is invalid, and brand not supported (unknown)' => __('expiration month is not between 1 and 12, expiration date is invalid, number is invalid, and brand not supported (unknown)', 'omise'),
-				'embedded_form_enabled'	=> (boolean)$this->omiseCardGateway->get_option('embedded_form_enabled')
+				'secure_form_enabled'	=> (boolean)$this->omiseCardGateway->get_option('secure_form_enabled')
 			];
 		}
 
diff --git a/includes/gateway/abstract-omise-payment-base-card.php b/includes/gateway/abstract-omise-payment-base-card.php
index 5e223bea..7e3da6e9 100644
--- a/includes/gateway/abstract-omise-payment-base-card.php
+++ b/includes/gateway/abstract-omise-payment-base-card.php
@@ -58,7 +58,11 @@ private function prepareChargeData($order_id, $order, $omise_customer_id, $card_
 				$order
 			),
 			'return_uri' => $this->getRedirectUrl('omise_callback', $order_id, $order),
-			'metadata' => $this->getMetadata($order_id, $order)
+			'metadata' => $this->getMetadata(
+				$order_id,
+				$order,
+				[ 'secure_form_enabled' => $this->getSecureFormState()]
+			)
 		];
 
 		if (!empty($omise_customer_id) && ! empty($card_id)) {
@@ -78,6 +82,17 @@ private function prepareChargeData($order_id, $order, $omise_customer_id, $card_
 		return $data;
 	}
 
+	/**
+	 * Returns the the secure form state in yes/not format
+	 */
+	private function getSecureFormState()
+	{
+		// tracking the embedded form adoption
+		$omiseCardGateway = new Omise_Payment_Creditcard();
+		$secureFormEnabled = $omiseCardGateway->get_option('secure_form_enabled');
+		return (boolean)$secureFormEnabled ? 'yes' : 'no';
+	}
+
 	/**
 	 * Saving card
 	 * 
@@ -347,7 +362,7 @@ public function getParamsForJS()
 				'expiration month is not between 1 and 12, expiration date is invalid, number is invalid, and brand not supported (unknown)',
 				'omise'
 			),
-			'embedded_form_enabled'	=> (boolean)$omiseCardGateway->get_option('embedded_form_enabled')
+			'secure_form_enabled'	=> (boolean)$omiseCardGateway->get_option('secure_form_enabled')
 		];
 	}
 }
diff --git a/includes/gateway/class-omise-payment-creditcard.php b/includes/gateway/class-omise-payment-creditcard.php
index 39008dd0..bf78ccbb 100644
--- a/includes/gateway/class-omise-payment-creditcard.php
+++ b/includes/gateway/class-omise-payment-creditcard.php
@@ -2,7 +2,7 @@
 defined( 'ABSPATH' ) or die( 'No direct script access allowed.' );
 
 class Omise_Payment_Creditcard extends Omise_Payment_Base_Card {
-	const EMBEDDDED_FORM_ENABLED = true;
+	const SECURE_FORM_ENABLED = true;
 
 	public function __construct()
 	{
@@ -86,14 +86,14 @@ function init_form_fields() {
 					),
 					'desc_tip'    => true
 				),
-				'embedded_form_enabled' => [
+				'secure_form_enabled' => [
 					'title'       => __( 'Secure form', 'omise' ),
 					'type'        => 'select',
 					'description' => __( 'Try the new secure form to accept card payments. The new form features additional controls to ensure PCI-DSS compliance.<br /><strong><em>Using this form will be mandatory in a future release</em></strong>.', 'omise' ),
-					'default'     => !self::EMBEDDDED_FORM_ENABLED,
+					'default'     => !self::SECURE_FORM_ENABLED,
 					'options' => array(
-						!self::EMBEDDDED_FORM_ENABLED => __( 'No', 'omise' ),
-						self::EMBEDDDED_FORM_ENABLED => __( 'Yes', 'omise' )
+						!self::SECURE_FORM_ENABLED => __( 'No', 'omise' ),
+						self::SECURE_FORM_ENABLED => __( 'Yes', 'omise' )
 					)
 				],
 
@@ -191,9 +191,9 @@ public function payment_fields() {
 			$viewData['user_logged_in'] = false;
 		}
 
-		$viewData['embedded_form_enabled'] = (boolean)$this->get_option('embedded_form_enabled');
+		$viewData['secure_form_enabled'] = (boolean)$this->get_option('secure_form_enabled');
 
-		if ($viewData['embedded_form_enabled'] === self::EMBEDDDED_FORM_ENABLED) {
+		if ($viewData['secure_form_enabled'] === self::SECURE_FORM_ENABLED) {
 			$viewData['card_form_theme'] = $this->get_option('card_form_theme');
 			$viewData['card_icons'] = $this->get_card_icons();
 			$viewData['form_design'] = Omise_Page_Card_From_Customization::get_instance()->get_design_setting();
diff --git a/includes/gateway/class-omise-payment.php b/includes/gateway/class-omise-payment.php
index 670a8a84..77011c06 100644
--- a/includes/gateway/class-omise-payment.php
+++ b/includes/gateway/class-omise-payment.php
@@ -604,12 +604,16 @@ public function getRedirectUrl($callback_url, $order_id, $order)
 	/**
 	 * @param string $order_id
 	 * @param object $order
+	 * @param array $additionalData
 	 */
-	public function getMetadata($order_id, $order)
+	public function getMetadata($order_id, $order, $additionalData = [])
 	{
+		// override order_id as a reference for webhook handlers.
+		$orderId = [ 'order_id' => $order_id ];
+
 		return array_merge(
 			apply_filters('omise_charge_params_metadata', [], $order),
-			['order_id' => $order_id] // override order_id as a reference for webhook handlers.
+			array_merge($orderId, $additionalData)
 		);
 	}
 }
diff --git a/templates/myaccount/my-card.php b/templates/myaccount/my-card.php
index a9dc5a3b..34ca2546 100644
--- a/templates/myaccount/my-card.php
+++ b/templates/myaccount/my-card.php
@@ -37,7 +37,7 @@ class='button delete_card'
 	<form name="omise_cc_form" id="omise_cc_form">
 		<?php wp_nonce_field('omise_add_card','omise_add_card_nonce'); ?>
 
-		<?php if($viewData['embedded_form_enabled']): ?>
+		<?php if($viewData['secure_form_enabled']): ?>
 			<div id="omise-card" style="width:100%; max-width: 400px;"></div>
 		<?php else: ?>
 			<fieldset>
@@ -50,7 +50,7 @@ class='button delete_card'
 	<button id="omise_add_new_card" class="button"><?php _e( 'Save card', 'omise' ); ?></button>
 </div>
 
-<?php if($viewData['embedded_form_enabled']): ?>
+<?php if($viewData['secure_form_enabled']): ?>
 	<script>
 		window.CARD_FORM_THEME = "<?php echo $viewData['cardFormTheme'] ?>";
 		window.FORM_DESIGN = JSON.parse(`<?php echo json_encode($viewData['formDesign']) ?>`);
diff --git a/templates/payment/form.php b/templates/payment/form.php
index f56160eb..67057da1 100644
--- a/templates/payment/form.php
+++ b/templates/payment/form.php
@@ -26,7 +26,7 @@
 			</label>
 		<?php endif; ?>
 
-		<?php if ($viewData['embedded_form_enabled']): ?>
+		<?php if ($viewData['secure_form_enabled']): ?>
 			<div class="omise-new-card-form <?php echo $showExistingCards ? 'card-exists' : ''; ?>">
 				<div id="omise-card" style="width:100%; max-width: 400px;"></div>
 				<input type="hidden" name="omise_save_customer_card" class="omise_save_customer_card" />
@@ -53,7 +53,7 @@
 		<?php endif; ?>
 	</div>
 </div>
-<?php if($viewData['embedded_form_enabled']): ?>
+<?php if($viewData['secure_form_enabled']): ?>
 	<script>
 		window.CARD_FORM_THEME = "<?php echo $viewData['card_form_theme'] ?>";
 		window.CARD_BRAND_ICONS = JSON.parse(`<?php echo json_encode($viewData['card_icons']) ?>`);

From 35401a280cb64153673e88bd01e7a164f16bb333 Mon Sep 17 00:00:00 2001
From: Aashish Gurung <101558497+aashishgurung@users.noreply.github.com>
Date: Fri, 31 Mar 2023 11:38:59 +0700
Subject: [PATCH 5/6] [ENGA3-114]: Added banner message to alert about embedded
 form. (#358)

* [ENGA3-114]: Added banner message to alert about embedded form.

* [ENGA-1114]: Changed the subtext.

* [ENGA-114]: Fixed the URL. Added a logic to hide banner message if secure form is enabled.

* [ENGA3-114]: Added admin notice for embedded form

* [ENGA3-1114]: Added visibility to the function.

* [ENGA3-1114]: Updated the banner message and added Japanese translation.

---------

Co-authored-by: Aashish <aashish@omise.co>
---
 includes/admin/class-omise-page-settings.php |   3 ++-
 languages/omise-ja.mo                        | Bin 21476 -> 22872 bytes
 languages/omise-ja.po                        |   4 ++++
 omise-woocommerce.php                        |  16 ++++++++++++++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/includes/admin/class-omise-page-settings.php b/includes/admin/class-omise-page-settings.php
index b137626f..25da61c0 100644
--- a/includes/admin/class-omise-page-settings.php
+++ b/includes/admin/class-omise-page-settings.php
@@ -56,7 +56,8 @@ public static function render() {
 
 		$settings = $page->get_settings();
 		
-		$available_payment_methods = array();
+		// This variable is used in the view.
+		$available_payment_methods = [];
 		$capabilities = Omise_Capabilities::retrieve();
 
 		if ( $capabilities ){
diff --git a/languages/omise-ja.mo b/languages/omise-ja.mo
index d38a26d53ed9be54f0cd17420748298f1cbd0d06..26fed095575d4720a6c424f76c72af27511c8eea 100644
GIT binary patch
delta 5427
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

delta 4077
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
Djl;Q)

diff --git a/languages/omise-ja.po b/languages/omise-ja.po
index d6092278..61bf96ee 100644
--- a/languages/omise-ja.po
+++ b/languages/omise-ja.po
@@ -585,3 +585,7 @@ msgstr "有効期限の月数が1〜12で設定されていないため無効で
 #: includes/gateway/class-omise-payment-fpx.php:35
 msgid "Please select bank below"
 msgstr "以下から銀行をお選びください"
+
+#: omise-woocommerce.php:66
+msgid "Update your plugin to the latest version to enable Secure Form and maximize the security of your customers’ information. You will need to re-customize the credit card checkout form after the upgrade. <a target='_blank' href='https://www.omise.co/woocommerce-plugin'>Learn how to enable Secure Form</a>."
+msgstr "プラグインを最新バージョンにアップデートし、顧客情報の安全な管理に必要なSecure Formを有効にしてください。アップデート後、クレジットカードの決済フォームを再度カスタマイズする必要があります。<a target='_blank' href='https://www.omise.co/woocommerce-plugin'>Secure Formを有効にする方法はこちらをご確認ください</a>。"
diff --git a/omise-woocommerce.php b/omise-woocommerce.php
index 89bde6df..7f4f7852 100644
--- a/omise-woocommerce.php
+++ b/omise-woocommerce.php
@@ -50,6 +50,22 @@ public function __construct()
 		add_action('plugins_loaded', array($this, 'check_dependencies'));
 		add_action('woocommerce_init', array($this, 'init'));
 		do_action('omise_initiated');
+		add_action('admin_notices', [$this, 'embedded_form_notice']);
+	}
+
+	/**
+	 * Notice for users informing about embedded form
+	 */
+	public function embedded_form_notice()
+	{
+		$this->omiseCardGateway = new Omise_Payment_Creditcard();
+		$embedded_form_enabled = $this->omiseCardGateway->get_option('embedded_form_enabled');
+
+		// hide if user enables the embedded form.
+		if (!(bool)$embedded_form_enabled) {
+			$translation = __('Update your plugin to the latest version to enable Secure Form and maximize the security of your customers’ information. You will need to re-customize the credit card checkout form after the upgrade. <a target="_blank" href="https://www.omise.co/woocommerce-plugin">Learn how to enable Secure Form</a>.', 'omise');
+			echo "<div class='notice notice-warning is-dismissible'><p><strong>Opn Payments:</strong> $translation</p></div>";
+		}
 	}
 
 	/**

From beeaba0115ab090e6672b07e771176f2de391a9f Mon Sep 17 00:00:00 2001
From: Aashish <aashish@omise.co>
Date: Mon, 3 Apr 2023 11:33:17 +0700
Subject: [PATCH 6/6] Preparing release of v5.0.0

---
 CHANGELOG.md          |  8 ++++++++
 omise-woocommerce.php |  4 ++--
 readme.txt            | 10 +++++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4931a7c..1ac34de7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # CHANGELOG
 
+
+### [v5.0.0 _(Apr 3, 2023)_](https://github.com/omise/omise-woocommerce/releases/tag/v5.0.0)
+- Replace credit card form with secure form with a feature flag options to switch between credit card forms. (PR [#354](https://github.com/omise/omise-woocommerce/pull/354))
+- Added an admin notice to notify the user to update the current credit card form to embedded form. (PR [#358](https://github.com/omise/omise-woocommerce/pull/358))
+- Track the adoption of the secure form. (PR [#359](https://github.com/omise/omise-woocommerce/pull/359))
+- Removed SCB and KTB internet banking. (PR [#356](https://github.com/omise/omise-woocommerce/pull/356))
+- Bug fix: hanlde Shopeepay cancel payment. (PR [#361](https://github.com/omise/omise-woocommerce/pull/361))
+
 ### [v4.29.0 _(Mar 8, 2023)_](https://github.com/omise/omise-woocommerce/releases/tag/v4.29.0)
 - Added Krungthai NEXT mobile banking (PR [#347](https://github.com/omise/omise-woocommerce/pull/347))
 
diff --git a/omise-woocommerce.php b/omise-woocommerce.php
index 7f4f7852..f66b46e5 100644
--- a/omise-woocommerce.php
+++ b/omise-woocommerce.php
@@ -4,7 +4,7 @@
  * Plugin Name: Opn Payments
  * Plugin URI:  https://www.omise.co/woocommerce
  * Description: Opn Payments is a WordPress plugin designed specifically for WooCommerce. The plugin adds support for Opn Payments Payment Gateway's payment methods to WooCommerce.
- * Version:     4.29.0
+ * Version:     5.0.0
  * Author:      Opn Payments and contributors
  * Author URI:  https://github.com/omise/omise-woocommerce/graphs/contributors
  * Text Domain: omise
@@ -22,7 +22,7 @@ class Omise
 	 *
 	 * @var string
 	 */
-	public $version = '4.29.0';
+	public $version = '5.0.0';
 
 	/**
 	 * The Omise Instance.
diff --git a/readme.txt b/readme.txt
index 9fba4eee..153ae691 100644
--- a/readme.txt
+++ b/readme.txt
@@ -3,7 +3,7 @@ Contributors: Opn Payments
 Tags: opn payments, payment, payment gateway, woocommerce plugin, omise, opn, installment, internet banking, alipay, paynow, truemoney wallet, woocommerce payment
 Requires at least: 4.3.1
 Tested up to: 6.0.2
-Stable tag: 4.29.0
+Stable tag: 5.0.0
 License: MIT
 License URI: https://opensource.org/licenses/MIT
 
@@ -34,6 +34,14 @@ From there:
 
 == Changelog ==
 
+= 5.0.0 =
+
+- Replace credit card form with secure form with a feature flag options to switch between credit card forms. (PR [#354](https://github.com/omise/omise-woocommerce/pull/354))
+- Added an admin notice to notify the user to update the current credit card form to embedded form. (PR [#358](https://github.com/omise/omise-woocommerce/pull/358))
+- Track the adoption of the secure form. (PR [#359](https://github.com/omise/omise-woocommerce/pull/359))
+- Removed SCB and KTB internet banking. (PR [#356](https://github.com/omise/omise-woocommerce/pull/356))
+- Bug fix: hanlde Shopeepay cancel payment. (PR [#361](https://github.com/omise/omise-woocommerce/pull/361))
+
 = 4.29.0 =
 
 - Added Krungthai NEXT mobile banking (PR [#347](https://github.com/omise/omise-woocommerce/pull/347))