window undefined

[jpsdm]

I'm trying to call get FormData, but apparently the cardPaymentBrickController is undefined

export default function CheckoutForm({ mercadoPagoPublicKey, localCart }) {
  // initialize the Mercado Pago SDK
  initMercadoPago(mercadoPagoPublicKey, {
    advancedFraudPrevention: true, // optional, Mercado Pago advanced fraud prevention
    locale: 'pt-BR' // optional, set locale language
  });

  const checkout = useCheckout(); // checkout context
  const [customization, setCustomizantion] = useState(); // customization object
  const [initialization, setInitialization] = useState(); // initialization object
  const [loading, setLoading] = useState(true); // loading state
  const { orderPlaced, orderId, cartId } = checkout; // checkout context

  const cartQuery = `
  query Query($cartId: String) {
    cart(id: $cartId) {
      billingAddress {
        cartAddressId
        fullName
        postcode
        telephone
        country {
          name
          code
        }
        province {
          name
          code
        }
        city
        address1
        address2
      }
      shippingAddress {
        cartAddressId
        fullName
        postcode
        telephone
        country {
          name
          code
        }
        province {
          name
          code
        }
        city
        address1
        address2
      }
      customerEmail
    }
  }
`; // cart query

  // query the cart data
  const [result] = useQuery({
    query: cartQuery,
    variables: {
      cartId
    },
    pause: orderPlaced === true
  });

  // create the payment
  function createPayment() {
    window.cardPaymentBrickController
      .getFormData()
      .then((cardFormData) => {
        console.log('cardFormData received, creating payment...', cardFormData);
      })
      .catch((error) => {});
  }

  // set the initialization and customization objects
  useEffect(() => {
    const { cart } = result?.data || {};

    // set the initialization object with the amount, preferenceId and payer information
    setInitialization({
      amount: localCart?.grandTotal?.value,
      // preferenceId: cartId,
      payer: {
        email: cart?.customerEmail
      },
      items: localCart?.items?.map((item) => {
        return {
          id: item?.productSku || item?.productId,
          title: item?.productName,
          quantity: item?.qty,
          unit_price: item?.productPrice?.value
        };
      })
    });

    // set the customization object with the payment methods and visual options
    setCustomizantion({
      paymentMethods: {
        atm: 'all',
        ticket: ['bolbradesco'],
        bankTransfer: ['pix'],
        creditCard: 'all',
        debitCard: 'all',
        maxInstallments: 2,
        mercadoPago: ['onboarding_credits']
      },
      visual: {
        hidePaymentButton: true
      }
    });
  }, [mercadoPagoPublicKey, result]);

  useEffect(() => {
    if (orderPlaced) {
      console.log('orderPlaced', orderPlaced);
      createPayment();
    }
  }, [orderPlaced]);

  return (
    <div className="App">
      <div className="mt-[20px]">
        {loading && <p>Carregando ambiente de pagamento...</p>}
        <Payment
          initialization={initialization}
          customization={customization}
          onSubmit={async (data) => {
            console.log('aqui', data);
          }}
          onReady={() => {
            setLoading(false);
          }}
        />
      </div>
    </div>
  );
}

CheckoutForm.propTypes = {
  mercadoPagoPublicKey: PropTypes.string.isRequired,
  localCart: PropTypes.isRequired
};

[AleFossati]

Hello @jpsoarxs, I can see that you are using Payment Brick, so instead of using window.cardPaymentBrickController, you should be using window.paymentBrickController. Let me know if that works for you.