Как мне создать доступный только для чтения дубликат элемента Stripe Element?

Question

Я пытаюсь создать аккуратную небольшую форму оплаты с помощью Stripe. Их последняя версия библиотеки JS на стороне клиента позволяет создавать входные данные номеров кредитных карт только с помощью Elements. Я хотел бы отобразить номер своей кредитной карты где-нибудь еще на экране (в дополнение к вводу, который вводит пользователь), чтобы динамически заполнить график c своей кредитной карты. Я не могу получить номер кредитной карты от Элемента (библиотека не позволит вам), и я обсудил попытку воссоздать номер карты от нескольких слушателей событий, но ничего не работает.

С этим Предыстория, есть ли способ, которым я мог бы просто показать номер кредитной карты с Stripe на этой графике кредитной карты c? Есть ли отдельный элемент для отображения номера? Могу ли я создать дубликат элемента, смонтировать его на графике c и просто использовать что-то вроде pointer-events:none, чтобы сделать его доступным только для чтения?

Answer 1

Я подумал, что просто замечу, что я в итоге сделал. Спасибо @floatingLomas и @Barmar за помощь в получении этого.

Я закончил тем, что поместил сами входные данные в графическую карту кредитной карты c, что сделало очень классную форму регистрации. Мне удалось стилизовать входные данные Stripe так же, как мои, используя CSS, так что это не выглядело странно с точки зрения пользователя.