錯誤：MercadoPago.js - 找不到提供的 id 的 HTML 元素：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>

配置文件：

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

和 static 文件夾中的“/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 來呈現可以使用此庫的自定義頁面，您可以在此處查看目錄結構。

我創建了一個頁面並使用 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 function 的回調部分，我使用了URLSearchParams object 來捕獲我發送的信息，你可以在這里看到。

OBS：我昨天才發現這個解決方法，還沒有在生產中測試，但在開發中它工作正常，很快就會在生產中測試並更新這個答案，希望它對你有用。