Я пытался добавить Stripe Elements (v3) для формы подписки на Meteor.
Мне удалось его запустить и запустить, и я могу успешно создать подписку, но только когда на странице нет помощников по шаблонам.
Странно, как только я добавляю помощников по шаблонам. , Я получаю сообщение об ошибке:
"IntegrationError: Указанный селектор (# card-element) применяется к тем элементам DOM, которые в данный момент находятся на странице. Убедитесь, что элемент существует на странице, прежде чем вызывать mount () . "
Вот код JS:
Template.admin.onRendered(() => {
const stripe = Stripe('pk_test_xxxxxx');
const elements = stripe.elements();
const form = document.getElementById('subscription-form');
const displayError = document.getElementById('card-errors');
const cardElement = elements.create("card");
cardElement.mount("#card-element");
cardElement.addEventListener('change', ({error}) => {
if (error) {
displayError.textContent = error.message;
} else {
displayError.textContent = '';
}
});
[....]
};
Вот код HTML (с помощниками шаблонов):
<template name="admin">
<center>
{{#if currentUser}}
{{#if isAdmin}}
<form id="subscription-form">
<label for="card-element">Credit or debit card</label>
<div id="card-element" class="MyCardElement">
<!-- Elements will create input elements here -->
</div>
<div id="card-errors" role="alert">
<!-- We'll put the error messages in this element -->
</div>
<button type="submit">Subscribe</button>
</form>
{{/if}}
{{else}}
{{> login}}
{{/if}}
</center></template>
У всех есть предложения, почему это может быть?
TIA!