pagarme-js

pagarme-js copied to clipboard

• [x] I have tested with the latest version
• [x] I can simulate the issue easily

Comportamento Atual

Ao tentar rodar um projeto Angular 6+ que tem como dependencia o pagarme-js, a aplicação não roda devido ao erro:

pagarme.js:15241 Uncaught TypeError: Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined
    at Object.<anonymous> (pagarme.js:15241)
    at Object.<anonymous> (pagarme.js:16989)
    at __webpack_require__ (pagarme.js:30)
    at Object.<anonymous> (pagarme.js:15193)
    at __webpack_require__ (pagarme.js:30)
    at Object.<anonymous> (pagarme.js:14346)
    at __webpack_require__ (pagarme.js:30)
    at Object.<anonymous> (pagarme.js:10590)
    at __webpack_require__ (pagarme.js:30)
    at Object.<anonymous> (pagarme.js:285)
    at __webpack_require__ (pagarme.js:30)
    at Object.<anonymous> (pagarme.js:67)
    at __webpack_require__ (pagarme.js:30)
    at pagarme.js:50
    at pagarme.js:53
    at webpackUniversalModuleDefinition (pagarme.js:3)

Comportamento Esperado:

O projeto deveria rodar e funcionar sem problemas.

Contexto

Apesar de não ser um problema específico da biblioteca, é um problema que impede que ela seja usada nas versões mais recentes do Framework Angular, que é amplamente usado.

Eu já utilizei com muito sucesso a biblioteca do pagar-me em projetos angular, até a versão do Angular 5.0. Atualmente estou precisando utilizar a biblioteca num projeto Angular 9.0, e constatei que ela não funciona nessa versão.

Após investigar, descobri que a provável causa foi a que a equipe do Angular decidiu deixar de dar suporte à variável global depois da versão Angular 6+, como pode ser visto nesse comentário: https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814

Por causa disso, a variável global chega na linha pagarme.js:15241 como undefined, quando deveria chegar similar à variável window

Como Reproduzir:

Instalar a versão mais nova do @angular/cli

npm install - g @angular/cli

Criar um projeto angular 6+:

ng new test-pagarme

Incluir a biblioteca do pagarme:

npm i pagarme

Tentar utilizar a biblioteca em um componente:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'test-pagarme';

  constructor() {
    pagarme.client.connect({ encryption_key: '0000' });

  }
}

Repositório mínimo que reproduz o erro:

https://github.com/ArthurFleao/test-pagarme

Tentativas já realizadas para resolver

Já tentei adicionar esse código ao polyfills.ts

import * as Buffer from 'buffer';
(window as any).global = window;

Não surtiu efeito.

Já tentei adicionar esse código ao index.html

          <script>
            var global = global || window;
            var Buffer = Buffer || [];
            var process = process || {
              env: { DEBUG: undefined },
              version: []
            };
          </script>

Também não surtiu efeito.

Acontecendo o mesmo por aqui

Você conseguiu resolver esse problema?

Você conseguiu resolver esse problema?

Não, na época tivemos que encaminhar o usuário para outra página onde rodava um projeto angular 4.0. Eventualmente os requisitos do sistema mudaram e o pagarme não foi mais usado.

Esta acontecendo comigo também. Vocês conseguiram implementar o checkout no Angular?

Sigo com o mesmo problema utilizando svelte/kit