VigilioYonatan/.env

## .env
# izipay
IZIPAY_URL=https://api.micuentaweb.pe/api-payment/V4/Charge/CreatePayment
IZIPAY_CLIENT_ID=58211388
IZIPAY_CLIENT_SECRET=testpassword_5XaqW3unjbzaQtvQrpixbtljiUr4RtZaFGNLYaLRccCOy
IZIPAY_PUBLIC_KEY=58211388:testpublickey_Qdqqh8L8nlaUXvHujFFKmEuC5SmZds067TppVmpJpWOac
IZIPAY_HASH_KEY=YElnxd60beFxQ0qRRt4hwvwhdArFwEyyzmc9hGgE3E9QU

# NIUBIS
NIUBIS_MERCANCY_ID=456879852
NIUBIS_CURRENCY=USD
NIUBIS_USER=integraciones@niubiz.com.pe
NIUBIS_PASSWORD=_7z3@8fF
NIUBIS_URL_API=https://apisandbox.vnforappstest.com
NIUBIS_URL_JS=https://static-content-qas.vnforapps.com/v2/js/checkout.js?qa=true

## cart.controller.ts
@Controller()
class CartController{
  index(){
    const [niubizToken, izipayToken] = await Promise.all([
            niubizMethod(),
            izipayMethod(),
        ]);
     return {
            cart,
            niubizToken,
            izipayToken,
            merchant_id: enviroments.NIUBIS_MERCANCY_ID,
            url: enviroments.NIUBIS_URL_JS,
        };
  }
}

## cart.ejs
<!DOCTYPE html>
<html lang="en">

<head>
  <%- include('../components/webHead',{title:"Carrito"}) %>
  <!-- IZIPAY - https://secure.micuentaweb.pe/doc/es-PE/rest/V4.0/javascript/guide/embedded/presentation.html -->
  <script type="text/javascript" src="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="58211388:testpublickey_Qdqqh8L8nlaUXvHujFFKmEuC5SmZds067TppVmpJpWOac" kr-post-url-success="<%= route('/payment/niubiz')  %>">
  </script>
  <link rel="stylesheet" href="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
  <script type="text/javascript" src="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/neon.js">
  </script>
</head>

<body class="bg-paper-light dark:bg-background-dark antialiased">
  <%- include('../components/webHeader') %>
  <!-- header -->
  <section class="max-w-6xl mx-auto flex gap-6 px-2 flex-col lg:flex-row m-12">
    <div class="w-full lg:w-[400px] dark:bg-background-dark bg-background-light flex flex-col gap-1 items-center min-h-[300px] p-2">
      <span class="dark:text-secondary-light">
        Total: <b>999</b>
      </span>
      <ul class="flex flex-col gap-2 w-full">
        <li x-data="{isOpen:false}">
          <button @click="isOpen=!isOpen" class="bg-[#FF4846] flex justify-center items-center rounded-md py-1 px-2 shadow w-full" type="button" aria-label="pay with izipay">
            <img src="<%= route("/images/settings/payments/izipay.webp") %>" width="100" height="100" alt="izipay logo">
          </button>
          <div class="kr-embedded w-full p-2" kr-form-token="<%= izipayToken  %>"></div>
        </li>
        <li class="">
          <button type="button" class="flex justify-center items-center rounded-md py-1 px-2 shadow w-full" aria-label="pay with Niubis" id="btnNiubiz">
            <img src="<%= route("/images/settings/payments/niubiz-black.webp") %>" width="100" height="100" alt="niubiz logo">
          </button>
        </li>
      </ul>
    </div>
  </section>
  <span></span>
  <!-- footer -->
  <%- include('../components/webFooter') %>
  <script type="text/javascript" src="<%= url  %>">
  </script>
  <script type="text/javascript">
    const btnNiubiz = document.getElementById("btnNiubiz");
    window.addEventListener(("DOMContentLoaded"), () => {
      const purchasenumber = Math.floor(Math.random() * 1000)
      VisanetCheckout.configure({
        sessiontoken: '<%= niubizToken %>',
        channel: 'web',
        merchantid: '<%= merchant_id %>',
        purchasenumber,
        amount: 100,
        expirationminutes: '20', // 20 minutes to expire
        timeouturl: '<%= route("/cart")%>',
        merchantlogo: 'img/comercio.png',
        formbuttoncolor: '#000000',
        action: `<%= route('/payment/success')%>?purchaseNumber=${purchasenumber}&amount=100`,
        complete: function(params) {
          alert(JSON.stringify(params));
        }
      });;
      btnNiubiz.addEventListener("click", () => {
        VisanetCheckout.open()
      })
    })
  </script>

</body>

</html>

## index.ts
export async function niubizMethod() {
    const response = await fetch(
        `${enviroments.NIUBIS_URL_API}/api.security/v1/security`,
        {
            headers: {
                Authorization: `Basic ${btoa(
                    `${enviroments.NIUBIS_USER}:${enviroments.NIUBIS_PASSWORD}`
                )}`,
            },
        }
    );
    const result = await response.text();
    const ip = await getIp();
    const responsePost = await fetch(
        `${enviroments.NIUBIS_URL_API}/api.ecommerce/v2/ecommerce/token/session/${enviroments.NIUBIS_MERCANCY_ID}`,
        {
            method: "POST",
            headers: {
                Authorization: result,
                "Content-type": "application/json",
            },
            body: JSON.stringify({
                channel: "web", // tipo
                amount: 100, // monto total
                antifraud: {
                    // para evitar fraudes
                    clientIp: ip, // ip de usuario
                    merchantDefineData: {
                        // datos del usuario
                        MDD4: "yonatanvigiliolavado09@gmail.com", // email
                        MDD21: 0, // 0 nuevo usuario , 1 usuario que ya compro en esa tienda
                        MDD32: "ORDER-00001", //id de usuario
                        MDD75: "Registrado", // Registrado, Invitado o Empleado
                        MDD77:
                            Math.floor(
                                (new Date().getTime() -
                                    new Date("2024-02-05").getTime()) /
                                    (1000 * 3600 * 24)
                            ) + 1, // dias de cuando se creo la cuenta el usuario
                    },
                },
            }),
        }
    );
    const token = await responsePost.json();
    return token.sessionKey;
}

export async function izipayMethod() {
    const response = await fetch(enviroments.IZIPAY_URL, {
        method: "POST",
        headers: {
            Authorization: `Basic ${btoa(
                `${enviroments.IZIPAY_CLIENT_ID}:${enviroments.IZIPAY_CLIENT_SECRET}`
            )}`,
            "Content-type": "application/json",
        },
        body: JSON.stringify({
            amount: 10000, // 10000 = 100.00
            currency: "USD", // dolares - comunicarte con izipay que tipo de pago
            orderId: "ORD-0001",
            customer: {
                email: "yonatanvigiliolavado09@gmail.com", // email de usuario
            },
        }),
    });
    const result = await response.json();
    const token = result.answer.formToken;
    return token;
}
	# izipay
	IZIPAY_URL=https://api.micuentaweb.pe/api-payment/V4/Charge/CreatePayment
	IZIPAY_CLIENT_ID=58211388
	IZIPAY_CLIENT_SECRET=testpassword_5XaqW3unjbzaQtvQrpixbtljiUr4RtZaFGNLYaLRccCOy
	IZIPAY_PUBLIC_KEY=58211388:testpublickey_Qdqqh8L8nlaUXvHujFFKmEuC5SmZds067TppVmpJpWOac
	IZIPAY_HASH_KEY=YElnxd60beFxQ0qRRt4hwvwhdArFwEyyzmc9hGgE3E9QU

	# NIUBIS
	NIUBIS_MERCANCY_ID=456879852
	NIUBIS_CURRENCY=USD
	NIUBIS_USER=integraciones@niubiz.com.pe
	NIUBIS_PASSWORD=_7z3@8fF
	NIUBIS_URL_API=https://apisandbox.vnforappstest.com
	NIUBIS_URL_JS=https://static-content-qas.vnforapps.com/v2/js/checkout.js?qa=true
	@Controller()
	class CartController{
	index(){
	const [niubizToken, izipayToken] = await Promise.all([
	niubizMethod(),
	izipayMethod(),
	]);
	return {
	cart,
	niubizToken,
	izipayToken,
	merchant_id: enviroments.NIUBIS_MERCANCY_ID,
	url: enviroments.NIUBIS_URL_JS,
	};
	}
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<%- include('../components/webHead',{title:"Carrito"}) %>
	<!-- IZIPAY - https://secure.micuentaweb.pe/doc/es-PE/rest/V4.0/javascript/guide/embedded/presentation.html -->
	<script type="text/javascript" src="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="58211388:testpublickey_Qdqqh8L8nlaUXvHujFFKmEuC5SmZds067TppVmpJpWOac" kr-post-url-success="<%= route('/payment/niubiz') %>">
	</script>
	<link rel="stylesheet" href="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
	<script type="text/javascript" src="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/neon.js">
	</script>
	</head>

	<body class="bg-paper-light dark:bg-background-dark antialiased">
	<%- include('../components/webHeader') %>
	<!-- header -->
	<section class="max-w-6xl mx-auto flex gap-6 px-2 flex-col lg:flex-row m-12">
	<div class="w-full lg:w-[400px] dark:bg-background-dark bg-background-light flex flex-col gap-1 items-center min-h-[300px] p-2">
	<span class="dark:text-secondary-light">
	Total: <b>999</b>
	</span>
	<ul class="flex flex-col gap-2 w-full">
	<li x-data="{isOpen:false}">
	<button @click="isOpen=!isOpen" class="bg-[#FF4846] flex justify-center items-center rounded-md py-1 px-2 shadow w-full" type="button" aria-label="pay with izipay">
	<img src="<%= route("/images/settings/payments/izipay.webp") %>" width="100" height="100" alt="izipay logo">
	</button>
	<div class="kr-embedded w-full p-2" kr-form-token="<%= izipayToken %>"></div>
	</li>
	<li class="">
	<button type="button" class="flex justify-center items-center rounded-md py-1 px-2 shadow w-full" aria-label="pay with Niubis" id="btnNiubiz">
	<img src="<%= route("/images/settings/payments/niubiz-black.webp") %>" width="100" height="100" alt="niubiz logo">
	</button>
	</li>
	</ul>
	</div>
	</section>
	<span></span>
	<!-- footer -->
	<%- include('../components/webFooter') %>
	<script type="text/javascript" src="<%= url %>">
	</script>
	<script type="text/javascript">
	const btnNiubiz = document.getElementById("btnNiubiz");
	window.addEventListener(("DOMContentLoaded"), () => {
	const purchasenumber = Math.floor(Math.random() * 1000)
	VisanetCheckout.configure({
	sessiontoken: '<%= niubizToken %>',
	channel: 'web',
	merchantid: '<%= merchant_id %>',
	purchasenumber,
	amount: 100,
	expirationminutes: '20', // 20 minutes to expire
	timeouturl: '<%= route("/cart")%>',
	merchantlogo: 'img/comercio.png',
	formbuttoncolor: '#000000',
	action: `<%= route('/payment/success')%>?purchaseNumber=${purchasenumber}&amount=100`,
	complete: function(params) {
	alert(JSON.stringify(params));
	}
	});;
	btnNiubiz.addEventListener("click", () => {
	VisanetCheckout.open()
	})
	})
	</script>

	</body>

	</html>
	export async function niubizMethod() {
	const response = await fetch(
	`${enviroments.NIUBIS_URL_API}/api.security/v1/security`,
	{
	headers: {
	Authorization: `Basic ${btoa(
	`${enviroments.NIUBIS_USER}:${enviroments.NIUBIS_PASSWORD}`
	)}`,
	},
	}
	);
	const result = await response.text();
	const ip = await getIp();
	const responsePost = await fetch(
	`${enviroments.NIUBIS_URL_API}/api.ecommerce/v2/ecommerce/token/session/${enviroments.NIUBIS_MERCANCY_ID}`,
	{
	method: "POST",
	headers: {
	Authorization: result,
	"Content-type": "application/json",
	},
	body: JSON.stringify({
	channel: "web", // tipo
	amount: 100, // monto total
	antifraud: {
	// para evitar fraudes
	clientIp: ip, // ip de usuario
	merchantDefineData: {
	// datos del usuario
	MDD4: "yonatanvigiliolavado09@gmail.com", // email
	MDD21: 0, // 0 nuevo usuario , 1 usuario que ya compro en esa tienda
	MDD32: "ORDER-00001", //id de usuario
	MDD75: "Registrado", // Registrado, Invitado o Empleado
	MDD77:
	Math.floor(
	(new Date().getTime() -
	new Date("2024-02-05").getTime()) /
	(1000 * 3600 * 24)
	) + 1, // dias de cuando se creo la cuenta el usuario
	},
	},
	}),
	}
	);
	const token = await responsePost.json();
	return token.sessionKey;
	}

	export async function izipayMethod() {
	const response = await fetch(enviroments.IZIPAY_URL, {
	method: "POST",
	headers: {
	Authorization: `Basic ${btoa(
	`${enviroments.IZIPAY_CLIENT_ID}:${enviroments.IZIPAY_CLIENT_SECRET}`
	)}`,
	"Content-type": "application/json",
	},
	body: JSON.stringify({
	amount: 10000, // 10000 = 100.00
	currency: "USD", // dolares - comunicarte con izipay que tipo de pago
	orderId: "ORD-0001",
	customer: {
	email: "yonatanvigiliolavado09@gmail.com", // email de usuario
	},
	}),
	});
	const result = await response.json();
	const token = result.answer.formToken;
	return token;
	}