@uappi/public-sdk 1.3.0 → 1.4.0

package/components/PaymentHostedFields/PaymentHostedFields.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+import api from '../../modules/Api';
+
+import type { Props, Emits, PaymentSuccessData, PaymentRedirectData } from './types';
+
+// `PaymentHostedFields` renderiza o formulário de pagamento via iframe isolado,
+// servido pelo serviço `render.uappi`. Todos os dados sensíveis (número do cartão,
+// CVV, etc.) trafegam diretamente entre o iframe e o gateway, sem passar pela loja.
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const iframeEl = ref<HTMLIFrameElement | null>(null);
+
+const paymentToken = ref<string | null>(null);
+const loadingToken = ref(true);
+const tokenError = ref<string | null>(null);
+
+const iframeSrc = computed(() => {
+  if (!paymentToken.value) return '';
+
+  const host = props.iframeHost
+    ?? (import.meta.env.VITE_PAYMENT_IFRAME_HOST as string | undefined)
+    ?? 'https://payments.uappi.store';
+
+  const url = new URL(host);
+
+  url.searchParams.set('token', paymentToken.value);
+
+  if (props.ctaColor) url.searchParams.set('ctaColor', props.ctaColor.replace('#', ''));
+  if (props.lang) url.searchParams.set('lang', props.lang);
+  if (props.countryCode) url.searchParams.set('countryCode', props.countryCode);
+
+  return url.toString();
+});
+
+async function fetchPaymentToken(): Promise<void> {
+  loadingToken.value = true;
+  tokenError.value = null;
+
+  try {
+    const response = await api.cart.paymentToken({ paymentOptionId: props.option.id });
+
+    if (!response?.token) {
+      console.error('[PaymentHostedFields] Token ausente na resposta:', response);
+      tokenError.value = 'Não foi possível iniciar o formulário de pagamento.';
+      return;
+    }
+
+    paymentToken.value = response.token;
+  } catch (err) {
+    console.error('[PaymentHostedFields] Erro ao buscar token de pagamento:', err);
+    tokenError.value = 'Não foi possível iniciar o formulário de pagamento.';
+  } finally {
+    loadingToken.value = false;
+  }
+}
+
+/**
+ * Só processa mensagens cuja origem seja a própria janela do iframe renderizado
+ * por este componente, evitando que outra janela/frame na página finja ser o
+ * render.uappi e injete eventos de pagamento falsos.
+ */
+function handleIframeMessage(event: MessageEvent): void {
+  if (!iframeEl.value || event.source !== iframeEl.value.contentWindow) return;
+
+  const { type, data, url, errorCode, message } = (event.data ?? {}) as {
+    type: string;
+    data: PaymentSuccessData & PaymentRedirectData;
+    url: string;
+    errorCode: string | undefined;
+    message: string;
+  };
+
+  switch (type) {
+    case 'UAPPI_PAYMENT_READY':
+      emit('payment-ready');
+      break;
+
+    case 'UAPPI_PAYMENT_SUCCESS':
+      emit('payment-success', data);
+      break;
+
+    case 'UAPPI_PAYMENT_REDIRECT':
+      emit('payment-redirect', url, data);
+      break;
+
+    case 'UAPPI_PAYMENT_ERROR':
+      emit('payment-error', errorCode, message);
+      break;
+  }
+}
+
+onMounted(async () => {
+  window.addEventListener('message', handleIframeMessage);
+  await fetchPaymentToken();
+});
+
+onUnmounted(() => {
+  window.removeEventListener('message', handleIframeMessage);
+});
+</script>
+
+<template>
+  <div class="payment-hosted-fields">
+    <div v-if="loadingToken" class="payment-hosted-fields__skeleton" />
+
+    <p v-else-if="tokenError" class="payment-hosted-fields__error">
+      {{ tokenError }}
+    </p>
+
+    <iframe
+      v-else-if="iframeSrc"
+      ref="iframeEl"
+      :src="iframeSrc"
+      class="payment-hosted-fields__iframe"
+      frameborder="0"
+      scrolling="no"
+      title="Formulário de pagamento seguro"
+      allow="payment"
+    />
+  </div>
+</template>
+
+<style scoped src="./styles.scoped.css" />

package/components/PaymentHostedFields/index.ts

@@ -0,0 +1 @@
+export { default as PaymentHostedFields } from './PaymentHostedFields.vue';

package/components/PaymentHostedFields/styles.scoped.css

@@ -0,0 +1,37 @@
+.payment-hosted-fields {
+  width: 100%;
+}
+
+.payment-hosted-fields__iframe {
+  display: block;
+  width: 100%;
+  min-height: 420px;
+  border: none;
+}
+
+.payment-hosted-fields__skeleton {
+  width: 100%;
+  height: 420px;
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    var(--neutral-surface-low) 25%,
+    var(--neutral-border) 37%,
+    var(--neutral-surface-low) 63%
+  );
+  background-size: 400% 100%;
+  animation: payment-hosted-fields-skeleton 1.4s ease infinite;
+}
+
+@keyframes payment-hosted-fields-skeleton {
+  0% { background-position: 100% 50%; }
+  100% { background-position: 0 50%; }
+}
+
+.payment-hosted-fields__error {
+  margin: 0;
+  padding: 16px;
+  text-align: center;
+  font: var(--body);
+  color: var(--negative-text, #d32f2f);
+}

package/components/PaymentHostedFields/types.ts

@@ -0,0 +1,33 @@
+import type { PaymentOption, BuyCartResponse } from '../../modules/Api/types';
+
+export interface Props {
+  /** Opção de pagamento selecionada (ex: item retornado por `api.cart.listPayments`). */
+  option: PaymentOption;
+  /** Cor hex do botão CTA do iframe (com ou sem `#`). Se omitida, o iframe usa a cor padrão do render.uappi. */
+  ctaColor?: string;
+  /** Locale do formulário (`pt-BR`, `en-US`, `es-ES`, ...). Padrão do iframe: `pt-BR`. */
+  lang?: string;
+  /** Código Alpha-3 para pré-selecionar o DDI do telefone (`BRA`, `USA`, ...). Padrão do iframe: `BRA`. */
+  countryCode?: string;
+  /** Host do serviço render.uappi. Sobrescreve `VITE_PAYMENT_IFRAME_HOST` quando informado. */
+  iframeHost?: string;
+}
+
+export interface Emits {
+  (e: 'payment-ready'): void;
+  (e: 'payment-success', data: PaymentSuccessData): void;
+  (e: 'payment-redirect', url: string, data: PaymentRedirectData): void;
+  (e: 'payment-error', errorCode: string | undefined, message: string): void;
+}
+
+/**
+ * Dados do pedido criado, repassados pelo iframe em `UAPPI_PAYMENT_SUCCESS`.
+ * Mesmo formato retornado por `api.cart.buy` (`POST /cart/buy`).
+ */
+export type PaymentSuccessData = BuyCartResponse;
+
+/**
+ * Dados que acompanham um `UAPPI_PAYMENT_REDIRECT`. O contrato exato é definido
+ * pelo serviço render.uappi e pode variar por gateway, por isso não é tipado em detalhe.
+ */
+export type PaymentRedirectData = Record<string, unknown>;

package/components/index.ts

@@ -1,3 +1,4 @@
 export * from './Animations';
 export * from './ColorTheme';
+export * from './PaymentHostedFields';
 export * from './SocialAuth';

package/modules/Api/endpoints/CartComposable.ts

@@ -10,6 +10,8 @@ import type {
   PaymentResponse,
   BuyCartRequest,
   BuyCartResponse,
+  PaymentTokenCartRequest,
+  PaymentTokenCartResponse,
 } from '../types';
 
 export function listDetail() {
@@ -111,6 +113,14 @@ export function buy(payload: BuyCartRequest) {
   });
 }
 
+export function paymentToken(payload: PaymentTokenCartRequest) {
+  return usePublicApi<PaymentTokenCartResponse>({
+    endpoint: '/cart/payment-token',
+    method: 'POST',
+    payload,
+  });
+}
+
 
 export function recovery(recoveryCode: string) {
   const response = usePublicApi<CartResponse>({

package/modules/Api/index.ts

@@ -15,7 +15,8 @@ import {
   buy,
   applyPoint,
   deletePoint,
-  recovery
+  recovery,
+  paymentToken
 } from './endpoints/CartComposable';
 import {
   listContries,
@@ -156,7 +157,8 @@ const cart = {
   buy,
   paymentConditions,
   upsells,
-  recovery
+  recovery,
+  paymentToken
 };
 
 const product = {

package/modules/Api/types/endpoints/cart/cart.interfaces.ts

@@ -159,3 +159,11 @@ export interface BuyCartResponse {
   userId: null;
   userName: null;
 }
+
+export interface PaymentTokenCartRequest {
+  paymentOptionId: number;
+}
+
+export interface PaymentTokenCartResponse {
+  token: string;
+}

package/modules/Api/types/index.ts

@@ -40,6 +40,8 @@ import type {
   AddressToCartResponse,
   BuyCartRequest,
   BuyCartResponse,
+  PaymentTokenCartRequest,
+  PaymentTokenCartResponse,
 } from './endpoints/cart/cart.interfaces';
 import type {
   AddressToCartType,
@@ -419,6 +421,8 @@ export type {
   AddressToCartResponse,
   BuyCartRequest,
   BuyCartResponse,
+  PaymentTokenCartRequest,
+  PaymentTokenCartResponse,
 
   // Payment
   ConfigurationCode,

package/package.json

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