e.replace is not a function

[sppeect]

Estou usando o Bricks no VueJs, fiz toda a integração, funcionou, quando rodei a aplicação hoje, veio esse erro e não renderiza o bricks pra mim.

Queria saber se esse erro foi ocasionado por mim ou pelo mercadopagosdk ?

[meliguicarvalho]

Ola, Bom dia!
Você poderia por favor compartilhar as configurações que esta enviando para o Brick? Isso me ajudaria a identificar o erro.
Obrigado.

[sppeect]

<template>
  <div id="Checkout">
    <div
      class="modal d-block"
      id="addIndex"
      tabindex="-1"
      role="dialog"
      :key="modalKey"
    >
      <div
        @click="$emit('closeModal')"
        class="backdrop-action position-fixed w-100 h-100"
      ></div>
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div id="statusScreenBrick_container" v-if="approved"></div>
        <div class="modal-content border-0" id="paymentBrick_container"></div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { mapActions } from "vuex";
export default {
  name: "Subscriptions",
  props: {
    plan: {
      type: Object,
    },
  },
  data() {
    return {
      cardNumber: "",
      cardholderName: "",
      expirationMonth: "",
      expirationYear: "",
      securityCode: "",
      modalKey: 1,
      approved: false,
      paymentResult: "",
    };
  },
  computed: {
    userEmail() {
      const email = this.$store.state.auth.current.value.email;
      email.toString();
      return email;
    },
    userName() {
      const name = this.$store.state.auth.current.value.name;
      name.toString();
      return name;
    },
    planPrice() {
      const price = this.plan.price;
      price.toString();
      return price;
    },
    paymentId() {
      return this.paymentResult.value;
    },
    mp() {
      return new MercadoPago("APIKEY", {
        locale: "pt-BR",
      });
    },
  },
  methods: {
    ...mapActions({
      payment: "account/payment",
    }),
    async renderResult() {
      const bricksBuilder = this.mp.bricks();

      const renderStausScreenBrick = async (bricksBuilder) => {
        const settings = {
          initialization: {
            paymentId: this.paymentId,
          },
          callbacks: {
            onReady: () => {},
            onError: (error) => {},
          },
        };
        window.statusBrickController = await bricksBuilder.create(
          "statusScreen",
          "statusScreenBrick_container",
          settings
        );
      };
      await renderStausScreenBrick(bricksBuilder);
    },
    renderPayment() {
      const bricksBuilder = this.mp.bricks();

      const renderPaymentBrick = async (bricksBuilder) => {
        const settings = {
          initialization: {
            amount: this.planPrice,
            payer: {
              email: this.userEmail,
            },
          },
          customization: {
            paymentMethods: {
              creditCard: "all",
              bankTransfer: "all",
            },
          },
          callbacks: {
            onReady: () => {},
            onSubmit: ({ selectedPaymentMethod, formData }) => {
              this.payment(formData)
                .then((resp) => {
                  this.paymentResult = resp.data;
                  this.approved = true;
                  this.modalKey += 1;
                })
                .catch((error) => {
                  console.error(error);
                });
            },
            onError: (error) => {
              console.error(error);
            },
          },
        };
        window.paymentBrickController = await bricksBuilder.create(
          "payment",
          "paymentBrick_container",
          settings
        );
      };
      renderPaymentBrick(bricksBuilder);
    },
  },
  watch: {
    approved() {
      this.renderResult();
    },
  },
  mounted() {
    this.renderPayment();
  },
};
</script>

E dentro do meu Index.html eu faço o

<script src="https://sdk.mercadopago.com/js/v2"></script>

[meliguicarvalho]

Conseguimos reproduzir o seu erro passando um valor não string para o campo email, como está abaixo.

Me parece que essa função de userEmail não está retornando sempre uma string para o Brick, e isso está causando o erro.
Tente por favor conferir o retorno desse método, e garantir que sempre que for enviado um email ao Brick, seja em formato string.

[sppeect]

Vou fazer esses testes aqui e te retornar

[sppeect]

É isso mesmo, por conta de uma falha no mapeamento do meu backend o meu User estava trazendo dentro do Email um objeto com uma string e um booleano.

Perdão o incomodo.

[meliguicarvalho]

Que bom que pode corrigir!