react/Pix.tsx

@@ -0,0 +1,3 @@
+import Pix from "./components/Pix/Pix";
+
+export default Pix;

react/components/Pix/Pix.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./styles.css";
+
+const Pix = () => {
+  const product = useProduct();
+  const pix = {
+    pix: Number(
+      product?.selectedItem?.sellers[0].commertialOffer.Installments[0].Value
+    ),
+  };
+  const discount = pix.pix * 0.1;
+  const pixPrice = pix.pix - discount;
+
+  return (
+    <div className={styles.PixContent}>
+      <img
+        className={styles.ImgPixContent}
+        src="https://agenciamagma.vteximg.com.br/arquivos/icon-pix-anacarolinaduartecavalcante-m3academy.svg"
+        alt="logo pix"
+      />
+      <div className={styles.PixDiscount}>
+        <strong>
+          R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
+        </strong>
+        <span>10 % de desconto</span>
+      </div>
+    </div>
+  );
+};
+
+export default Pix;

react/components/Pix/styles.css

@@ -0,0 +1,16 @@
+.PixContent {
+  margin-top: 8px;
+  height: 24px;
+  display: flex;
+  column-gap: 26px;
+}
+
+.ImgPixContent{
+  width: 66.01px;
+  height: 24px;
+}
+
+.PixDiscount{
+  display: flex;
+  flex-direction: column;
+}

store/blocks/pdp/product.jsonc

@@ -111,6 +111,7 @@
       "product-rating-summary",
       "flex-layout.row#selling-price",
       "installment-product-component",
+      "html#pix-component",
       "product-separator",
       "sku-selector",
       "product-quantity",
@@ -122,6 +123,12 @@
       "share#default"
     ]
   },
+  "html#pix-component": {
+    "props": {
+      "testId": "pix-price"
+    },
+    "children": ["pix-component"]
+  },
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3

store/interfaces.json

@@ -8,5 +8,8 @@
   },
   "installment-product-component": {
     "component": "InstallmentProduct"
+  },
+  "pix-component": {
+    "component": "Pix"
   }
 }