# 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[​](#concept-mapping "Enlace directo al Mapa de conceptos")

| Stripe                                    | MONEI                                                                                                                            |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `Stripe(publishableKey)`                  | Sin constructor global — los componentes reciben `paymentId` o `accountId` directamente.                                         |
| `stripe.elements()`                       | [`monei.CardGroup({...})`](https://docs.monei.com/es/es/monei-js/reference/.md#cardgroup)                                        |
| `elements.create('card')`                 | [`monei.CardInput({...})`](https://docs.monei.com/es/es/monei-js/reference/.md#cardinput-component)                              |
| `elements.create('cardNumber')`           | [`monei.CardNumber({group})`](https://docs.monei.com/es/es/monei-js/reference/.md#card-parts)                                    |
| `elements.create('cardExpiry')`           | [`monei.CardExpiry({group})`](https://docs.monei.com/es/es/monei-js/reference/.md#card-parts)                                    |
| `elements.create('cardCvc')`              | [`monei.CardCvc({group})`](https://docs.monei.com/es/es/monei-js/reference/.md#card-parts)                                       |
| `element.mount('#id')`                    | `component.render('#id')`                                                                                                        |
| `stripe.createToken(cardElement)`         | `cardGroup.submit()` / `cardInput.submit()`                                                                                      |
| `stripe.confirmCardPayment(clientSecret)` | [`monei.confirmPayment({paymentId, paymentToken})`](https://docs.monei.com/es/es/monei-js/reference/.md#confirmpayment-function) |
| `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.](https://docs.monei.com/es/es/monei-js/reference/.md#card-part-state-classes)                    |
| Opción `style` (por elemento)             | [Objeto `style`](https://docs.monei.com/es/es/monei-js/reference/.md#cardinput-style-object)                                     |
| Opción `fonts`                            | [`fonts: FontConfig[]`](https://docs.monei.com/es/es/monei-js/reference/.md#custom-fonts)                                        |

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[​](#split-card-fields "Enlace directo al 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[​](#events "Enlace directo al Eventos")

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

| Stripe `event`        | MONEI [`CardPartChangeEvent`](https://docs.monei.com/es/es/monei-js/reference/.md#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[​](#framework-packages "Enlace directo al Paquetes por framework")

| Stripe                                                                | MONEI                                                                                                 |
| --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| Proveedor `<Elements>` de `@stripe/react-stripe-js` + `useElements()` | [`useCardGroup()`](https://docs.monei.com/es/es/monei-js/react/.md#split-card-fields) — sin proveedor |
| `<CardNumberElement />`, etc.                                         | `<CardNumber group={group} />`, etc.                                                                  |

Los paquetes de Vue, Angular y Svelte siguen la misma forma — ver [Vue](https://docs.monei.com/es/es/monei-js/vue/.md#split-card-fields), [Angular](https://docs.monei.com/es/es/monei-js/angular/.md#split-card-fields) y [Svelte](https://docs.monei.com/es/es/monei-js/svelte/.md#split-card-fields).

## Lado servidor[​](#server-side "Enlace directo al Lado servidor")

Sustituye los PaymentIntents por pagos MONEI: [crea un pago](https://docs.monei.com/es/es/apis/rest/payments-create/.md) en tu servidor, pasa su `id` como `paymentId` al grupo, y luego `submit()` + [`confirmPayment`](https://docs.monei.com/es/es/monei-js/reference/.md#confirmpayment-function) en el cliente — o confirma en el servidor con el token. Prueba con las [tarjetas de test de MONEI](https://docs.monei.com/es/es/testing/.md).