Migrar desde Stripe Elements

Los componentes MONEI reflejan el modelo de integración de Stripe Elements: iframes alojados recopilan los datos de la tarjeta en tu página, tu alcance PCI DSS se mantiene en SAQ A y tu JavaScript nunca ve un número de tarjeta. Esta página mapea cada concepto de Stripe a su equivalente en MONEI.

Mapa de conceptos

Stripe	MONEI
Stripe(publishableKey)	Sin constructor global — los componentes reciben paymentId o accountId directamente.
stripe.elements()	monei.CardGroup({...})
elements.create('card')	monei.CardInput({...})
elements.create('cardNumber')	monei.CardNumber({group})
elements.create('cardExpiry')	monei.CardExpiry({group})
elements.create('cardCvc')	monei.CardCvc({group})
element.mount('#id')	component.render('#id')
stripe.createToken(cardElement)	cardGroup.submit() / cardInput.submit()
stripe.confirmCardPayment(clientSecret)	monei.confirmPayment({paymentId, paymentToken})
element.on('change', handler)	Prop onChange
element.focus() / blur() / clear()	Los mismos métodos en un campo montado
StripeElement--focus, etc.	monei-component--focus, etc.
Opción style (por elemento)	Objeto style
Opción fonts	fonts: FontConfig[]

Diferencia estructural clave: MONEI no tiene factoría de elementos. El grupo viaja como una prop group normal en cada campo — cada componente se crea con monei.X({...}) y se monta con .render().

Campos de tarjeta separados

Stripe:

const elements = stripe.elements();
elements.create('cardNumber').mount('#number');
elements.create('cardExpiry').mount('#expiry');
elements.create('cardCvc').mount('#cvc');
const {token} = await stripe.createToken(elements.getElement('cardNumber'));

MONEI:

const cardGroup = monei.CardGroup({paymentId});
monei.CardNumber({group: cardGroup}).render('#number');
monei.CardExpiry({group: cardGroup}).render('#expiry');
monei.CardCvc({group: cardGroup}).render('#cvc');
const {token, error} = await cardGroup.submit();

Diferencias que juegan a tu favor:

• onChange agregado en el grupo — CardGroup({onChange: ({complete}) => ...}) te avisa cuando todos los campos son válidos. Con Stripe rastreas el complete de cada elemento por tu cuenta.
• Avance automático del foco — número → caducidad → CVC mientras el cliente escribe, con Backspace retrocediendo. Los elementos separados de Stripe no avanzan el foco.
• Resaltado en el envío — un submit() fallido marca el campo con error como inválido; tú solo muestras el texto de error devuelto.

Eventos

El payload del evento change de Stripe se mapea casi uno a uno:

Stripe event	MONEI CardPartChangeEvent
event.empty	event.empty
event.complete	event.complete
event.error.message	event.error (ya es un texto listo para mostrar)
event.brand	event.brand (solo CardNumber)

ready → usa onLoad. focus/blur → onFocus/onBlur (sin payload).

Paquetes por framework

Stripe	MONEI
Proveedor <Elements> de @stripe/react-stripe-js + useElements()	useCardGroup() — sin proveedor
<CardNumberElement />, etc.	<CardNumber group={group} />, etc.

Los paquetes de Vue, Angular y Svelte siguen la misma forma — ver Vue, Angular y Svelte.

Lado servidor

Sustituye los PaymentIntents por pagos MONEI: crea un pago en tu servidor, pasa su id como paymentId al grupo, y luego submit() + confirmPayment en el cliente — o confirma en el servidor con el token. Prueba con las tarjetas de test de MONEI.