@uappi/public-sdk 1.4.2 → 1.4.3

package/components/PaymentHosted/PaymentHosted.vue

@@ -17,6 +17,7 @@ const iframeEl = ref<HTMLIFrameElement | null>(null);
 const paymentToken = ref<string | null>(null);
 const loadingToken = ref(true);
 const tokenError = ref<string | null>(null);
+const iframeHeight = ref<number | null>(null);
 
 const iframeSrc = computed(() => {
   if (!paymentToken.value) return '';
@@ -66,12 +67,13 @@ async function fetchPaymentToken(): Promise<void> {
 function handleIframeMessage(event: MessageEvent): void {
   if (!iframeEl.value || event.source !== iframeEl.value.contentWindow) return;
 
-  const { type, data, url, errorCode, message } = (event.data ?? {}) as {
+  const { type, data, url, errorCode, message, height } = (event.data ?? {}) as {
     type: string;
     data: PaymentSuccessData & PaymentRedirectData;
     url: string;
     errorCode: string | undefined;
     message: string;
+    height: number | undefined;
   };
 
   switch (type) {
@@ -90,6 +92,10 @@ function handleIframeMessage(event: MessageEvent): void {
     case 'UAPPI_PAYMENT_ERROR':
       emit('payment-error', errorCode, message);
       break;
+
+    case 'UAPPI_PAYMENT_RESIZE':
+      if (typeof height === 'number' && height > 0) iframeHeight.value = height;
+      break;
   }
 }
 
@@ -101,13 +107,14 @@ onMounted(async () => {
 onUnmounted(() => {
   window.removeEventListener('message', handleIframeMessage);
 });
+
 </script>
 
 <template>
-  <div class="payment-hosted-fields">
-    <div v-if="loadingToken" class="payment-hosted-fields__skeleton" />
+  <div class="payment-hosted">
+    <div v-if="loadingToken" class="payment-hosted__skeleton" />
 
-    <p v-else-if="tokenError" class="payment-hosted-fields__error">
+    <p v-else-if="tokenError" class="payment-hosted__error">
       {{ tokenError }}
     </p>
 
@@ -115,7 +122,8 @@ onUnmounted(() => {
       v-else-if="iframeSrc"
       ref="iframeEl"
       :src="iframeSrc"
-      class="payment-hosted-fields__iframe"
+      :style="iframeHeight ? { height: `${iframeHeight}px` } : undefined"
+      class="payment-hosted__iframe"
       frameborder="0"
       scrolling="no"
       title="Formulário de pagamento seguro"

package/components/PaymentHosted/styles.scoped.css

@@ -1,16 +1,16 @@
-.payment-hosted-fields {
+.payment-hosted {
   width: 100%;
 }
 
-.payment-hosted-fields__iframe {
+.payment-hosted__iframe {
   display: block;
   width: 100%;
-  height: 100%;
   min-height: 420px;
   border: none;
+  transition: height 0.2s ease;
 }
 
-.payment-hosted-fields__skeleton {
+.payment-hosted__skeleton {
   width: 100%;
   height: 420px;
   border-radius: 4px;
@@ -21,15 +21,15 @@
     var(--neutral-surface-low) 63%
   );
   background-size: 400% 100%;
-  animation: payment-hosted-fields-skeleton 1.4s ease infinite;
+  animation: payment-hosted-skeleton 1.4s ease infinite;
 }
 
-@keyframes payment-hosted-fields-skeleton {
+@keyframes payment-hosted-skeleton {
   0% { background-position: 100% 50%; }
   100% { background-position: 0 50%; }
 }
 
-.payment-hosted-fields__error {
+.payment-hosted__error {
   margin: 0;
   padding: 16px;
   text-align: center;

package/components/README.md

@@ -25,6 +25,8 @@ Renderiza o formulário de pagamento (cartão, etc.) dentro de um `<iframe>` iso
 
 O componente busca um token de pagamento via `api.cart.paymentToken` ao montar, monta a URL do iframe com esse token, e escuta `postMessage` do iframe para emitir eventos de pagamento. Mensagens de janelas que não sejam o `contentWindow` do próprio iframe são ignoradas.
 
+A altura do iframe tem um piso definido em CSS (`min-height`), mas se ajusta automaticamente ao conteúdo quando o `render.uappi` envia `postMessage({ type: 'UAPPI_PAYMENT_RESIZE', height })` (`height` em pixels, número do conteúdo real do formulário). Isso é necessário porque o iframe é cross-origin — o componente não tem acesso ao `contentDocument` para medir a altura sozinho. Sem esse evento, o iframe mantém apenas o `min-height` fixo.
+
 ```vue
 <script setup lang="ts">
 import { PaymentHosted } from '@uappi/public-sdk';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uappi/public-sdk",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Pacotes públicos para desenvolvimento do ecossistema Uappi",
   "main": "main.ts",
   "scripts": {