react/InstallmentProduct.tsx

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

react/components/InstallmentProduct/InstallmentProduct.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+
+const InstallmentProduct = () => {
+  const product = useProduct();
+
+  const productWithInstallments = {
+    numberOfInstallments:
+      product?.selectedItem?.sellers[0].commertialOffer.Installments[10]
+        .NumberOfInstallments,
+    value:
+      product?.selectedItem?.sellers[0].commertialOffer.Installments[10].Value,
+  };
+  return (
+    <p className="vtex-flex-layout-0-x-PriceContent">
+      <strong>
+        {productWithInstallments.numberOfInstallments}x&nbsp;
+      </strong>
+      de&nbsp;
+      <strong>
+        R$&nbsp;
+        {productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
+      </strong> sem juros
+     
+    </p>
+  );
+};
+
+export default InstallmentProduct;

store/interfaces.json

@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "installment-product-component": {
+    "component": "InstallmentProduct"
   }
 }