@uappi/public-sdk 1.3.0 → 1.4.1

package/components/PaymentHosted/PaymentHosted.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';
+
+// `PaymentHosted` 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('[PaymentHosted] 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('[PaymentHosted] 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/PaymentHosted/index.ts

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

package/components/PaymentHosted/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/PaymentHosted/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/README.md

@@ -0,0 +1,163 @@
+# ../../components
+
+Componentes Vue 3 + TypeScript prontos para uso nas lojas do ecossistema Uappi.
+
+## Instalação
+
+Adicione ao seu projeto:
+
+```bash
+npm install @uappi/public-sdk
+```
+
+## Componentes Disponíveis
+
+- [**PaymentHosted**](#PaymentHosted): Formulário de pagamento hospedado via iframe isolado (render.uappi).
+- [**ColorTheme**](#colortheme): Aplica variáveis CSS de cor e fonte customizadas da loja no `document.documentElement`.
+- [**SocialAuth**](#socialauth): Botões de login social (`GoogleAuth`, `FacebookAuth`) via OAuth em popup.
+- [**Animations**](#animations): Utilitários de transição (`ExpandTransition`).
+
+---
+
+## [PaymentHosted](#PaymentHosted)
+
+Renderiza o formulário de pagamento (cartão, etc.) dentro de um `<iframe>` isolado, servido pelo serviço `render.uappi`. Dados sensíveis (número do cartão, CVV, etc.) trafegam diretamente entre o iframe e o gateway, sem passar pela loja.
+
+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.
+
+```vue
+<script setup lang="ts">
+import { PaymentHosted } from '@uappi/public-sdk';
+import type { PaymentSuccessData, PaymentRedirectData } from '@uappi/public-sdk';
+
+function onSuccess(data: PaymentSuccessData) {
+  // pedido criado, mesmo formato de api.cart.buy
+}
+
+function onRedirect(url: string, data: PaymentRedirectData) {
+  // gateway pediu redirecionamento (ex: 3DS)
+}
+
+function onError(errorCode: string | undefined, message: string) {
+  // falha reportada pelo render.uappi
+}
+</script>
+
+<template>
+  <PaymentHosted
+    :option="selectedPaymentOption"
+    cta-color="#FF0000"
+    lang="pt-BR"
+    country-code="BRA"
+    @payment-ready="onReady"
+    @payment-success="onSuccess"
+    @payment-redirect="onRedirect"
+    @payment-error="onError"
+  />
+</template>
+```
+
+### Props
+
+| Prop | Tipo | Obrigatório | Descrição |
+|---|---|---|---|
+| `option` | `PaymentOption` | Sim | Opção de pagamento selecionada (item retornado por `api.cart.listPayments`). |
+| `ctaColor` | `string` | Não | Cor hex do botão CTA do iframe (com ou sem `#`). Padrão: cor do render.uappi. |
+| `lang` | `string` | Não | Locale do formulário (`pt-BR`, `en-US`, `es-ES`, ...). Padrão: `pt-BR`. |
+| `countryCode` | `string` | Não | Código Alpha-3 para pré-selecionar o DDI do telefone (`BRA`, `USA`, ...). Padrão: `BRA`. |
+| `iframeHost` | `string` | Não | Host do serviço render.uappi. Sobrescreve `VITE_PAYMENT_IFRAME_HOST` quando informado. |
+
+### Eventos
+
+| Evento | Payload | Quando é emitido |
+|---|---|---|
+| `payment-ready` | — | Iframe carregou e está pronto para interação. |
+| `payment-success` | `data: PaymentSuccessData` | Pagamento concluído; `data` tem o mesmo formato de `api.cart.buy`. |
+| `payment-redirect` | `url: string, data: PaymentRedirectData` | Gateway exige redirecionamento (ex: autenticação 3DS). |
+| `payment-error` | `errorCode: string \| undefined, message: string` | Falha ao processar o pagamento. |
+
+---
+
+## [ColorTheme](#colortheme)
+
+Aplica cores e fonte customizadas da loja como variáveis CSS globais (`--primary-cta-text`, `--checkout-cta-default`, `--font-family`, etc.) assim que é montado. Não renderiza elementos próprios — repassa o slot padrão via `Fragment`.
+
+```vue
+<script setup lang="ts">
+import { ColorTheme } from '@uappi/public-sdk';
+import type { CSSVariables } from '@uappi/public-sdk';
+
+const variables: CSSVariables = {
+  font: { family: 'Inter', link: 'https://fonts.googleapis.com/css2?family=Inter' },
+  colors: {
+    CheckoutCTADefault: '#000000',
+    CheckoutCTAHover: '#333333',
+    CheckoutCTAText: '#FFFFFF',
+    PrimaryCTAText: '#FFFFFF',
+    PrimaryInteractiveDefault: '#000000',
+    PrimaryInteractiveHover: '#333333',
+    PrimaryInteractiveHoverLow: '#666666',
+    PrimarySurfaceDisabled: '#CCCCCC',
+    PrimarySurfaceLow: '#F5F5F5',
+    PrimaryTextDecorative: '#000000',
+  },
+};
+</script>
+
+<template>
+  <ColorTheme :variables="variables">
+    <App />
+  </ColorTheme>
+</template>
+```
+
+---
+
+## [SocialAuth](#socialauth)
+
+- `GoogleAuth` / `FacebookAuth`: botão de login social que abre um popup OAuth via `api.thirdParty.oauthRedirect`.
+
+```vue
+<script setup lang="ts">
+import { GoogleAuth, FacebookAuth } from '@uappi/public-sdk';
+</script>
+
+<template>
+  <GoogleAuth uri="/conta" />
+  <FacebookAuth uri="/conta" />
+</template>
+```
+
+| Prop | Tipo | Obrigatório | Descrição |
+|---|---|---|---|
+| `uri` | `string` | Sim | Prefixo de rota da loja usado para montar as URLs de callback (`{uri}/signin`, `{uri}/signup`). |
+
+---
+
+## [Animations](#animations)
+
+- `ExpandTransition`: wrapper sobre `<Transition>` do Vue que anima altura e opacidade (expandir/colapsar), útil para acordeões e listas condicionais.
+
+```vue
+<script setup lang="ts">
+import { ExpandTransition } from '@uappi/public-sdk';
+</script>
+
+<template>
+  <ExpandTransition>
+    <div v-if="open">Conteúdo</div>
+  </ExpandTransition>
+</template>
+```
+
+| Prop | Tipo | Obrigatório | Descrição |
+|---|---|---|---|
+| `mode` | `BaseTransitionProps['mode']` | Não | Modo de transição do Vue (`in-out`, `out-in`, `default`). Padrão: `out-in`. |
+
+## Contribuição
+
+Contribuições são bem-vindas! Abra uma issue ou envie um pull request.
+
+## Licença
+
+ISC

package/components/index.ts

@@ -1,3 +1,4 @@
 export * from './Animations';
 export * from './ColorTheme';
+export * from './PaymentHosted';
 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.1",
   "description": "Pacotes públicos para desenvolvimento do ecossistema Uappi",
   "main": "main.ts",
   "scripts": {