# Payment Element

Integra métodos de pago directamente en tu aplicación.

Payment Element es un componente personalizable que [integra una lista de métodos de pago](https://docs.stripe.com/payments/mobile/accept-payment-embedded.md) en cualquier pantalla de tu aplicación. Cuando un cliente selecciona un método de pago de la lista, una hoja debajo recopila los datos del pago. Puedes personalizarlo para que coincida con el aspecto de tu aplicación. Payment Element en la aplicación está disponible en nuestros SDK para [iOS](https://github.com/stripe/stripe-ios), [Android](https://github.com/stripe/stripe-android) y [React Native](https://github.com/stripe/stripe-react-native). Consulta nuestra guía [Aceptar pagos dentro de la aplicación](https://docs.stripe.com/payments/mobile/accept-payment-embedded.md) para empezar.

> #### Aplicaciones de EE. UU. que venden productos digitales
> 
> Las aplicaciones Android en EE.&nbsp;UU. que venden productos digitales ahora pueden procesar pagos dentro de la aplicación utilizando the Payment Element. Si vendes productos digitales en iOS, consulta cómo implementar un flujo de aplicación a web utilizando Stripe Checkout en [Vender productos digitales y suscripciones dentro de la aplicación](https://docs.stripe.com/mobile/digital-goods/checkout.md).

Esta función está disponible en todas las plataformas compatibles.

> #### Disponibilidad de la función toca para añadir tu tarjeta
> 
> La función de tocar para añadir tu tarjeta se encuentra en versión beta privada. Puedes [obtener más información](https://docs.stripe.com/payments/mobile/embedded-tap-to-add.md) sobre cómo solicitar acceso e integrar la función.
![Ejemplo de integración de Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/mobile-payment-element.de700c536720f40087a00fde4b958b9a.png)

Ejemplo de integración de Payment Element

Con el Payment Element, obtienes:

- [Acceso a más de 100 métodos de pago internacionales](https://docs.stripe.com/payments/payment-methods/overview.md): esto incluye Apple Pay, Link y otros métodos de pago populares que se habilitan automáticamente.

- [Métodos de pago dinámicos](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md): ordena y muestra dinámicamente los métodos de pago y [lanza pruebas A/B](https://docs.stripe.com/payments/a-b-testing.md) para nuevos métodos de pago.

- [Personalizaciones de la interfaz de usuario para adaptarla a tu aplicación](https://docs.stripe.com/elements/appearance-api/embedded-mobile.md): adapta la interfaz de usuario al diseño de tu aplicación. La estructura se mantiene uniforme, pero puedes modificar los colores, las fuentes, etc.

- [Recopilación de direcciones](https://docs.stripe.com/payments/mobile/address-element.md): Recopila direcciones de facturación completas o parciales con cualquier método de pago.

- [Métodos de pago guardados](https://docs.stripe.com/payments/mobile/accept-payment-embedded.md?type=payment#enable-saved-cards): guarda, reutiliza y gestiona tarjetas y cuentas bancarias. También puedes [almacenar los datos de pago del cliente sin un pago inicial](https://docs.stripe.com/payments/mobile/accept-payment-embedded.md?type=setup).

## Demostración de Elements dentro de la aplicación Stripe

Escanea este código de App Clip con tu dispositivo iOS para probar una demostración interactiva de Elements en aplicaciones de Stripe. En la demostración, puedes generar diferentes configuraciones de interfaz de usuario para encontrar la que mejor se adapte a tu caso de uso.
[![Código App Clip de la app de demostración de pagos integrados de Stripe para Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/embedded_app_clip.77900f08daadccd2a6f49cbbdb909a24.svg)
](https://apps.apple.com/demo/id6450683352?app-clip-bundle-id=com.stripe.PaymentSheetDemo.Clip)
## Diseño

Elige entre diseño de radio, diseño de marca de verificación o botones flotantes.
![Opciones de diseño de Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/pe-layout.f6c429b6dfdf24d2fa144725d8435a22.png)

Payment Element es compatible con: botones de radio, marcas de verificación y diseños de botones flotantes.

## Aspecto

Utiliza la API Appearance para personalizar el aspecto del Payment Element para que coincida con tu aplicación. Con la API Appearance, puedes controlar fuentes, colores, bordes, sombras, etc.
![Personalización del aspecto de Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/pe-appearance.0c2a1c5208103bcfb92b67b10dd9fb2f.png)

Ejemplos de diferentes formas de dar estilo a Payment Element

## Métodos de pago

Payment Element proporciona acceso a más de 100 métodos de pago en todos los países compatibles con Stripe. Puedes habilitar métodos de pago desde tu Dashboard de Stripe o mediante [métodos de pago personalizados](https://docs.stripe.com/payments/payment-methods/custom-payment-methods.md).

Los proveedores de métodos de pago suelen cambiar sus requisitos de cobro y visualización. Cuando usas Payment Element para mostrar métodos de pago, Stripe gestiona la recopilación de todos los datos de pago en formularios prediseñados y localizados que mantenemos actualizados con cada proveedor de servicios de pago.
![Métodos de pago de Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/pe-payment-methods.91cb1be9cb8ef55b873074dd6f3a7c12.png)

Ejemplos de adeudo P24 y SEPA en el Payment Element

## Monederos

Payment Element es compatible con monederos populares, como Apple Pay y Link, un monedero creado por Stripe. Payment Element muestra los monederos en línea como opciones de métodos de pago.
![Monederos de Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/pe-wallets.fed1c5ad5fbb89d74be25e02d291e25c.png)

Ejemplo de Link en Payment Element

## Métodos de pago guardados

El Payment Element es compatible con guardar, mostrar y gestionar métodos de pago guardados. La recopilación de consentimientos se gestiona automáticamente, lo que garantiza el cumplimiento de la normativa internacional.

Los métodos de pago guardados admiten tarjetas, cuentas bancarias estadounidenses y cuentas de débito SEPA.

La API CustomerSessions proporciona control adicional sobre:

- Cuándo mostrar u ocultar la casilla de guardar consentimiento
- Cuándo mostrar u ocultar los métodos de pago guardados
- Cómo permitir a los clientes eliminar métodos de pago guardados
- Cómo evitar que los clientes eliminen el último método de pago guardado
![Métodos de pago guardados de Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/pe-saved-payment-methods.6aef147c8b230f2cb50c115b2054f814.png)

Ejemplos de cómo los clientes pueden acceder a los métodos de pago guardados en Payment Element

## Recopilar datos de la dirección

Puedes configurar el Payment Element para recopilar información de pago adicional, incluyendo el nombre, el correo correo electrónico, el número de teléfono y la dirección de facturación, independientemente del método de pago que utilice el cliente.

La recopilación de direcciones completas incluye la función de autocompletado proporcionada por Stripe para los países admitidos, sin necesidad de configuración adicional.

> Al usar la función de autocompletado, aceptas cumplir la [Política de uso aceptable de la plataforma Google Maps](https://cloud.google.com/maps-platform/terms/aup). Si infringes esta política, Stripe podría desactivar la función de autocompletado o tomar otras medidas necesarias.
![Recopilación de direcciones de Payment Element](https://b.stripecdn.com/docs-statics-srv/assets/pe-collecting-address-details.f806ddc435848cdf38470fb4e5adb15b.png)

Ejemplo que muestra los datos completos de facturación recopilados

## Funciones adicionales

El Payment Element también contiene las siguientes funciones:

- Recopilación de CVC: configura si se requiere la recopilación de CVC cuando los usuarios pagan con un método de pago guardado.
- [Filtrado de marcas de tarjetas](https://docs.stripe.com/payments/mobile/embedded-filter-card-brands.md): configura qué marcas de tarjetas aceptas.
