错误: MercadoPago.js -找不到所提供的id: MPHiddenInputPaymentMethod的HTML元素

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 2，我的解决方法是使用Iframe来呈现一个可以使用这个库的自定义页面，您可以看到目录结构这里。

我创建了一个页面并使用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中的查询参数( obj )将信息从vue传递到库。在URLSearchParams函数的回调部分，我使用了cardForm对象来捕获我发送的信息，您可以看到它是这里。

OBS:我昨天刚找到了这个解决办法，还没有在生产中进行测试，但是在dev中，它运行得很好，很快就会在生产中测试并更新这个答案，希望它对您有用。