# Crear un Marketplace Crea cuentas conectadas con Accounts v1, cobra los pagos de los clientes y luego paga a los vendedores o proveedores de servicios en tu Marketplace. > #### Integraciones de API Accounts v2 > > Esta guía solo se aplica a las plataformas Connect existentes que usan la API Accounts v1. Si eres un usuario nuevo de Connect o si usas la API Accounts v2, consulta la [guía v2 Marketplace](https://docs.stripe.com/connect/marketplace.md). # Web > This is a Web for when platform is web. View the full page at https://docs.stripe.com/connect/end-to-end-marketplace?platform=web. En esta guía, se explica cómo aceptar pagos y transferir fondos a las cuentas bancarias de los proveedores de servicios o vendedores. A efectos de hacer una demostración, crearemos un marketplace de alquiler de viviendas que conecte a los propietarios con los posibles inquilinos. También te mostraremos cómo aceptar pagos de los inquilinos (clientes) y hacer transferencias a los propietarios (los usuarios de tu plataforma). ## Prerrequisitos 1. [Registra tu plataforma](https://dashboard.stripe.com/connect). 1. [Verifica y agrega datos de la empresa en Dashboard](https://dashboard.stripe.com/account/onboarding). 1. [Completa el perfil de tu plataforma](https://dashboard.stripe.com/connect/settings/profile). 1. [Personaliza la configuración de tu marca](https://dashboard.stripe.com/settings/connect/stripe-dashboard/branding). Agrega el nombre, el ícono y el color de la marca de la empresa. ## Configura Stripe [Lado del servidor] Instala las bibliotecas oficiales de Stripe para acceder a la API desde tu aplicación: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Crea una cuenta conectada #### Accounts v2 Cuando un vendedor o prestador de servicios se registra en tu plataforma, crea una [cuenta conectada](https://docs.stripe.com/api/v2/core/accounts.md) que lo represente. La cuenta conectada te permite recopilar su información de identificación, aceptar pagos en su nombre y transferir fondos a su cuenta bancaria. #### Accounts v1 Cuando un vendedor o prestador de servicios se registra en tu plataforma, crea una [cuenta conectada](https://docs.stripe.com/api/accounts.md) que lo represente. La cuenta conectada te permite recopilar su información de identificación, aceptar pagos en su nombre y transferir fondos a su cuenta bancaria. En nuestro ejemplo de alquileres de vivienda, la cuenta conectada representa al propietario de la casa. ### Crear una cuenta conectada con información prellenada #### Accounts v2 Usa la API `/v2/core/accounts` para [crear](https://docs.stripe.com/api/v2/core/accounts/create.md) una cuenta conectada especificando el[dashboard de la cuenta conectada y sus responsabilidades](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md). ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-01-28.clover" \ --json '{ "contact_email": "furever_contact@example.com", "display_name": "Furever", "defaults": { "responsibilities": { "fees_collector": "application", "losses_collector": "application" } }, "dashboard": "express", "identity": { "business_details": { "registered_name": "Furever" }, "country": "us", "entity_type": "company" }, "configuration": { "merchant": { "capabilities": { "card_payments": { "requested": true } } }, "recipient": { "capabilities": { "stripe_balance": { "stripe_transfers": { "requested": true } } } } }, "include": [ "configuration.merchant", "configuration.recipient", "identity", "requirements" ] }' ``` Si ya recopilaste información para tus cuentas conectadas, puedes completar automáticamente esa información en el objeto `Account`. Puedes completar previamente cualquier información de la cuenta, incluida la información personal y de la empresa, la información de la cuenta externa, etc. Después de crear la `Cuenta`, crea una [Persona](https://docs.stripe.com/api/v2/core/persons/create.md) que represente a la persona responsable de abrir la cuenta, con `relationship.representative` establecido en verdadero y cualquier información de la cuenta que quieras completar previamente (por ejemplo, su nombre y apellido). ```curl curl -X POST https://api.stripe.com/v2/core/accounts/{{ACCOUNT_ID}}/persons \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-03-25.preview" \ --json '{ "given_name": "Jenny", "surname": "Rosen", "email": "jenny.rosen@example.com", "relationship": { "representative": true } }' ``` El onboarding de Connect no solicita la información que se completó automáticamente. Sin embargo, sí le pide al titular de la cuenta que confirme la información completada automáticamente antes de aceptar el [contrato de servicio de Connect](https://docs.stripe.com/connect/service-agreement-types.md). Cuando pruebes la integración, completa automáticamente la información de la cuenta con los [datos de prueba](https://docs.stripe.com/connect/testing.md). ### Crea un enlace de cuenta Puedes crear un enlace de cuenta llamando a la API [Account Links v2](https://docs.stripe.com/api/v2/core/account-links.md) con los siguientes parámetros: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` - `configurations` = `recipient` y `merchant` ```curl curl -X POST https://api.stripe.com/v2/core/account_links \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2025-08-27.preview" \ --json '{ "account": "{{CONNECTEDACCOUNT_ID}}", "use_case": { "type": "account_onboarding", "account_onboarding": { "configurations": [ "recipient", "merchant" ], "refresh_url": "https://example.com/reauth", "return_url": "https://example.com/return" } } }' ``` ### Redirige al usuario a la URL del enlace de cuenta La respuesta de create Account Link incluye un valor `url`. Después de autenticar al usuario en tu aplicación, redirígelo a esa URL para enviarlo al flujo. Las URL de enlace de cuenta son temporales y de un solo uso, porque dan acceso a los datos personales del usuario de la cuenta conectada. Si quieres prellenar información, debes hacerlo antes de generar el enlace de cuenta. Una vez creado, ya no puedes leer ni escribir información para la cuenta conectada. > No envíes por correo electrónico, ni por mensaje de texto ni por ningún otro medio las URL del enlace de la cuenta fuera de la aplicación de la plataforma. En lugar de eso, envíalas al titular de la cuenta autenticado dentro de tu aplicación. #### Item 1 #### Swift ```swift import UIKit import SafariServices let BackendAPIBaseURL: String = "" // Set to the URL of your backend server class ConnectOnboardViewController: UIViewController { // ... override func viewDidLoad() { super.viewDidLoad() let connectWithStripeButton = UIButton(type: .system) connectWithStripeButton.setTitle("Connect with Stripe", for: .normal) connectWithStripeButton.addTarget(self, action: #selector(didSelectConnectWithStripe), for: .touchUpInside) view.addSubview(connectWithStripeButton) // ... } @objc func didSelectConnectWithStripe() { if let url = URL(string: BackendAPIBaseURL)?.appendingPathComponent("onboard-user") { var request = URLRequest(url: url) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request) { (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let accountURLString = json["url"] as? String, let accountURL = URL(string: accountURLString) else { // handle error } let safariViewController = SFSafariViewController(url: accountURL) safariViewController.delegate = self DispatchQueue.main.async { self.present(safariViewController, animated: true, completion: nil) } } } } // ... } extension ConnectOnboardViewController: SFSafariViewControllerDelegate { func safariViewControllerDidFinish(_ controller: SFSafariViewController) { // the user may have closed the SFSafariViewController instance before a redirect // occurred. Sync with your backend to confirm the correct state } } ``` #### Item 2 ```xml ``` En tu servidor, haz la siguiente llamada a la API de Stripe. Después de haber creado una sesión de Checkout, redirige a tu cliente a la [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) recibida en la respuesta. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "payment_intent_data[application_fee_amount]=123" \ -d "payment_intent_data[transfer_data][destination]={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "success_url=https://example.com/success" ``` - `line_items`: este argumento representa los artículos que compra el cliente. Estos artículos se muestran en la interfaz de usuario alojada por Stripe. - `success_url`: este argumento redirige al usuario después de que completa el pago. - `payment_intent_data[application_fee_amount]`: este argumento especifica el importe que tu plataforma tomará de la transacción. El importe total del cargo se transfiere de inmediato de la plataforma a la cuenta conectada especificada por `transfer_data[destination]` después de la captura del cargo. El `application_fee_amount` se vuelve a transferir a la plataforma y se deduce la comisión de Stripe del importe de la plataforma. - `payment_intent_data[transfer_data][destination]`: este argumento indica que se trata de un [cargo a un Destino](https://docs.stripe.com/connect/destination-charges.md). Un cargo a un Destino es aquel que se procesa en la plataforma y por el cual los fondos se transfieren de manera inmediata y automática al saldo pendiente de la cuenta conectada. En nuestro ejemplo de alquiler de viviendas, queremos crear una experiencia en la que el cliente pague a través de la plataforma y esta le pague al propietario. ![](https://b.stripecdn.com/docs-statics-srv/assets/application_fee_amount.837aa2339469b3c1a4319672971c1367.svg) Checkout utiliza la configuración de marca de la cuenta de tu plataforma para los cargos a un destino. Para obtener más información, consulta [Personaliza la imagen de marca](https://docs.stripe.com/connect/destination-charges.md?platform=web&ui=stripe-hosted#branding). Esta sesión crea un cargo a un Destino. Si necesitas controlar el plazo de las transferencias o enviar los fondos de un solo pago a varias personas, utiliza[ cargos y envíos de fondos separados](https://docs.stripe.com/connect/separate-charges-and-transfers.md). ### Gestiona eventos posteriores al pago (del lado del servidor) Stripe envía un evento [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) cuando se completa el pago. [Utiliza un webhook para recibir estos eventos](https://docs.stripe.com/webhooks/quickstart.md) y ejecutar acciones, como enviar un correo electrónico de confirmación del pedido a tu cliente, registrar la venta en una base de datos o iniciar el flujo de tareas para un envío. Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. De su lado, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada. Además, algunos métodos de pago tardan entre 2 y 14 días en confirmar el pago. Si configuras tu integración para escuchar eventos asincrónicos, podrás aceptar varios [métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración. Además de administrar el evento `checkout.session.completed`, te recomendamos administrar otros dos eventos al cobrar pagos con Checkout: | Evento | Descripción | Próximos pasos | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | El cliente ha autorizado correctamente el pago enviando el formulario de Checkout. | Espera hasta saber si el pago se efectuó correctamente o no. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | El pago del cliente se efectuó correctamente. | Entrega los productos o servicios comprados. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | El pago se rechazó o falló por algún otro motivo. | Ponte en contacto con el cliente por correo electrónico y solicítale que haga un nuevo pedido. | Todos estos eventos incluyen el objeto [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md). Después de que el pago se efectúa correctamente, el estado del *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) subyacente cambia de `processing` a `succeeded`. #### Formulario integrado ### Crea una sesión de Checkout (Server-side) Una sesión de Checkout controla lo que tu cliente ve en el formulario de pago integrado, por ejemplo, las partidas, el importe y la moneda del pedido y los métodos de pago aceptados. En tu servidor, haz la siguiente llamada a la API de Stripe. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "payment_intent_data[application_fee_amount]=123" \ -d "payment_intent_data[transfer_data][destination]={{CONNECTEDACCOUNT_ID}}" \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}" ``` - `line_items`: los artículos que compra el cliente. Se muestran en la interfaz de usuario alojada por Stripe. - `return_url`: este argumento redirige al usuario después de que completa el intento de pago. - `payment_intent_data[application_fee_amount]`: este argumento especifica el importe que tu plataforma tomará de la transacción. El importe total del cargo se transfiere de inmediato de la plataforma a la cuenta conectada especificada por `transfer_data[destination]` después de la captura del cargo. El `application_fee_amount` se vuelve a transferir a la plataforma y se deduce la comisión de Stripe del importe de la plataforma. - `payment_intent_data[transfer_data][destination]`: este argumento indica que se trata de un [cargo a un Destino](https://docs.stripe.com/connect/destination-charges.md). Un cargo a un Destino es aquel que se procesa en la plataforma. Luego, los fondos se transfieren de manera inmediata y automática al saldo pendiente de la cuenta conectada. En el ejemplo de alquiler de viviendas, si un cliente paga a través de la plataforma, la plataforma le paga al propietario. ### Monta Checkout (del lado del cliente) #### HTML + JS Checkout está disponible como parte de [Stripe.js](https://docs.stripe.com/js.md). Incluye el script de Stripe.js en tu página agregándolo al encabezado de tu archivo HTML. A continuación, crea un nodo DOM vacío (contenedor) para usarlo en el montaje. ```html
``` Inicializa Stripe.js con la clave publicable de tu API. Crea una función `fetchClientSecret` asincrónica que haga una solicitud a tu servidor para crear la sesión de Checkout y recuperar el secreto de cliente. Pasa esta función a `options` al crear la instancia de Checkout: ```javascript // Initialize Stripe.js const stripe = Stripe('<>'); initialize(); // Fetch Checkout Session and retrieve the client secret async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Initialize Checkout const checkout = await stripe.createEmbeddedCheckoutPage({ fetchClientSecret, }); // Mount Checkout checkout.mount('#checkout'); } ``` #### React Instala Connect.js y las bibliotecas de React Connect.js desde el [registro público de npm](https://www.npmjs.com/package/@stripe/react-connect-js). ```bash npm install --save @stripe/connect-js @stripe/react-connect-js ``` Para utilizar el componente Embedded Checkout, crea un `EmbeddedCheckoutProvider`. Llama a `loadStripe` con tu clave de API publicable y pasa la `Promise` devuelta al proveedor. Crea una función `fetchClientSecret` asíncrona que haga una solicitud a tu servidor para que cree la sesión de Checkout y recupere el secreto de cliente. Pasa esta función al accesorio `options` aceptado por el proveedor. ```jsx import * as React from 'react'; import {loadStripe} from '@stripe/stripe-js'; import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; return ( ) } ``` Checkout se muestra en un iframe que envía la información de pago a Stripe de manera segura mediante una conexión HTTPS. No coloques Checkout dentro de otro iframe porque, para algunos métodos de pago, se requiere el redireccionamiento a otra página a fin de confirmar el pago. ![](https://b.stripecdn.com/docs-statics-srv/assets/application_fee_amount.837aa2339469b3c1a4319672971c1367.svg) Checkout utiliza la configuración de marca de la cuenta de tu plataforma para los cargos a un destino. Para obtener más información, consulta [Personaliza la imagen de marca](https://docs.stripe.com/connect/destination-charges.md?platform=web&ui=stripe-hosted#branding). Esta sesión crea un cargo a un Destino. Si necesitas controlar el plazo de las transferencias o enviar los fondos de un solo pago a varias personas, utiliza[ cargos y envíos de fondos separados](https://docs.stripe.com/connect/separate-charges-and-transfers.md). ### Gestiona eventos posteriores al pago (del lado del servidor) Stripe envía un evento [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) cuando se completa el pago. [Utiliza un webhook para recibir estos eventos](https://docs.stripe.com/webhooks/quickstart.md) y ejecutar acciones, como enviar un correo electrónico de confirmación del pedido a tu cliente, registrar la venta en una base de datos o iniciar el flujo de tareas para un envío. Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. De su lado, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada. Además, algunos métodos de pago tardan entre 2 y 14 días en confirmar el pago. Si configuras tu integración para escuchar eventos asincrónicos, podrás aceptar varios [métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración. Además de administrar el evento `checkout.session.completed`, te recomendamos administrar otros dos eventos al cobrar pagos con Checkout: | Evento | Descripción | Próximos pasos | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | El cliente ha autorizado correctamente el pago enviando el formulario de Checkout. | Espera hasta saber si el pago se efectuó correctamente o no. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | El pago del cliente se efectuó correctamente. | Entrega los productos o servicios comprados. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | El pago se rechazó o falló por algún otro motivo. | Ponte en contacto con el cliente por correo electrónico y solicítale que haga un nuevo pedido. | Todos estos eventos incluyen el objeto [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md). Después de que el pago se efectúa correctamente, el estado del *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) subyacente cambia de `processing` a `succeeded`. #### Flujo personalizado ### Crea un PaymentIntent (del lado del servidor) Stripe usa un objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) para representar tu intención de cobrarle a un cliente y hace el seguimiento de los intentos de cobro y de los cambios en el estado del pago en todo el proceso. > Si quieres procesar el Payment Element antes de crearlo, consulta [Recopilar los datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). ![Un diagrama resumen de todo el flujo de pago](https://b.stripecdn.com/docs-statics-srv/assets/accept-a-payment-payment-element.5cf6795a02f864923f9953611493d735.svg) Los métodos de pago que se les muestran a los clientes durante el proceso de finalización de compra también se incluyen en el PaymentIntent. Puedes permitir que Stripe extraiga automáticamente los métodos de pago de la configuración del Dashboard o puedes enumerarlos en forma manual. A menos que tu integración requiera una opción basada en código para ofrecer métodos de pago, Stripe recomienda usar la opción automatizada. Esto se debe a que Stripe evalúa la moneda, las restricciones de los métodos de pago y otros parámetros para determinar la lista de métodos de pago admitidos. Se les da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la moneda y la ubicación del cliente. Los métodos de pago menos prioritarios se ocultan en un menú de contenido adicional. #### Gestiona los métodos de pago desde el Dashboard Crea un PaymentIntent en tu servidor que tenga habilitados un importe y una moneda. En la última versión de la API, especificar el parámetro `automatic_payment_methods` es opcional porque Stripe habilita su funcionalidad de forma predeterminada. Puedes administrar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestiona la devolución de los métodos de pago que cumplan los requisitos en función de factores, como el importe de la transacción, la moneda y el flujo de pago. El PaymentIntent se crea para admitir los métodos de pago que configuras en el Dashboard, según corresponda. Tienes que decidir cuánto cobrar siempre del lado del servidor (un entorno de confianza) y no del lado del cliente. Esto impide que clientes malintencionados puedan elegir sus propios precios. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "automatic_payment_methods[enabled]=true" \ -d application_fee_amount=123 \ -d "transfer_data[destination]={{CONNECTEDACCOUNT_ID}}" ``` #### Enumera manualmente los métodos de pago Crea un PaymentIntent en tu servidor con un importe, una moneda y una lista de tipos de métodos de pago. Decide cuánto cobrar siempre del lado del servidor, que es un entorno de confianza, y no del lado del cliente. Esto impide que clientes maliciosos puedan elegir sus propios precios. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=bancontact" \ -d "payment_method_types[]=card" \ -d "payment_method_types[]=eps" \ -d "payment_method_types[]=ideal" \ -d "payment_method_types[]=p24" \ -d "payment_method_types[]=sepa_debit" \ -d "payment_method_types[]=sofort" \ -d application_fee_amount=123 ``` Elige la moneda según los métodos de pago que quieras ofrecer. Algunos métodos de pago admiten varias monedas y países. Esta guía sirve para Bancontact, tarjetas de crédito, EPS, iDEAL, Przelewy24, débito directo SEPA y Sofort. > Cada método de pago debe admitir la moneda especificada en el PaymentIntent, y tu empresa tiene que estar establecida en uno de los países que admite cada método de pago. Consulta las [opciones de integración de métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md) para obtener más información sobre qué admitimos. ### Recuperar el secreto de cliente El PaymentIntent incluye un *secreto de cliente* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) que el lado del cliente usa para completar el proceso de pago de forma segura. Puedes usar diferentes métodos para pasar el secreto del cliente al lado del cliente. #### Aplicación de una sola página Recupera el secreto de cliente de un punto de conexión de tu servidor con la funcionalidad `fetch` del navegador. Este método es más conveniente si tu lado del cliente es una aplicación de una sola página, especialmente, si fue diseñada con un marco de front-end moderno como React. Crea el punto de conexión del servidor que se usa para el secreto de cliente: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Luego recupera el secreto de cliente con JavaScript del lado del cliente: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Renderización del lado del servidor Especifica el secreto de cliente desde tu servidor al cliente. Este enfoque funciona mejor si tu aplicación genera contenido estático en el servidor antes de enviarlo al navegador. Agrega [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) en tu formulario de finalización de compra. En el código del lado de tu servidor, recupera el secreto de cliente de PaymentIntent: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ### Recopila los datos del pago (del lado del cliente) Recopila los datos de pago del cliente con el [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recopilación de datos de pago para una variedad de métodos de pago. El Payment Element contiene un iframe que envía la información de pago a Stripe de manera segura mediante una conexión HTTPS. No coloques el Payment Element dentro de otro iframe porque, para algunos métodos de pago, se requiere la redirección a otra página para la confirmación del pago. Si optas por usar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) establecido en `«payment*»`. Para que la integración funcione, la dirección de la página del proceso de compra debe empezar con `https://` rather en lugar de `http://` for. Puedes probar tu integración sin usar HTTPS, pero recuerda [habilitarla](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos activos. #### HTML + JS ### Configurar Stripe.js El Payment Element se encuentra disponible automáticamente como funcionalidad de Stripe.js. Incluye el script de Stripe.js en tu página de finalización de compra agregándolo al `head` de tu archivo HTML. Siempre debes cargar Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia en tus sistemas. ```html Checkout ``` Crea una instancia de Stripe con el siguiente código JavaScript en tu página de pago: ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` ### Agrega el Payment Element a tu página de pago El Payment Element necesita un lugar específico en tu página de pago. Crea un nodo DOM vacío (contenedor) con un ID único en tu formulario de pago: ```html
``` Cuando se cargue el formulario anterior, crea una instancia de Payment Element y móntala en el nodo DOM del contenedor. Especifica el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del paso anterior en `options` cuando crees la instancia [Elements](https://docs.stripe.com/js/elements_object/create): Debes administrar el secreto de cliente con cuidado porque sirve para completar el cargo. No lo registres, no lo insertes en direcciones URL ni lo expongas a nadie que no sea el cliente. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Configurar Stripe.js Instala [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador de Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) desde el registro público de npm: ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Agrega y configura el proveedor Elements en tu página de pago Para usar el componente Payment Element, envuelve el componente de tu página de confirmación de compra con un [proveedor Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Llama a `loadStripe` con tu clave publicable y especifica el valor `Promise` devuelto en el proveedor `Elements`. También debes especificar el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del paso anterior como `options` al proveedor `Elements`. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Agregar el componente Payment Element Usa el componente `PaymentElement` para crear tu formulario: ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` Stripe Elements es una colección de componentes de interfaz de usuario (IU) desplegables. Para personalizar aún más tu formulario o recopilar otra información del cliente, consulta la [documentación de Elements](https://docs.stripe.com/payments/elements.md). El Payment Element renderiza un formulario dinámico que le permite a tu cliente elegir un método de pago. Para cada método de pago, el formulario le pide automáticamente al cliente que complete todos los datos de pago necesarios. ### Personaliza el aspecto Personaliza el Payment Element para que coincida con el diseño de tu sitio especificando el [objeto appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) en `options` al crear el proveedor `Elements`. ### Recopila las direcciones Por defecto, el Payment Element solo junta los detalles necesarios de la dirección de facturación. Algunos comportamientos, como el [cálculo de impuestos](https://docs.stripe.com/api/tax/calculations/create.md) o la introducción de datos de envío, requieren la dirección completa de tu cliente. Puedes realizar lo siguiente: - Utiliza el [Address Element](https://docs.stripe.com/elements/address-element.md) para aprovechar las funcionalidades de autocompletar y localizar para obtener la dirección completa de tu cliente. Esto ayuda a garantizar el cálculo de impuestos más preciso. - Recopila los datos de la dirección mediante tu propio formulario personalizado. ### Solicita un token de comerciante de Apple Pay Si configuraste tu integración para [aceptar pagos de Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), te recomendamos que configures la interfaz Apple Pay que devuelva un token de comercio, lo que permite habilitar transacciones iniciadas por el comercio (MIT). [Solicita el tipo de token de comercio correspondiente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) en el Payment Element. ### Envía el pago a Stripe (del lado del cliente) Usa [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) para completar el pago con los datos del Payment Element. Proporciona una [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a esta función para indicar a dónde Stripe debe redirigir al usuario después de completar el pago. Es posible que primero se redirija al usuario a un sitio intermedio, como una página de autorización del banco y, luego, a la`return_url`. Los pagos con tarjeta redirigen inmediatamente a la `return_url` cuando un pago se realiza correctamente. Si no quieres realizar el redireccionamiento de pagos con tarjeta una vez que se completan los pagos, puedes configurar el [redireccionamiento](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) en `if_required`. Esto solo redirigirá a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React Para llamar a [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) desde el componente del formulario de pago, usa los hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) y [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Si prefieres componentes de clase tradicionales en lugar de hooks, puedes usar un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ); }; export default CheckoutForm; ``` Asegúrate de que la `return_url` corresponda a una página de tu sitio web que proporcione el estado del pago. Cuando Stripe redirige al cliente a la `return_url`, proporcionamos los siguientes parámetros de consulta de URL: | Parámetro | Descripción | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | El identificador único del `PaymentIntent`. | | `payment_intent_client_secret` | El [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del objeto `PaymentIntent`. | > Si tienes herramientas que rastrean la sesión del navegador del cliente, es posible que debas agregar el dominio `stripe.com` a la lista de exclusión de referentes. Los redireccionamientos hacen que algunas herramientas creen nuevas sesiones, lo que te impide realizar un seguimiento de la sesión completa. Usa uno de los parámetros de consulta para recuperar el PaymentIntent. Examina el [estado del PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) para decidir qué mostrarás a tus clientes. También puedes adjuntar tus propios parámetros de consulta cuando proporciones la `return_url`, que se mantendrán durante el proceso de redireccionamiento. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ### Gestiona eventos posteriores al pago (del lado del servidor) Stripe envía un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) cuando se completa el pago. Usa la [herramienta de webhook del Dashboard](https://dashboard.stripe.com/webhooks) o sigue la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico de confirmación del pedido a tu cliente, registrar la venta en una base de datos o iniciar un flujo de envío. Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. De su lado, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada, y clientes malintencionados podrían manipular la respuesta. Si configuras tu integración para escuchar eventos asincrónicos, podrás aceptar [diferentes tipos de métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración. Además de administrar el evento `payment_intent.succeeded`, recomendamos administrar estos otros eventos si se cobran pagos con el Payment Element: | Evento | Descripción | Acción | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Se envía cuando un cliente completa correctamente un pago. | Envía al cliente una confirmación del pedido y *completa* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) el pedido. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Se envía cuando un cliente inicia con éxito un pago, pero éste aún no se completó. Este evento se envía normalmente cuando el cliente inicia un débito bancario. Le sigue un evento `payment_intent.succeeded` o `payment_intent.payment_failed` en el futuro. | Envía al cliente una confirmación del pedido que indique que el pago está pendiente. En caso de productos digitales, quizá te convenga completar el pedido antes de esperar que se complete el pago. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Enviado cuando un cliente intenta un pago, pero el pago falla. | Si un pago pasa de `processing` a `payment_failed`, ofrécele al cliente otro intento de pago. | ## Pruebas Para probar el flujo de creación de cuentas, [crea cuentas](https://docs.stripe.com/connect/testing.md#creating-accounts) y [usa OAuth](https://docs.stripe.com/connect/testing.md#using-oauth). #### Tarjetas | Número de tarjeta | Escenario | Cómo hacer la prueba | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | El pago con tarjeta se efectúa correctamente y no requiere autenticación. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000002500003155 | El pago con tarjeta requiere *autenticación* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000000000009995 | La tarjeta es rechazada con un código de rechazo `insufficient_funds`. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 6205500000000000004 | La tarjeta UnionPay puede tener entre 13 y 19 dígitos. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | #### Billeteras | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Tu cliente realiza un pago correctamente con un método de pago basado en redireccionamiento y con [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar pago de prueba** en la página de redireccionamiento. | #### Redireccionamientos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Débito directo BECS | Tu cliente paga satisfactoriamente con débito directo BECS. | Completa el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa en un principio al estado `processing` y, 3 minutos más tarde, a `succeeded`. | | Débito directo BECS | El pago de tu cliente falla con un código de error `account_closed`. | Completa el formulario con el número de cuenta `111111113` y BSB `000000`. | | Bancontact, EPS, iDEAL y Przelewy24 | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación inmediata. | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente paga satisfactoriamente con un método de pago basado en redireccionamiento y con [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación diferida. | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | BLIK | Los pagos BLIK generan errores de varias maneras: errores inmediatos (por ejemplo, el código venció o no es válido), errores demorados (el banco lo rechaza) o tiempos de espera (el cliente no respondió a tiempo). | Usa patrones de correo electrónico para [simular los diferentes errores.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Débitos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Débito directo SEPA | Tu cliente paga satisfactoriamente con débito directo SEPA. | Completa el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado “en proceso” y, tres minutos más tarde, a “completado”. | | Débito directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Completa el formulario con el número de cuenta `AT861904300235473202`. | #### Vales | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Tu cliente paga con un vale Boleto u OXXO. | Selecciona Boleto u OXXO como método de pago y envía el pago. Cierra el diálogo después de que aparezca. | Consulta [Pruebas](https://docs.stripe.com/testing.md) para obtener información adicional para probar tu integración. # Hoja de pago > This is a Hoja de pago for when platform is ios and mobile-ui is payment-element. View the full page at https://docs.stripe.com/connect/end-to-end-marketplace?platform=ios&mobile-ui=payment-element. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Integra la interfaz de usuario de pago prediseñada de Stripe a la confirmación de compra de tu aplicación iOS con la clase [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Consulta nuestro ejemplo de integración [en GitHub](https://github.com/stripe/stripe-ios/tree/master/Example/PaymentSheet%20Example). En esta guía, se muestra cómo aceptar pagos y transferir fondos a las cuentas bancarias de los vendedores o proveedores de servicios. A efectos de hacer una demostración, crearemos un marketplace de alquiler de viviendas que conecte a los propietarios con personas que buscan un lugar para alquilar. Puedes aplicar los conceptos incluidos en esta guía a otros tipos de negocio. ## Prerrequisitos 1. [Registra tu plataforma](https://dashboard.stripe.com/connect). 1. [Verifica y agrega datos de la empresa en Dashboard](https://dashboard.stripe.com/account/onboarding). 1. [Completa el perfil de tu plataforma](https://dashboard.stripe.com/connect/settings/profile). 1. [Personaliza la configuración de tu marca](https://dashboard.stripe.com/settings/connect/stripe-dashboard/branding). Agrega el nombre, el ícono y el color de la marca de la empresa. ## Configurar Stripe [Lado del servidor] [Lado del cliente] Primero, necesitas una cuenta de Stripe. [Inscríbete ahora](https://dashboard.stripe.com/register). ### Lado del servidor Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa las bibliotecas oficiales para acceder a la API de Stripe desde tu servidor: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Lado del cliente El [SDK para iOS de Stripe](https://github.com/stripe/stripe-ios) es de código abierto, está [plenamente documentado](https://stripe.dev/stripe-ios/index.html) y es compatible con aplicaciones que admiten iOS 13 o posterior. #### Swift Package Manager Para instalar el SDK, sigue estos pasos: 1. En Xcode, selecciona **Archivo** > **Agregar dependencias de paquetes…** e introduce `https://github.com/stripe/stripe-ios-spm` como URL del repositorio. 1. Selecciona el número de versión más reciente en nuestra [página de versiones](https://github.com/stripe/stripe-ios/releases). 1. Agrega el producto **StripePaymentsUI** al [objetivo de tu aplicación](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Si aún no lo has hecho, instala la última versión de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Si no tienes un [Podfile](https://guides.cocoapods.org/syntax/podfile.html), crea uno al ejecutar el siguiente comando: ```bash pod init ``` 1. Agrega esta línea a tu `Podfile`: ```podfile pod 'StripePaymentsUI' ``` 1. Ejecuta el siguiente comando: ```bash pod install ``` 1. De ahora en adelante, no olvides usar el archivo `.xcworkspace` en lugar del archivo `.xcodeproj` para abrir tu proyecto en Xcode. 1. En el futuro, para actualizar a la última versión del SDK, ejecuta lo siguiente: ```bash pod update StripePaymentsUI ``` #### Carthage 1. Si aún no lo has hecho, instala la última versión de [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Agrega esta línea a tu `Cartfile`: ```cartfile github "stripe/stripe-ios" ``` 1. Sigue las [instrucciones de instalación de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Asegúrate de incrustar todos los frameworks obligatorios enumerados [aquí](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking). 1. En el futuro, para actualizar a la última versión del SDK, ejecuta el siguiente comando: ```bash carthage update stripe-ios --platform ios ``` #### Framework manual 1. Ve a nuestra [página de versiones de GitHub](https://github.com/stripe/stripe-ios/releases/latest) y descarga y descomprime **Stripe.xcframework.zip**. 1. Arrastra **StripePaymentsUI.xcframework** a la sección **Binarios incrustados** de la configuración **General** de tu proyecto en Xcode. Asegúrate de seleccionar **Copiar elementos si es necesario**. 1. Repite el paso 2 para todos los frameworks obligatorios enumerados [aquí](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking). 1. En el futuro, para actualizar a la última versión de nuestro SDK, repite los pasos 1 a 3. > Para obtener más detalles sobre la última versión del SDK y las versiones anteriores, consulta la página [Versiones](https://github.com/stripe/stripe-ios/releases) en GitHub. Para recibir notificaciones cuando se publique una nueva versión, [mira las versiones](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) del repositorio. Configura el SDK con tu [clave publicable](https://dashboard.stripe.com/test/apikeys) de Stripe al iniciar la aplicación. Esto permite que tu aplicación haga solicitudes a la API de Stripe. #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Usa las [claves de prueba](https://docs.stripe.com/keys.md#obtain-api-keys) durante las pruebas y el desarrollo, y tus claves para [modo activo](https://docs.stripe.com/keys.md#test-live-modes) cuando publiques tu aplicación. ## Crea una cuenta conectada #### Accounts v2 Cuando un vendedor o prestador de servicios se registra en tu plataforma, crea una [cuenta conectada](https://docs.stripe.com/api/v2/core/accounts.md) que lo represente. La cuenta conectada te permite recopilar su información de identificación, aceptar pagos en su nombre y transferir fondos a su cuenta bancaria. #### Accounts v1 Cuando un vendedor o prestador de servicios se registra en tu plataforma, crea una [cuenta conectada](https://docs.stripe.com/api/accounts.md) que lo represente. La cuenta conectada te permite recopilar su información de identificación, aceptar pagos en su nombre y transferir fondos a su cuenta bancaria. En nuestro ejemplo de alquileres de vivienda, la cuenta conectada representa al propietario de la casa. ![](https://b.stripecdn.com/docs-statics-srv/assets/express-ios.6789c3d9f8e327847abb218d75a29eec.png) > En esta guía, se usan cuentas Express que tienen algunas [restricciones](https://docs.stripe.com/connect/express-accounts.md#prerequisites-for-using-express). Puedes considerar la posibilidad de usar [cuentas Custom](https://docs.stripe.com/connect/custom-accounts.md) como alternativa. ### Crear una cuenta conectada con información prellenada #### Accounts v2 Usa la API `/v2/core/accounts` para [crear](https://docs.stripe.com/api/v2/core/accounts/create.md) una cuenta conectada especificando el[dashboard de la cuenta conectada y sus responsabilidades](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md). ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-01-28.clover" \ --json '{ "contact_email": "furever_contact@example.com", "display_name": "Furever", "defaults": { "responsibilities": { "fees_collector": "application", "losses_collector": "application" } }, "dashboard": "express", "identity": { "business_details": { "registered_name": "Furever" }, "country": "us", "entity_type": "company" }, "configuration": { "merchant": { "capabilities": { "card_payments": { "requested": true } } }, "recipient": { "capabilities": { "stripe_balance": { "stripe_transfers": { "requested": true } } } } }, "include": [ "configuration.merchant", "configuration.recipient", "identity", "requirements" ] }' ``` Si ya recopilaste información para tus cuentas conectadas, puedes completar automáticamente esa información en el objeto `Account`. Puedes completar previamente cualquier información de la cuenta, incluida la información personal y de la empresa, la información de la cuenta externa, etc. Después de crear la `Cuenta`, crea una [Persona](https://docs.stripe.com/api/v2/core/persons/create.md) que represente a la persona responsable de abrir la cuenta, con `relationship.representative` establecido en verdadero y cualquier información de la cuenta que quieras completar previamente (por ejemplo, su nombre y apellido). ```curl curl -X POST https://api.stripe.com/v2/core/accounts/{{ACCOUNT_ID}}/persons \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-03-25.preview" \ --json '{ "given_name": "Jenny", "surname": "Rosen", "email": "jenny.rosen@example.com", "relationship": { "representative": true } }' ``` El onboarding de Connect no solicita la información que se completó automáticamente. Sin embargo, sí le pide al titular de la cuenta que confirme la información completada automáticamente antes de aceptar el [contrato de servicio de Connect](https://docs.stripe.com/connect/service-agreement-types.md). Cuando pruebes la integración, completa automáticamente la información de la cuenta con los [datos de prueba](https://docs.stripe.com/connect/testing.md). ### Crea un enlace de cuenta Puedes crear un enlace de cuenta llamando a la API [Account Links v2](https://docs.stripe.com/api/v2/core/account-links.md) con los siguientes parámetros: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` - `configurations` = `recipient` y `merchant` ```curl curl -X POST https://api.stripe.com/v2/core/account_links \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2025-08-27.preview" \ --json '{ "account": "{{CONNECTEDACCOUNT_ID}}", "use_case": { "type": "account_onboarding", "account_onboarding": { "configurations": [ "recipient", "merchant" ], "refresh_url": "https://example.com/reauth", "return_url": "https://example.com/return" } } }' ``` ### Redirige al usuario a la URL del enlace de cuenta La respuesta de create Account Link incluye un valor `url`. Después de autenticar al usuario en tu aplicación, redirígelo a esa URL para enviarlo al flujo. Las URL de enlace de cuenta son temporales y de un solo uso, porque dan acceso a los datos personales del usuario de la cuenta conectada. Si quieres prellenar información, debes hacerlo antes de generar el enlace de cuenta. Una vez creado, ya no puedes leer ni escribir información para la cuenta conectada. > No envíes por correo electrónico, ni por mensaje de texto ni por ningún otro medio las URL del enlace de la cuenta fuera de la aplicación de la plataforma. En lugar de eso, envíalas al titular de la cuenta autenticado dentro de tu aplicación. #### Item 1 #### Swift ```swift import UIKit import SafariServices let BackendAPIBaseURL: String = "" // Set to the URL of your backend server class ConnectOnboardViewController: UIViewController { // ... override func viewDidLoad() { super.viewDidLoad() let connectWithStripeButton = UIButton(type: .system) connectWithStripeButton.setTitle("Connect with Stripe", for: .normal) connectWithStripeButton.addTarget(self, action: #selector(didSelectConnectWithStripe), for: .touchUpInside) view.addSubview(connectWithStripeButton) // ... } @objc func didSelectConnectWithStripe() { if let url = URL(string: BackendAPIBaseURL)?.appendingPathComponent("onboard-user") { var request = URLRequest(url: url) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request) { (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let accountURLString = json["url"] as? String, let accountURL = URL(string: accountURLString) else { // handle error } let safariViewController = SFSafariViewController(url: accountURL) safariViewController.delegate = self DispatchQueue.main.async { self.present(safariViewController, animated: true, completion: nil) } } } } // ... } extension ConnectOnboardViewController: SFSafariViewControllerDelegate { func safariViewControllerDidFinish(_ controller: SFSafariViewController) { // the user may have closed the SFSafariViewController instance before a redirect // occurred. Sync with your backend to confirm the correct state } } ``` #### Item 2 ```xml