diff --git a/react/Pix.ts b/react/Pix.ts
new file mode 100644
index 0000000..52ecbb2
--- /dev/null
+++ b/react/Pix.ts
@@ -0,0 +1,3 @@
+import Pix from "./components/Pix/Pix";
+
+export default Pix;
diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
new file mode 100644
index 0000000..e51b5be
--- /dev/null
+++ b/react/components/Pix/Pix.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+const Pix = () => {
+  const productContextValue = useProduct()?.product?.priceRange?.sellingPrice
+    ?.highPrice;
+
+  return (
+    <>
+      <div className="pix-container">
+        <div className="pix_img-container">
+          <img
+            src="https://agenciamagma.vtexassets.com/arquivos/icon_pix-m3academyemersonfully.png"
+            alt="Pix"
+          />
+        </div>
+        <div className="pix_price-container">
+          {`R$ ${(productContextValue! - productContextValue! * 0.1)
+            .toFixed(2)
+            .replace(".", ",")}`}
+          <div className="pix_discount-container">
+            <span>10% de desconto</span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Pix;