Error: MercadoPago.js - Could not find HTML element for provided id: MPHiddenInputPaymentMethod

Question

我这里有一个 Nuxt 桌面应用程序，我是否正面临 MERCADO PAGO 的这个问题 API。

这是 Mercado 文档的一部分：https://www.mercadopago.com.br/developers/pt/guides/online-payments/checkout-api/v2/testing

问题是：

我使用 index.vue，它使用文档本身的默认形式：

    <template>
  <div >
   <form id="form-checkout" >
   <input type="text" name="cardNumber" id="form-checkout__cardNumber" />
   <input type="text" name="cardExpirationMonth" id="form-checkout__cardExpirationMonth" />
   <input type="text" name="cardExpirationYear" id="form-checkout__cardExpirationYear" />
   <input type="text" name="cardholderName" id="form-checkout__cardholderName"/>
   <input type="email" name="cardholderEmail" id="form-checkout__cardholderEmail"/>
   <input type="text" name="securityCode" id="form-checkout__securityCode" />
   <select name="issuer" id="form-checkout__issuer"></select>
   <select name="identificationType" id="form-checkout__identificationType"></select>
   <input type="text" name="identificationNumber" id="form-checkout__identificationNumber"/>
   <select name="installments" id="form-checkout__installments"></select>
   <button type="submit" id="form-checkout__submit">Pagar</button>
   <progress value="0" class="progress-bar">Carregando...</progress>
</form>
  </div>
</template>

nuxt.config:

export default{
head:{
...
script: [
      { src: 'https://sdk.mercadopago.com/js/v2' },
      {src: "/js/index.js", },
}
}

和“静态文件夹中的/js/index.js 文件：

//i know the YOU_PUBLIC_KEY must be from the Mercado Pago account, i have one already
  const mp =  new MercadoPago('YOUR_PUBLIC_KEY', {
    locale: 'pt-BR',
  })
  const cardForm = mp.cardForm({
    amount: '100.5',
    autoMount: true,
    processingMode: 'aggregator',
    form: {
      id: 'form-checkout',
      cardholderName: {
        id: 'form-checkout__cardholderName',
        placeholder: 'Cardholder name',
      },
      cardholderEmail: {
        id: 'form-checkout__cardholderEmail',
        placeholder: 'Email',
      },
      cardNumber: {
        id: 'form-checkout__cardNumber',
        placeholder: 'Card number',
      },
      cardExpirationMonth: {
        id: 'form-checkout__cardExpirationMonth',
        placeholder: 'MM'
      },
      cardExpirationYear: {
        id: 'form-checkout__cardExpirationYear',
        placeholder: 'YYYY'
      },
      securityCode: {
        id: 'form-checkout__securityCode',
        placeholder: 'CVV',
      },
      installments: {
        id: 'form-checkout__installments',
        placeholder: 'Total installments'
      },
      identificationType: {
        id: 'form-checkout__identificationType',
        placeholder: 'Document type'
      },
      identificationNumber: {
        id: 'form-checkout__identificationNumber',
        placeholder: 'Document number'
      },
      issuer: {
        id: 'form-checkout__issuer',
        placeholder: 'Issuer'
      }
    },
    callbacks: {
      onFormMounted: error => {
        if (error) return console.warn('Form Mounted handling error: ', error)
        console.log('Form mounted')
      },
      onFormUnmounted: error => {
        if (error) return console.warn('Form Unmounted handling error: ', error)
        console.log('Form unmounted')
      },
      onIdentificationTypesReceived: (error, identificationTypes) => {
        if (error) return console.warn('identificationTypes handling error: ', error)
        console.log('Identification types available: ', identificationTypes)
      },
      onPaymentMethodsReceived: (error, paymentMethods) => {
        if (error) return console.warn('paymentMethods handling error: ', error)
        console.log('Payment Methods available: ', paymentMethods)
      },
      onIssuersReceived: (error, issuers) => {
        if (error) return console.warn('issuers handling error: ', error)
        console.log('Issuers available: ', issuers)
      },
      onInstallmentsReceived: (error, installments) => {
        if (error) return console.warn('installments handling error: ', error)
        console.log('Installments available: ', installments)
      },
      onCardTokenReceived: (error, token) => {
        if (error) return console.warn('Token handling error: ', error)
        console.log('Token available: ', token)
      },
      onSubmit: (event) => {
        event.preventDefault();
        const cardData = cardForm.getCardFormData();
        console.log('CardForm data available: ', cardData)
      },
      onFetching: (resource) => {
        console.log('Fetching resource: ', resource)

        // Animate progress bar
        const progressBar = document.querySelector('.progress-bar')
        progressBar.removeAttribute('value')

        return () => {
          progressBar.setAttribute('value', '0')
        }
      },
    }
  })

任何人都可以帮助我吗？ MERCADO PAGO 的 API?

面临更多问题

感谢关注！

Answer 1

使用 iframe 呈现自定义原版 HTML/CSS/JS。

我正在使用 vue/quasar2，我的解决方法是使用 iframe 呈现可以使用此库的自定义页面，您可以看到目录结构 here.

我创建了一个页面并使用 iframe 标记呈现自定义页面：

<template>
  <q-page class="flex flex-center">
    <iframe width="100%" height="545vh" style="border: none;" :src='`static_site/index.html?obj=${JSON.stringify(getQueryParameters())}`'/>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PageIndex',

  setup () {

    function getQueryParameters () {
      return {
        name: "name",
        email: "name@gmail.com",
        valor: "20"
      }
    }

    return {
      getQueryParameters,
    }
  }
})
</script>

我在 iframe src 中使用 查询参数 ( obj ) 将信息从 vue 传递到 lib。在 cardForm 函数的回调部分，我使用了 URLSearchParams 对象来捕获我发送的信息，你可以看到它 here.

OBS：我昨天才发现这个解决方法，还没有在生产中测试，但在开发中它工作正常，很快就会在生产中测试并更新这个答案，希望它对你有用。

Error: MercadoPago.js - Could not find HTML element for provided id: MPHiddenInputPaymentMethod

Error: MercadoPago.js - Could not find HTML element for provided id: MPHiddenInputPaymentMethod

javascript

authentication

api

mercadopagosdk

mercadopago