diff --git a/src/components/order/credit-card-payment.js b/src/components/order/credit-card-payment.js
index ad4db5ee..2906369b 100644
--- a/src/components/order/credit-card-payment.js
+++ b/src/components/order/credit-card-payment.js
@@ -1,7 +1,7 @@
 import { mapGetters } from 'vuex';
 import { LINK, BUTTON } from '@/shared/enums/paymentStrategy';
 import {
-	leadgods, niubiz, datafast, pagoplux, pagopluxLink,
+	leadgods, niubiz, datafast, pagoplux, pagopluxLink, openpay,
 	xchange, paymentez, placetopay, alignet, mercadopago, mercadopagoMp,
 } from '@/shared/enums/gatewayCodes';
 
@@ -15,6 +15,7 @@ const LeadGods = () => import('@/components/order/paymentsMethods/leadgods');
 const PlaceToPay = () => import('@/components/order/paymentsMethods/place-to-pay');
 const Alignet = () => import('@/components/order/paymentsMethods/alignet');
 const MercadoPago = () => import('@/components/order/paymentsMethods/mercadopago');
+const OpenPay = () => import('@/components/order/paymentsMethods/open-pay');
 
 /**
  * @param {object-function} h render function
@@ -69,6 +70,7 @@ function paymentLinkCreator(h, gateway, ipAddress) {
  */
 const paymentButtonCreator = (h, gateway, ipAddress) => {
 	const buttonOptions = {
+		[openpay]: OpenPay,
 		[alignet]: Alignet,
 		[datafast]: DataFast,
 		[mercadopago]: MercadoPago,
diff --git a/src/components/order/paymentsMethods/open-pay-form.vue b/src/components/order/paymentsMethods/open-pay-form.vue
new file mode 100644
index 00000000..ce0ec85a
--- /dev/null
+++ b/src/components/order/paymentsMethods/open-pay-form.vue
@@ -0,0 +1,316 @@
+<template>
+	<div class="payment-form-container">
+		<div class="payment-form-card">
+		<button class="close-button" @click="closeForm">&times;</button>
+		<h1>Pago</h1>
+		<form @submit.prevent="loadOpenPayScripts" id="payment-form">
+			<div class="form-group">
+				<label for="holder-name">Nombre del titular</label>
+				<input 
+					v-model="formData.holderName" 
+					type="text" 
+					id="holder-name" 
+					required
+				/>
+				<span class="alert-message" v-if="!formData.holderName">Requiere el nombre completo*</span>
+			</div>
+			<div class="form-group">
+				<label for="card-number">Número de tarjeta</label>
+				<input 
+					v-model="formData.cardNumber" 
+					type="number" 
+					id="card-number"
+					required
+				/>
+				<span class="alert-message" v-if="!isOnlyNumber(formData.cardNumber, 'cardNumber')">Solo numeros*</span>
+			</div>
+			<div class="form-row">
+				<div class="form-group">
+					<label for="expiration-month">Mes</label>
+					<select 
+					v-model="formData.expMonth" 
+					id="expiration-month" 
+					required
+					>
+					<option v-for="month in months" :key="month" :value="month">
+						{{ month < 10 ? '0' + month : month }}
+					</option>
+					</select>
+				</div>
+				<div class="form-group">
+				<label for="expiration-year">Año</label>
+				    <select 
+						v-model="formData.expYear" 
+						id="expiration-year" 
+						required
+					>
+						<option v-for="year in years" :key="year" :value="year">
+							{{ year }}
+						</option>
+					</select>
+				</div>
+				<div class="form-group">
+				<label for="cvv">CVV</label>
+				<input 
+					v-model="formData.cvv" 
+					type="number" 
+					id="cvv"
+					required
+				/>
+				<span class="alert-message" v-if="!isOnlyNumber(formData.cvv, 'cvv')" >3 digitos numericos*</span>
+				</div>
+			</div>
+			<v-btn
+				type="submit"
+				class="pay-button"
+				:loading="isLoading"
+				:disabled="isLoading || isFormValid"
+				color="primary"
+				>
+				<span v-if="isLoading">Cargando...</span>
+				<span v-else>Pagar</span>
+			</v-btn>
+		</form>
+		<div class="payment-info">
+			<p>Transacciones realizadas vía: <strong>OpenPay</strong></p>
+			<p class="security-info">Tus pagos se realizan de forma segura con encriptación de 256 bits</p>
+		</div>
+		</div>
+	</div>
+  </template>
+  
+  <script>
+  function data() {
+	return {
+		deviceSessionId: '',
+		months: Array.from({ length: 12 }, (_, i) => i + 1),
+		formData: {
+			holderName: '',
+			cardNumber: '',
+			expMonth: '',
+			expYear: '',
+			cvv: '',
+		},
+		years: this.generateYears(),
+	};
+  }
+  
+export default {
+	name: 'open-pay-form',
+	data,
+	created() {
+		this.cleanData();
+		// this.loadOpenPayScripts();
+	},
+	props: {
+		response: Object,
+		isLoading: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	methods: {
+		cleanData() {
+			this.formData = {
+				holderName: '',
+				cardNumber: '',
+				expMonth: '',
+				expYear: '',
+				cvv: '',
+			};
+		},
+		isOnlyNumber(number, model) {
+			if (model === 'cvv') {
+				return /^\d+$/.test(number) && number.length === 3;
+			}
+			return /^\d+$/.test(number);
+		},
+		generateYears() {
+			const currentYear = new Date().getFullYear();
+			return Array.from({ length: 71 }, (_, i) => currentYear + i);
+		},
+		loadOpenPayScripts() {
+			const openpayScript = document.createElement('script');
+			openpayScript.src = 'https://js.openpay.pe/openpay.v1.min.js';
+			openpayScript.async = true;
+
+			openpayScript.onload = () => {
+				window.OpenPay.setId(this.response.payboxMerchantId);
+				window.OpenPay.setApiKey(this.response.payboxClientAppKey);
+				window.OpenPay.setSandboxMode(!this.response.payboxProduction);
+
+				const openpayDataScript = document.createElement('script');
+				openpayDataScript.src = 'https://js.openpay.pe/openpay-data.v1.min.js';
+				openpayDataScript.async = true;
+
+				openpayDataScript.onload = () => {
+					this.setupDeviceData();
+				};
+
+				document.head.appendChild(openpayDataScript);
+			};
+
+			document.head.appendChild(openpayScript);
+		},
+		setupDeviceData() {
+			this.isLoading = true;
+			try {
+				const deviceDataId = window.OpenPay.deviceData.setup('payment-form');
+				this.deviceSessionId = deviceDataId;
+				this.handlePayment();
+			} catch (error) {
+				console.error('Error:', error);
+			}
+		},
+		closeForm() {
+			this.$emit('close');
+			this.cleanData();
+		},
+		handlePayment() {
+			const { holderName, cardNumber, expMonth, expYear, cvv } = this.formData;
+			const cardData = {
+				holder_name: holderName,
+				card_number: cardNumber,
+				expiration_month: expMonth,
+				expiration_year: expYear % 100,
+				cvv2: cvv,
+				device_session_id: this.deviceSessionId,
+			};
+			window.OpenPay.token.create(cardData, this.successCallback, this.errorCallback);
+		},
+		successCallback(response) {
+			const token = response.data.id;
+			this.$emit('save-payment', token, this.deviceSessionId);
+		},
+		errorCallback(error) {
+			this.isLoading = false;
+			this.showNotification(error.data.description, 'error');
+		},
+	},
+	computed: {
+		isFormValid() {
+			const { holderName, cardNumber, expMonth, expYear, cvv } = this.formData;
+			const validate = Boolean(holderName && cardNumber && expMonth && expYear && cvv);
+			return !validate;
+		},
+	},
+};
+</script>
+  
+<style scoped>
+.alert-message {
+  color: red;
+  font-size: 9.5px;
+  padding-left: 5px;
+}
+
+.year-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 200px; /* Ajusta el ancho máximo del contenedor */
+  margin: 0 auto; /* Centra el contenedor */
+}
+
+select {
+  width: 100px;
+  padding: 7px 12px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  transition: border-color 0.3s ease;
+  cursor: pointer;
+  box-sizing: border-box; /* Incluye el padding en el ancho total */
+}
+
+select:focus {
+  border-color: #4CAF50;
+  outline: none;
+}
+
+/* Estilo para limitar el ancho de la lista desplegable */
+select {
+  max-width: 200px; /* Asegura que el menú no se expanda más allá del ancho deseado */
+}
+.payment-form-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+  background-color: #f0f0f0;
+  padding: 20px;
+}
+
+.payment-form-card {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  width: 100%;
+  max-width: 400px;
+}
+
+h1 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.form-row {
+  display: flex;
+  gap: 10px;
+}
+
+.pay-button {
+  width: 95%;
+  padding: 10px;
+  background-color: #4a90e2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color 0.3s;
+}
+
+.pay-button:hover {
+  background-color: #3a7bb5; /* Color más oscuro al pasar el ratón */
+}
+
+.pay-button:disabled {
+  background-color: #c0c0c0; /* Color para el botón deshabilitado */
+  cursor: not-allowed; /* Cursor de no permitido */
+}
+
+.payment-info {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.security-info {
+  font-size: 12px;
+  color: #666;
+}
+
+@media (max-width: 480px) {
+  .form-row {
+	flex-direction: column;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/order/paymentsMethods/open-pay.vue b/src/components/order/paymentsMethods/open-pay.vue
new file mode 100644
index 00000000..8d4a38df
--- /dev/null
+++ b/src/components/order/paymentsMethods/open-pay.vue
@@ -0,0 +1,239 @@
+<template>
+	<div>
+		<div class="conditions">
+			<v-checkbox data-cy="niubiz-check" class="check" v-model="checkbox">
+			</v-checkbox>
+			<span
+				>Acepto los
+				<button type="button" @click="conditionsAndTermsLink">
+					términos y condiciones
+				</button></span
+			>
+		</div>
+		<button
+			type="button"
+			data-cy="niubiz-btn"
+			class="niubiz-btn"
+			style="padding:1rem"
+			:disabled="!checkbox"
+			@click="checkout"
+		>
+			<img :src="img" alt="logo_Niubiz" />
+		</button>
+		<form id="visa-payment" :action="redirect" method="post"></form>
+		<v-dialog max-width="425" v-model="dialog" persistent>
+			<open-pay-form
+				:is-loading="isLoading"
+				:response="response"
+				:key="dialogKey"
+				@close="openDialog"
+				@save-payment="savePayment"
+			/>
+		</v-dialog>
+	</div>
+</template>
+<script>
+import OpenPayForm from '@/components/order/paymentsMethods/open-pay-form';
+import { mapGetters, mapState } from 'vuex';
+
+function orderTotal() {
+	return this.getTotalToBuy + this.getShippingCost;
+}
+
+async function checkout() {
+	try {
+		const body = {
+			orderId: this.getOrderId,
+			commerceCode: process.env.COMMERCE_CODE,
+			ipAddress: this.ipAddress,
+		};
+		const url = 'payment-gateway/openpay/checkout';
+		const { data: res } = await this.$httpSales.post(url, body);
+		this.hash = res.hash;
+		this.currency = res.curency;
+		this.amount = res.amount;
+		this.response = res;
+		this.openDialog();
+	} catch (error) {
+		this.showNotification('Error. La transacción no se completó.', 'error');
+	}
+}
+
+function redirect() {
+	const orderId = `orderId=${this.getOrderId}`;
+	const successUri = 'uri=resumen-de-mi-pedido';
+	const errorUri = `errorUri=carrito-de-compras/pago/${this.getOrderId}`;
+	return `${this.apiSales}/payment-gateway/validation?${orderId}&${successUri}&${errorUri}`;
+}
+
+function conditionsAndTermsLink() {
+	const findIt = this.help.find((h) => {
+		const name = this.normalize(h.name);
+		return name === 'terminos y condiciones';
+	});
+	const [item] = findIt.section;
+	const link = findIt;
+	const newItem = item.name.split(' ').join('-');
+	const newLink = link.name.split(' ').join('-');
+	this.$router.push(`/ayuda/apartado/${newItem}/seccion/${newLink}`);
+}
+
+function normalize(str) {
+	return str
+		.toLowerCase()
+		.normalize('NFD')
+		.replace(/([aeio])\u0301|(u)[\u0301\u0308]/gi, '$1$2')
+		.normalize();
+}
+
+function data() {
+	return {
+		amount: 0,
+		dialog: false,
+		apiSales: process.env.SALES_URL,
+		companyLogo: process.env.COMPANY_LOGO,
+		checkbox: false,
+		currency: 'PEN',
+		dev: 'https://static-content-qas.vnforapps.com/v2/js/checkout.js?qa=true',
+		expirationTime: null,
+		isLoading: false,
+		merchantId: '',
+		hash: false,
+		prod: 'https://static-content.vnforapps.com/v2/js/checkout.js',
+		sessionKey: null,
+		totalAmount: null,
+		response: null,
+		dialogKey: 0,
+	};
+}
+
+export default {
+	name: 'niubiz',
+	components: {
+		OpenPayForm,
+	},
+	computed: {
+		...mapGetters([
+			'getOrderId',
+			'getShippingCost',
+			'getTotalToBuy',
+			'token',
+			'getCommerceData',
+		]),
+		...mapState({
+			help: state => state.commerce.helperCenter,
+		}),
+		orderTotal,
+		redirect,
+	},
+	data,
+	methods: {
+		checkout,
+		conditionsAndTermsLink,
+		normalize,
+		openDialog() {
+			this.dialog = !this.dialog;
+			if (this.dialog) {
+				// eslint-disable-next-line no-plusplus
+				this.dialogKey++;
+			}
+		},
+		async savePayment(token, deviceSessionId) {
+			this.isLoading = true;
+			// const successUri = 'uri=resumen-de-mi-pedido';
+			// const errorUri = `errorUri=carrito-de-compras/pago/${this.getOrderId}`;
+			const orderId = this.getOrderId;
+			try {
+				const body = {
+					hash: this.hash,
+					gatewayResponse: {
+						amount: this.amount,
+						currency: this.currency,
+						description: 'Pago por servicio OpenPay',
+						method: 'card',
+						order_id: this.getOrderId,
+						device_session_id: deviceSessionId,
+						source_id: token,
+					},
+				};
+				const url = 'payment-gateway/validation';
+				// const fullUrl = `${url}?${successUri}&${errorUri}`;
+				const response = await this.$httpSales.patch(url, body);
+				if (response.data.paymentGateway.status === 'Aprobado') {
+					this.$router.push({ name: 'buy-summary', params: { orderId } });
+					localStorage.removeItem('ecommerce-order');
+				}
+			} catch (error) {
+				this.showNotification(error.data.paymentGateway.errorMessage, 'error');
+				this.$router.replace({
+					name: 'buy-payment',
+					params: {
+						orderId,
+					},
+				});
+				window.location.reload();
+			} finally {
+				this.isLoading = false;
+			}
+			this.openDialog();
+		},
+	},
+	props: {
+		img: {
+			required: true,
+			type: String,
+		},
+		ipAddress: {
+			required: true,
+			type: String,
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+.start-js-btn.modal-opener.default {
+	background: url('/static/img/icons/icon-visanet.png') !important;
+}
+
+#visa-payment {
+	width: 656px;
+
+	@media (max-width: 768px) {
+		width: auto;
+	}
+}
+
+.niubiz-btn {
+	border: 1px solid black;
+	display: flex;
+	height: 50px;
+	justify-content: center;
+	margin: auto 1rem;
+	padding: 0 2rem;
+	transition-duration: 250ms;
+
+	&:hover {
+		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+		transform: scale(1.05);
+	}
+	&[disabled] {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
+}
+
+.conditions {
+	align-items: center;
+	display: flex;
+
+	.check {
+		margin-right: 1rem;
+		max-width: 2rem;
+	}
+
+	button {
+		color: color(terciary);
+		text-decoration: underline;
+	}
+}
+</style>
diff --git a/src/mixins/global.js b/src/mixins/global.js
index b3409e18..03c0566c 100644
--- a/src/mixins/global.js
+++ b/src/mixins/global.js
@@ -64,7 +64,7 @@ function replaceString(word, selectionStart, newWord) {
 	return newWord;
 }
 
-function showNotification(text, color = 'success', html = null, isBtn = false, timeout = 60000) {
+function showNotification(text, color = 'success', html = null, isBtn = false, timeout = 5000) {
 	this.$store.dispatch('showSnackBar', { text, color, html, isBtn, timeout });
 }
 
diff --git a/src/pages/page-buy.vue b/src/pages/page-buy.vue
index f7adacef..f70f0636 100644
--- a/src/pages/page-buy.vue
+++ b/src/pages/page-buy.vue
@@ -1,10 +1,15 @@
 <template>
 	<div class="buy-container">
-		<section class="rejected-transaction" v-if="isNiubiz">
-			<h4>La transacción <span>{{transactionId}}</span> fue rechazada</h4>
-			<h5>Nro pedido: <span>{{getOrderInfo.id}}</span></h5>
-			<h5>fecha: <span>{{getOrderInfo.createdAt | formatDate}}</span></h5>
-			<h4>Razón: <span>{{ getOrderInfo.additionalInformation.paymentGateway.status }}</span> </h4>
+		<section class="rejected-transaction" v-if="showTransactionInfo">
+			<div class="header">
+				<h4>La transacción <span>{{ transactionId }}</span> fue rechazada</h4>
+				<button class="close-btn" @click="closeTransaction">×</button>
+			</div>
+			<div class="content">
+				<h5>Nro pedido: <span>{{ getOrderInfo.id }}</span></h5>
+				<h5>Fecha: <span>{{ getOrderInfo.createdAt | formatDate }}</span></h5>
+				<h5>Razón: <span>{{ getOrderInfo.additionalInformation.paymentGateway.status }}</span></h5>
+			</div>
 		</section>
 		<div
 			v-if="stepThree"
@@ -64,7 +69,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { getDeeper } from '@/shared/lib';
-import { niubiz } from '@/shared/enums/gatewayCodes';
+import { niubiz, openpay } from '@/shared/enums/gatewayCodes';
 import appButton from '@/components/shared/buttons/app-button';
 import productInCar from '@/components/products/product-in-car';
 import summaryOrder from '@/components/order/summary-order';
@@ -182,6 +187,7 @@ function data() {
 			section: '/static/icons/arrow.svg',
 		},
 		productsBuys: [],
+		isVisible: true,
 	};
 }
 
@@ -202,6 +208,13 @@ export default {
 			'isCollapseProduct',
 		]),
 		isNiubiz,
+		isOpenPay()	{
+			const codeOpenPay = getDeeper('additionalInformation.gatewayCode')(this.getOrderInfo);
+			return codeOpenPay === openpay;
+		},
+		showTransactionInfo() {
+			return (this.isNiubiz || this.isOpenPay) && this.isVisible;
+		},
 		stepOneAndTwo,
 		stepThree,
 		stepTwo,
@@ -216,6 +229,9 @@ export default {
 		getProductToBuyHandler,
 		loadProductsQuery,
 		toogleCollapse,
+		closeTransaction() {
+			this.isVisible = false;
+		},
 	},
 	mounted,
 	watch: {
@@ -349,4 +365,36 @@ export default {
 	.container-routes {
 		margin-top: -30px;
 	}
+	.rejected-transaction {
+  background-color: #ffebee;
+  border: 1px solid #f44336;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 20px 0;
+  position: relative;
+  color: #b71c1c;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #b71c1c;
+}
+
+.close-btn:hover {
+  color: #f44336;
+}
+
+.content h5 {
+  margin: 8px 0;
+}
 </style>
diff --git a/src/pages/page-new-summary-order.vue b/src/pages/page-new-summary-order.vue
index 58219e93..cb055e10 100644
--- a/src/pages/page-new-summary-order.vue
+++ b/src/pages/page-new-summary-order.vue
@@ -138,7 +138,7 @@
 			/>
 		</v-layout>
 		<section
-			v-if="isNiubiz && isOnlinePayment"
+			v-if="(isOpenPay || isNiubiz) && isOnlinePayment"
 			class="card-data-niubiz"
 			data-cy="online-payment-info"
 		>
@@ -167,7 +167,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { getDeeper, isEmpty } from '@/shared/lib';
-import { niubiz } from '@/shared/enums/gatewayCodes';
+import { niubiz, openpay } from '@/shared/enums/gatewayCodes';
 import { creditCard, deposit, reciveAndPay } from '@/shared/enums/wayPayment';
 import deliveryWays from '@/shared/enums/waysDeliveries';
 import productInSummary from '@/components/products/product-in-summary';
@@ -410,6 +410,10 @@ export default {
 		isHome,
 		isDeposit,
 		isNiubiz,
+		isOpenPay() {
+			const codeNiubiz = getDeeper('additionalInformation.gatewayCode')(this.order);
+			return codeNiubiz === openpay;
+		},
 		isOnlinePayment,
 		isReciveAndPay,
 		isStore,
diff --git a/src/shared/enums/gatewayCodes.js b/src/shared/enums/gatewayCodes.js
index 5b6d54ba..5e4ef612 100644
--- a/src/shared/enums/gatewayCodes.js
+++ b/src/shared/enums/gatewayCodes.js
@@ -10,3 +10,4 @@ export const xchange = 'xchange';
 export const alignet = 'alignet';
 export const mercadopagoMp = 'mercadopagoMp';
 export const mercadopago = 'mercadopago';
+export const openpay = 'openpay';