diff --git a/assets/iconPix.svg b/assets/iconPix.svg
new file mode 100644
index 0000000..af826b6
--- /dev/null
+++ b/assets/iconPix.svg
@@ -0,0 +1,38 @@
+
diff --git a/react/PayWithPix.tsx b/react/PayWithPix.tsx
new file mode 100644
index 0000000..13fe3a0
--- /dev/null
+++ b/react/PayWithPix.tsx
@@ -0,0 +1,3 @@
+import { PayWithPix } from "./components/PayWithPix/PayWithPix";
+
+export default PayWithPix;
diff --git a/react/ProductContext.tsx b/react/ProductContext.tsx
new file mode 100644
index 0000000..fbdca5f
--- /dev/null
+++ b/react/ProductContext.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import { useProduct } from "vtex.product-context";
+
+const ProductContext = () => {
+ const productContext = useProduct();
+ const [simulation, setSimulation] = useState();
+ useEffect(() => {
+ fetch("/api/checkout/pub/orderForms/simulation?sc=1", {
+ headers: {
+ Accept: "application/json",
+ "Content-Type": "application/json",
+ },
+ method: "POST",
+ body: JSON.stringify({
+ paymentData: {
+ payments: [{ paymentSystem: "125", installments: 1 }],
+ },
+ items: [
+ {
+ id: productContext?.selectedItem?.itemId,
+ quantity: 1,
+ seller: "1",
+ },
+ ],
+ country: "BRA",
+ }),
+ }).then(async (res) => {
+ setSimulation(await res.json());
+ });
+ }, [productContext?.selectedItem]);
+
+ console.log("productContext", productContext);
+ return <> {simulation?.paymentData?.payments[0]?.value};
+};
+
+export default ProductContext;
diff --git a/react/components/PayWithPix/PayWithPix.css b/react/components/PayWithPix/PayWithPix.css
new file mode 100644
index 0000000..cef306a
--- /dev/null
+++ b/react/components/PayWithPix/PayWithPix.css
@@ -0,0 +1,33 @@
+.PayWithPix {
+ display: flex;
+ column-gap: 26px;
+ align-items: center;
+ margin: 16px 0 24px;
+}
+
+.PayWithPix__pixIcon {
+ width: 66px;
+ height: 24px;
+ display: block;
+}
+
+.PayWithPix__wrapper {
+ display: flex;
+ flex-direction: column;
+}
+
+.PayWithPix__price {
+ font-family: "Open Sans", sans-serif;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ color: rgba(0, 0, 0, 0.58);
+ margin: 0;
+}
+
+.PayWithPix__discount {
+ font-family: "Open Sans", sans-serif;
+ font-weight: 300;
+ font-size: 13px;
+ color: #929292;
+}
diff --git a/react/components/PayWithPix/PayWithPix.tsx b/react/components/PayWithPix/PayWithPix.tsx
new file mode 100644
index 0000000..2f54ace
--- /dev/null
+++ b/react/components/PayWithPix/PayWithPix.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+import style from "./PayWithPix.css";
+
+const PayWithPix = () => {
+ const productContextValue = useProduct();
+
+ const discount =
+ (productContextValue?.product?.priceRange?.sellingPrice?.highPrice ?? 0) *
+ 0.9;
+ const priceFormatted = discount?.toFixed(2).toString().replace(".", ",");
+
+ return (
+
+
+
R$ {priceFormatted}
+
10 % de desconto
+
+