Angular e mercado pago - Resolvido

Front-end
#1

Angular.

https://www.mercadopago.com.br/developers/pt/guides/online-payments/checkout-api/receiving-payment-by-card

Coloquei este link <script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>, no index.html

mp
mp.png1291×761 47.5 KB

Dá erro no MercadoPago, conforme imagem

window.Mercadopago.setPublishableKey("YOUR_PUBLIC_KEY");

erro%20no%20ts
erro no ts.png781×304 13.4 KB

Está faltando algo ?

Procurei e não vi um npm, por exemplo

#2

será a falta do P maiúsculo?

window.MercadoPago.etc ?
1 curtida
#3

Eu uso o pagseguro, a integraçao é bem parecida… Sempre tive muita dúvida e erro tbm, mas quando botei o script dentro do <body> funcionou de boas.

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src=
        "https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script>
............
</body>
1 curtida
#4

Os dois são o mesmo erro

maiusculo
maiusculo.png808×305 15.5 KB

minusculo
minusculo.png847×308 15.6 KB

#5

Da onde vem esse window? Lembrando que no Angular as coisas sao mais burocráticas e nao pode acessar diretamente o objeto window do browser como se fosse js puro. Essa é uma das formas de ter acesso:

1 curtida
#6

Vem do exemplo do marcadopago, mas usando o javascript.

#7

Mas você não ta usando javascript puro, se fosse seria mais fácil como no exemplo do Mercado Livre. Segue o exemplo que passei pra ter acesso ao window pelo Angular.

1 curtida
#8

Entendi e sei.

mas o erro continua.

providers: [
    SnackBarComponent,
    MenuItems,
    {
      provide: DEFAULT_CURRENCY_CODE,
      useValue: ''
    },
    {
      provide: NGX_MAT_FILE_INPUT_CONFIG,
      useValue: config
    },
    {
      provide: MAT_DATE_LOCALE,
      useValue: 'pt-BR'
    },
    {
      provide: Window, 
      useValue: window
    }
  ],

Coloquei no construtor

private window: Window

E o erro continua

Ao dar npm start, mostra o erro

erro
erro.png1131×634 25.6 KB

alem destas

#9

Não funcionou também

#10

Não funciona dá erro? O q acontece?

1 curtida
#11

Agora que vi o post com os erros, tenta isso:

1 curtida
#12

Coloquei as imagens

#13

Segunda tento. obrigado

#14

Neste link https://github.com/maximegris/angular-electron/issues/334#issuecomment-557546151, ele disse para alterar o código src/typings.d.ts. Mas não achei .

#15

tenta dessa forma

(window as any).Mercadopago.setPublishableKey(“YOUR_PUBLIC_KEY”);

1 curtida
#16

Mas aonde devo colocar o window ?

#17

Faz dessa forma:

Exemplo pegando a versao dessa lib do mercadopago.

1 curtida
#18

Funcionou @javaflex

Obrigado