Migração - Widget Cartão Crédito

Para quem é este guia?

Este guia destina-se a desenvolvedores que utilizam o widget do Faturamento para a realização das prés-autorizações e precisam migrar para o widget do MagPay.

Escolha o tipo de integração que você utiliza:

Integração via iframe (QueryString) - Você incorpora o widget através de um iframe com parâmetros na URL
Integração via Componente Angular - Você usa o widget como componente Angular em sua aplicação

1. Integração via iframe

Antes (Faturamento):

json

https://widgets.mongeralaegon.com.br/widget-cartao-credito/v3/

json

https://widgets.mongeralaegon.com.br/widget-cartao-credito/v3/

Depois (MagPay):

json

https://widgets.mongeralaegon.com.br/MagPay.Widgets-credit-card/

json

https://widgets.mongeralaegon.com.br/MagPay.Widgets-credit-card/

1.2 Atualizar Parâmetros QueryString

Os parâmetros mudaram. Veja o mapeamento:

Faturamento	MagPay
`acao=PreAutorizacao`	`isPreApproval=true`
`valorCompra=150.00`	`purchaseAmount=150.00`
`cnpj, chave, valor`	Removidos

1.3 Enviar Token de Autenticação

O MagPay requer autenticação OAuth2. O token deve ser enviado via postMessage para o iframe:

Antes (Faturamento):

json

window.postMessage({
  event: 'notify',
  property: 'Auth',
  value: 'seu-token-aqui'
}, 'https://widgets.mongeralaegon.com.br');

json

window.postMessage({
  event: 'notify',
  property: 'Auth',
  value: 'seu-token-aqui'
}, 'https://widgets.mongeralaegon.com.br');

Depois (MagPay):

json

const iframe = document.getElementById('magpay-widget').contentWindow;
iframe.postMessage(JSON.stringify({
  access_token: 'seu-token-aqui'
}), 'https://widgets.mongeralaegon.com.br');

json

const iframe = document.getElementById('magpay-widget').contentWindow;
iframe.postMessage(JSON.stringify({
  access_token: 'seu-token-aqui'
}), 'https://widgets.mongeralaegon.com.br');

1.4 Adaptar Pré-Autorização

Para migrar a funcionalidade de Pré-Aprovação do Faturamento para o MagPay, siga estas 3 etapas:

Etapa 1: Atualizar URL e parâmetros do iframe

Antes (Faturamento):

Depois (MagPay):

Etapa 2: Atualizar envio do token de autenticação

Antes (Faturamento):

json

window.postMessage({
  event: 'notify',
  property: 'Auth',
  value: 'seu-token-aqui'
}, 'https://widgets.mongeralaegon.com.br');

json

window.postMessage({
  event: 'notify',
  property: 'Auth',
  value: 'seu-token-aqui'
}, 'https://widgets.mongeralaegon.com.br');

Depois (MagPay):

json

const iframe = document.getElementById('magpay-widget').contentWindow;
iframe.postMessage(JSON.stringify({
  access_token: 'seu-token-aqui'
}), 'https://widgets.mongeralaegon.com.br');

json

const iframe = document.getElementById('magpay-widget').contentWindow;
iframe.postMessage(JSON.stringify({
  access_token: 'seu-token-aqui'
}), 'https://widgets.mongeralaegon.com.br');

Etapa 3: Atualizar retorno do postMessage

Exemplo de resposta do postMessage:

json

{
  "tipo": "cartao-credito-sucesso",
  "id": "32c5a91b-d4ba-47d6-9f8d-f1c178e79a25",
  "preApprovalId": "a5f18e98-5c14-4a54-8b07-1c510be756eb",
  "authorizationCode": 45927
}

json

{
  "tipo": "cartao-credito-sucesso",
  "id": "32c5a91b-d4ba-47d6-9f8d-f1c178e79a25",
  "preApprovalId": "a5f18e98-5c14-4a54-8b07-1c510be756eb",
  "authorizationCode": 45927
}

⚠️ A propriedade CodigoPreAutorizacao foi renomeada para authorizationCode

Atualize a propriedade conforme a tabela abaixo:

Faturamento (Antes)	MagPay (Depois)
`codigoPreAutorizacao`	`authorizationCode`

Exemplo completo

2. Integração via Componente Angular

2.1 Remover pacote antigo

Desinstale o pacote do widget Faturamento:

npm uninstall @mongeral/cartao-credito

2.2 Instalar novo pacote

Instale o pacote MagPay versão 19.6.1 ou superior:

npm install @magpay/credit-card@^19.6.1

2.3 Instalar dependências obrigatórias

Instale as dependências necessárias para autenticação e monitoramento:

npm install @mongeral/componentes-authentication @mongeral/componentes-insights

2.4 Configurar app.module.ts

Substitua o import do pacote antigo "@mongeral/cartao-credito" pelo novo pacote "@magpay/credit-card"

json

import { NgModule } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { CreditcardModule } from '@magpay/credit-card';  //  Novo pacote MagPay
import { AuthModule } from '@mongeral/componentes-authentication';
import { InsightsModule } from '@mongeral/componentes-insights';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AuthModule.forRoot(environment.authConfig),
    InsightsModule.configureInsightsKey(environment.instrumentationKeyFaturamento),
    CreditcardModule.forRoot(environment)
  ],
  providers: [
    provideHttpClient(withInterceptorsFromDi())
  ]
})
export class AppModule { }

json

import { NgModule } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { CreditcardModule } from '@magpay/credit-card';  //  Novo pacote MagPay
import { AuthModule } from '@mongeral/componentes-authentication';
import { InsightsModule } from '@mongeral/componentes-insights';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AuthModule.forRoot(environment.authConfig),
    InsightsModule.configureInsightsKey(environment.instrumentationKeyFaturamento),
    CreditcardModule.forRoot(environment)
  ],
  providers: [
    provideHttpClient(withInterceptorsFromDi())
  ]
})
export class AppModule { }

Nota: Se você já usa .forRoot(environment) no Faturamento, mantenha assim. A única mudança é trocar @mongeral/cartao-credito por @magpay/credit-card.

2.5 Configuração para Standalone

Se você utiliza componentes standalone, configure no app.config.ts:

json

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptorsFromDi())
  ]
};

json

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptorsFromDi())
  ]
};

E no componente, importe apenas o CreditcardModule:

json

import { Component } from '@angular/core';
import { CreditcardModule } from '@magpay/credit-card';

@Component({
  selector: 'app-payment',
  standalone: true,
  imports: [CreditcardModule],
  template: ''
})
export class PaymentComponent { }

json

import { Component } from '@angular/core';
import { CreditcardModule } from '@magpay/credit-card';

@Component({
  selector: 'app-payment',
  standalone: true,
  imports: [CreditcardModule],
  template: ''
})
export class PaymentComponent { }

Nota: Para standalone, o AuthModule e InsightsModule devem ser configurados via providers.

2.6 Atualizar template do componente

Antes (Faturamento):

Depois (MagPay):

2.7 Criar objeto Configuration

json

import { Configuration, ActionType } from '@magpay/credit-card';

json

import { Configuration, ActionType } from '@magpay/credit-card';

A interface possui as seguintes propriedades:

json

interface Configuration {
  actionType: ActionType;
  purchaseAmount: number;
  showCard?: boolean;
  cardId?: string;
}

enum ActionType {
  PreApproval = 'PreApproval',
  Sale = 'Sale'
}

json

interface Configuration {
  actionType: ActionType;
  purchaseAmount: number;
  showCard?: boolean;
  cardId?: string;
}

enum ActionType {
  PreApproval = 'PreApproval',
  Sale = 'Sale'
}

Exemplo completo:

json

import { Component } from '@angular/core';

```json
import { Configuration, ActionType } from '@magpay/credit-card';

json

import { Component } from '@angular/core';

```json
import { Configuration, ActionType } from '@magpay/credit-card';

@Component({ selector: 'app-payment', template: '' }) export class PaymentComponent { config: Configuration = { actionType: ActionType.PreApproval, purchaseAmount: 150.00, showCard: true }; }

text

* * *

#### 2.8 Autenticação (somente V2)

⚠️ Se já utiliza Faturamento V3, pode pular esta etapa.

Exemplo com AuthService:

```json
import { Component, OnInit } from &#039;@angular/core&#039;;

```json
import { Configuration, ActionType } from &#039;@magpay/credit-card&#039;;

text

* * *

#### 2.8 Autenticação (somente V2)

⚠️ Se já utiliza Faturamento V3, pode pular esta etapa.

Exemplo com AuthService:

```json
import { Component, OnInit } from &#039;@angular/core&#039;;

```json
import { Configuration, ActionType } from &#039;@magpay/credit-card&#039;;

import { AuthService } from '@mongeral/componentes-authentication';

@Component({ selector: 'app-payment', template: '' }) export class PaymentComponent implements OnInit { config: Configuration = { actionType: ActionType.PreApproval, purchaseAmount: 150.00, showCard: true };

constructor(private authService: AuthService) {}

async ngOnInit() { await this.authService.fetchTokenUsingClientCredentialsFlow({ clientId: 'seu-client-id', clientSecret: 'seu-client-secret', scope: 'apimagpay', tokenUrl: 'https://auth.example.com/oauth/token' }); } }

text

* * *

#### 2.9 Escutar retorno do componente

Uso do @HostListener:

```json
@HostListener(&#039;window:message&#039;, [&#039;$event&#039;])
onMessage(event: MessageEvent) {
  if (event.data.Tipo === &#039;cartao-credito-sucesso&#039;) {
    console.log(&#039;Sucesso:&#039;, event.data.id);
  }

  if (event.data.Tipo === &#039;cartao-credito-erro&#039;) {
    console.error(&#039;Erros:&#039;, event.data.Mensagens);
  }
}

text

* * *

#### 2.9 Escutar retorno do componente

Uso do @HostListener:

```json
@HostListener(&#039;window:message&#039;, [&#039;$event&#039;])
onMessage(event: MessageEvent) {
  if (event.data.Tipo === &#039;cartao-credito-sucesso&#039;) {
    console.log(&#039;Sucesso:&#039;, event.data.id);
  }

  if (event.data.Tipo === &#039;cartao-credito-erro&#039;) {
    console.error(&#039;Erros:&#039;, event.data.Mensagens);
  }
}

2.10 Migrar Pré-Autorização

Para migrar do Faturamento para o MagPay, siga estas etapas:

Etapa 1: Atualizar configuração do componente

Antes (Faturamento):

json

DadosRecebidos = {
  acao: 'PreAutorizacao',
  valorCompra: 150.00,
  cnpj: '12345678000190',
  chave: ['p1', 'p2'],
  valor: ['v1', 'v2']
}

json

DadosRecebidos = {
  acao: 'PreAutorizacao',
  valorCompra: 150.00,
  cnpj: '12345678000190',
  chave: ['p1', 'p2'],
  valor: ['v1', 'v2']
}

Depois (MagPay):

json

config: Configuration = {
  actionType: ActionType.PreApproval,
  purchaseAmount: 150.00
}

json

config: Configuration = {
  actionType: ActionType.PreApproval,
  purchaseAmount: 150.00
}

⚠️ Remova os campos cnpj, chave e valor, pois eles não são mais utilizados no MagPay.

Mapeamento das mudanças na configuração:

Faturamento	MagPay
`acao = 'PreAutorizacao'`	`actionType = ActionType.PreApproval`
`valorCompra`	`purchaseAmount`
`cnpj, chave, valor`	Removidos

Etapa 2: Ajustar tratamento do retorno (postMessage)

Exemplo de resposta do postMessage:

json

{
  "tipo": "cartao-credito-sucesso",
  "id": "32c5a91b-d4ba-47d6-9f8d-f1c178e79a25",
  "preApprovalId": "a5f18e98-5c14-4a54-8b07-1c510be756eb",
  "authorizationCode": 45927
}

json

{
  "tipo": "cartao-credito-sucesso",
  "id": "32c5a91b-d4ba-47d6-9f8d-f1c178e79a25",
  "preApprovalId": "a5f18e98-5c14-4a54-8b07-1c510be756eb",
  "authorizationCode": 45927
}

⚠️ A propriedade CodigoPreAutorizacao foi renomeada para authorizationCode

Exemplo completo:

json

import { Component, HostListener } from '@angular/core';

```json
import { Configuration, ActionType } from '@magpay/credit-card';

json

import { Component, HostListener } from '@angular/core';

```json
import { Configuration, ActionType } from '@magpay/credit-card';

@Component({ selector: 'app-payment', template: '' }) export class PaymentComponent { config: Configuration = { actionType: ActionType.PreApproval, purchaseAmount: 150.00 };

@HostListener('window:message', ['$event']) onMessage(event: MessageEvent) { if (event.data.Tipo === 'cartao-credito-sucesso') { console.log('PreApproval:', event.data.preApprovalId); console.log('Auth Code:', event.data.authorizationCode); console.log('Card ID:', event.data.id); } if (event.data.Tipo === 'cartao-credito-erro') { console.error(event.data.Mensagens); } } }

text

* * *

* * *

### 3\. Problemas Comuns

#### 3.1 Problemas com iframe

#### iframe não carrega

Verifique se a URL está correta e se o token é válido. Erro CORS pode indicar token expirado ou inválido.

`

```json
https://widgets.mongeralaegon.com.br/MagPay.Widgets-credit-card/

text

* * *

* * *

### 3\. Problemas Comuns

#### 3.1 Problemas com iframe

#### iframe não carrega

Verifique se a URL está correta e se o token é válido. Erro CORS pode indicar token expirado ou inválido.

`

```json
https://widgets.mongeralaegon.com.br/MagPay.Widgets-credit-card/

?isPreApproval=true&purchaseAmount=150.00`

Parâmetros não reconhecidos

Verifique se os nomes dos parâmetros estão corretos: isPreApproval=true (não "acao=PreAutorizacao"), purchaseAmount (não "valorCompra").

Campo codigoPreAutorizacao não encontrado

O campo codigoPreAutorizacao foi renomeado para authorizationCode. Atualize para authorizationCode na resposta do postMessage.

3.2 Problemas com Componente Angular

Cannot find module '@magpay/credit-card'

Pacote não instalado ou não está no package.json.

npm install @magpay/credit-card@^19.6.1

CreditcardModule is not imported

Módulo não importado no app.module.ts ou componente standalone. Adicionar CreditcardModule nos imports do módulo.

json

import { CreditcardModule } from '@magpay/credit-card';

@NgModule({
  imports: [CreditcardModule]
})

json

import { CreditcardModule } from '@magpay/credit-card';

@NgModule({
  imports: [CreditcardModule]
})

authorizationCode retorna undefined

Versão antiga do pacote ou actionType não é PreApproval.

Token não está sendo enviado

Autenticação não configurada (comum em migração do V2). Implementar OAuth2 Client Credentials (ver seção 4).

Property 'configuration' does not exist

O template ainda está usando a propriedade antiga [DadosRecebidos]. Atualizar para [configuration].

NullInjectorError: No provider for HttpClient

O HttpClientModule não foi importado. Adicionar nos imports do módulo.

json

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    CreditcardModule
  ]
})

json

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    CreditcardModule
  ]
})

Componente não renderiza / tela em branco

Verificar se o seletor mg-creditcard está correto no template e se o CreditcardModule está importado.

Evento window:message não dispara

Verificar se o @HostListener('window:message') está declarado corretamente e se a configuração possui actionType definido.

Cannot read property 'authConfig' of undefined

O objeto environment não possui a propriedade necessária. Verificar se o arquivo environment.ts contém todas as configurações:

json

export const environment = {
  production: false,
  authConfig: {
    clientId: 'seu-client-id',
    authority: 'https://auth.example.com',
    // ... outras configs
  },
  instrumentationKeyFaturamento: 'sua-chave-insights',
  // Configurações do widget
  apiUrl: 'https://api.example.com',
  // ... outras configs necessárias
};

json

export const environment = {
  production: false,
  authConfig: {
    clientId: 'seu-client-id',
    authority: 'https://auth.example.com',
    // ... outras configs
  },
  instrumentationKeyFaturamento: 'sua-chave-insights',
  // Configurações do widget
  apiUrl: 'https://api.example.com',
  // ... outras configs necessárias
};

TypeError: Cannot read properties of undefined (reading 'forRoot')

O módulo não foi importado corretamente. Verificar se o import está correto:

json

import { CreditcardModule } from '@magpay/credit-card';  // ✅ Correto
import { CreditcardModule } from '@mongeral/cartao-credito';  // ❌ Errado

json

import { CreditcardModule } from '@magpay/credit-card';  // ✅ Correto
import { CreditcardModule } from '@mongeral/cartao-credito';  // ❌ Errado

Versão do Angular incompatível

O widget MagPay requer Angular 19 ou superior. Verificar a versão no package.json:

npm list @angular/core

Se necessário, atualizar o Angular antes de migrar o widget.

Nesta página

MagPay - Migração do Widget de Cartão de Crédito

1\. Integração via iframe

2\. Integração via Componente Angular

Widgets

Migração - Widget Cartão Crédito

MagPay - Migração do Widget de Cartão de Crédito

Para quem é este guia?

1. Integração via iframe

1.1 Atualizar a URL do Widget

1.2 Atualizar Parâmetros QueryString

1.3 Enviar Token de Autenticação

1.4 Adaptar Pré-Autorização

2. Integração via Componente Angular

2.1 Remover pacote antigo

2.2 Instalar novo pacote

2.3 Instalar dependências obrigatórias

2.4 Configurar app.module.ts

2.5 Configuração para Standalone

2.6 Atualizar template do componente

2.7 Criar objeto Configuration

2.10 Migrar Pré-Autorização

Parâmetros não reconhecidos

Campo codigoPreAutorizacao não encontrado

3.2 Problemas com Componente Angular

Cannot find module '@magpay/credit-card'

CreditcardModule is not imported

authorizationCode retorna undefined

Token não está sendo enviado

Property 'configuration' does not exist

NullInjectorError: No provider for HttpClient

Componente não renderiza / tela em branco

Evento window:message não dispara

Cannot read property 'authConfig' of undefined

TypeError: Cannot read properties of undefined (reading 'forRoot')

Versão do Angular incompatível