Nextjs gerando card_hash

[Djamilson]

Gerando o card_hash com Nextjs - Erro

Estou tentando gerar o card_hash no frontend usando o nextjs e está dando o erro.

Requisição cross-origin bloqueada: A diretiva de mesma origem (same origin policy) impede a leitura do recurso remoto em https://api.pagar.me/1/transactions/card_hash_key (motivo: falta cabeçalho 'Access-Control-Allow-Origin' no CORS). Código de status: 400.

const client_retur = await pagarme.client
            .connect({
                encryption_key: process.env.NEXT_APP_PAGARME_ENCRYPTION_KEY
            })  .then(client => {
                return client.security.encrypt({
                    card_number: '4111111111111111',
                    card_holder_name: 'abc',
                    card_expiration_date: '1225',
                    card_cvv: '123'
                })
            })
            .then((card_hash) => {
               console.log('=>>>card_hash:', card_hash)
            })

        const card_hash = await client_retur.security.encrypt(newData)

###Alguém sabe informa se eu consigo gerar o token do cartão de crédito pelo o frontend com o Nextjs?

[Beethoven]

Está usando a rota /api do Next? Este post pode ajudar: https://vercel.com/guides/getting-started-with-nextjs-typescript-stripe

E lembre-se que as rotas api são same-origin por padrão. Tem que setar CORS para receber eventos.

By default, Next.js API routes are same-origin only. To allow Stripe webhook event requests to reach your API route, add micro-cors:

[Djamilson]

Olá Beethove tudo bem?

Não estou usando a rota /api do Next? O objetivo é só gerar o card_hash, que deve ser feito pelo o await pagarme.client.connect. Isso é feito diretamente na parte do cliente porque está envolvendo os dados do cartão. Somente o Reactjs puro essa função funciona perfeitamente, contudo quando uso o NextJs dá esse erro motivo: falta cabeçalho 'Access-Control-Allow-Origin' no CORS.

[Djamilson]

Olá Beethove tudo tranqulo? Conseguir resolver o problema, a minha varial process.env.NEXT_APP_PAGARME_ENCRYPTION_KEY estava chegando undefined.

Muito obrigado aí.

[Beethoven]

Isso ai, no client tem que usar o NEXT_PUBLIC_ prefixo na variável para ter acesso. Abs!