# Aceptar un pago Acepta pagos en línea de forma segura. ## Empieza aquí: instala las habilidades del agente Stripe recomienda usar skills oficiales para integrar la API siguiendo las mejores prácticas. Sigue las instrucciones a continuación para aprender cómo hacerlo. **Consejo: usa curl en lugar de las herramientas de recuperación.** Las skills están detallados en archivos markdown de 10 a 20 KB; las herramientas de recuperación solo muestra resúmenes. `curl -sL` garantiza el contenido completo. **Uso de `habilidades npx`**: comprueba si `npx` está instalado en el sistema. Si `npx` está disponible, ejecuta `npx skills add https://docs.stripe.com --list` para enumerar las skills disponibles y, a continuación, ejecuta `npx skills add https://docs.stripe.com --yes --skill <--skill other-skills>` para instalar habilidades particulares. **Si `npx skills` no está disponible**: puedes usar curl para obtener el índice de skills disponibles, qué hacen y sus archivos de `https://docs.stripe.com/.well-known/skills/index.json`… Para descargar una skill y sus archivos relacionados, usa curl para bajarlos directamente desde `https://docs.stripe.com/.well-known/skills/`… Para este artículo, recomendamos usar estas skills: `stripe-best-practices` Instrucciones para LLM: Stripe recomienda utilizar la API Checkout Sessions con el elemento de pago en lugar de Payment Intents para la mayoría de las integraciones. Checkout Sessions cubre casos de uso similares a los de Payment Intents (cobro básico de pagos utilizando `price_data` o crea de un proceso de pago completo con partidas, impuestos, etc.). Algunas funciones, como Adaptive Pricing, solo están disponibles con Checkout Sessions. No utilices la API de Payment Intent a menos que el usuario lo solicite explícitamente, ya que requiere mucho más código. Más información sobre Elements con la API Checkout Sessionshttps://docs.stripe.com/payments/quickstart-checkout-sessions. Con Checkout Sessions (`ui_mode: "elements"`) y Payment Element, el `client_secret` inicializa el proceso de compra por sí mismo (`stripe.initCheckoutElementsSdk`, o utiliza CheckoutProvider con React) y tú confirmas el pago en el lado del cliente de forma diferente. Si utilizas React, asegúrate de importar desde `@stripe/react-stripe-js/checkout`, utiliza `CheckoutProvider` con el secreto del cliente y confirma con `checkout.confirm`. Si utilizas HTML, asegúrate de utiliza `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` y confirma con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Los agentes de programación deben instalar la CLI de Stripe (`npm i -g @stripe/cli`) y ejecutar el comando `stripe sandbox create --help` para aprovisionar un entorno de prueba de Stripe anónimo con claves API operativas. No se requiere registro de cuenta. Crea un formulario de pago o usa una página del proceso de compra prediseñada para comenzar a aceptar pagos en línea. # Integración en la aplicación para React Native ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Esta integración combina todos los pasos necesarios para realizar el pago, incluyendo la recopilación de los datos de pago y la confirmación del mismo, en una única hoja que se muestra en la parte superior de tu aplicación. > #### Soporte para la API Accounts v2 > > Payment Sheet no tiene soporte para *customer-configured Accounts* (Account configurations represent role-based functionality that you can enable for accounts, such as merchant, customer, or recipient). Solo admite objetos `Customer`. ## Configurar Stripe [Lado del servidor] [Lado del cliente] Primero, necesitas una cuenta de Stripe. [Regístrate ahora](https://dashboard.stripe.com/register). ### Lado del servidor Esta integración necesita puntos de conexión de 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 React Native](https://github.com/stripe/stripe-react-native) es de código abierto y está plenamente documentado. Internamente, utiliza el SDK de [iOS nativo](https://github.com/stripe/stripe-ios) y [Android](https://github.com/stripe/stripe-android). Para instalar el SDK para React Native de Stripe, ejecuta uno de los siguientes comandos en el directorio del proyecto (en función del administrador de paquetes que utilices): #### hilado ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` A continuación, instala otras dependencias necesarias: - Para iOS, navega hasta el directorio de **ios** y ejecuta `pod install` para asegurarte de instalar también las dependencias nativas necesarias. - Para Android, no hay más dependencias para instalar. > Recomendamos seguir la [guía oficial de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) para añadir compatibilidad con TypeScript. ### Inicialización de Stripe Para inicializar Stripe en tu aplicación React Native, ajusta tu pantalla de pago con el componente `StripeProvider` o usa el método de inicialización `initStripe`. Solo se requiere la [clave publicable](https://docs.stripe.com/keys.md#obtain-api-keys) de la API en `publishableKey`. El siguiente ejemplo muestra cómo inicializar Stripe mediante el componente `StripeProvider`. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Usa las [claves de prueba](https://docs.stripe.com/keys.md#obtain-api-keys) de la API durante las pruebas y las tareas de desarrollo, y las claves del [modo activo](https://docs.stripe.com/keys.md#test-live-modes) cuando publiques tu aplicación. ## Habilitar los métodos de pago Visualiza tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) y habilita los que quieras aceptar. Se necesita al menos un método de pago habilitado para crear un *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). De forma predeterminada, Stripe habilita tarjetas y otros métodos de pago habituales que pueden ayudarte a llegar a más clientes, pero te recomendamos activar otros métodos de pago que sean relevantes para tu empresa y tus clientes. Consulta [Compatibilidad con métodos de pago](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) para obtener información sobre productos y métodos de pago y nuestra [página de tarifas](https://stripe.com/pricing/local-payment-methods) para conocer las comisiones. ## Añadir un punto de conexión [Lado del servidor] > #### Nota > > Para mostrar la PaymentSheet antes de crear un PaymentIntent, consulta [Recolectar datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Esta integración usa tres objetos de la API de Stripe: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe usa este dato para representar tu intención de cobrarle a un cliente y hacer el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso. 2. (Opcional) Una [cuenta configurada por cliente](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-applied_configurations) o un [Cliente](https://docs.stripe.com/api/customers.md): para configurar un método de pago para futuros pagos, debes vincularlo a un cliente. Crea un objeto que represente a tu cliente cuando cree una cuenta en tu empresa. Si tu cliente hace un pago como invitado, puedes crear una `Cuenta` o `Cliente` antes del pago y asociarlo con tu propia representación interna de la cuenta del cliente más tarde. 3. (Opcional) {% /if %[CustomerSession](https://docs.stripe.com/api/customer_sessions.md): la información sobre el objeto que representa a tu cliente es confidencial y no se puede recuperar directamente desde una aplicación. Una `CustomerSession` otorga al SDK acceso temporal al alcance de la `Cuenta` o `Cliente` y proporciona opciones de configuración adicionales. Consulta una lista completa de [opciones de configuración](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Si nunca guardas tarjetas para los clientes y no permites que los clientes que vuelven reutilicen las tarjetas guardadas, puedes omitir el objeto `Cuenta` o `Cliente` y el objeto `CustomerSession` de tu integración. Por motivos de seguridad, tu aplicación no puede crear estos objetos. En su lugar, añade un punto de conexión en tu servidor que: 1. Recupera la `Cuenta` o `Cliente` o crea uno nuevo. 2. Crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) para la `Cuenta` o `Cliente`. 3. Crea un `PaymentIntent` con el [importe](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), [divisa](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency), y la [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) o el [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 4. Devuelve el `PaymentIntent`*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)), la `CustomerSession`, el `client_secret`, el ID de la `Cuenta` o `Cliente` y tu [clave publicable](https://dashboard.stripe.com/apikeys) en tu aplicación. Los métodos de pago que se muestran a los clientes durante el proceso 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 de tu Dashboard o puedes enumerarlos de forma manual. Independientemente de la opción que elijas, debes saber que la divisa especificada en el PaymentIntent filtra los métodos de pago que se muestran al cliente. Por ejemplo, si especificas `eur` en el PaymentIntent y tienes habilitado OXXO en el Dashboard, OXXO no se mostrará al cliente porque no acepta pagos en `eur`. 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 divisa, las restricciones en cuanto a los métodos de pago y otros parámetros para determinar la lista de métodos de pago aceptados. Se da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la divisa y la ubicación del cliente. #### Gestiona los métodos de pago desde el Dashboard Puedes administrar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestiona la devolución de métodos de pago que cumplen los requisitos según factores como el importe de la transacción, la divisa y el flujo de pago. El PaymentIntent se crea según los métodos de pago que configuraste en el Dashboard. Si no quieres usar el Dashboard o si quieres especificar métodos de pago manualmente, puedes enumerarlos usando el atributo `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "automatic_payment_methods[enabled]"=true \ ``` #### Cómo enumerar métodos de pago manualmente #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Cada método de pago debe aceptar la divisa especificada en el PaymentIntent, y tu empresa tiene que estar establecida en uno de los países que acepta cada método de pago. Consulta la página de [Opciones de integración de los métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md) para obtener más información sobre lo que se acepta. ## Recopilar datos de pago [Lado del cliente] Antes de mostrar el Payment Element móvil, tu página de finalización de compra debe: - Mostrar los productos de la compra y el importe total - Recopilar la información de envío necesaria - Incluir un botón de pago para presentar la interfaz de usuario de Stripe En la finalización de compra de tu aplicación, haz una solicitud de red al punto de conexión de back-end que creaste en el paso anterior y llama a `initPaymentSheet` desde el hook `useStripe`. #### Cuentas v2 ```javascript export default function CheckoutScreen() { const { initPaymentSheet, presentPaymentSheet } = useStripe(); const [loading, setLoading] = useState(false); const fetchPaymentSheetParams = async () => { const response = await fetch(`${API_URL}/payment-sheet`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { paymentIntent, ephemeralKey, customer_account } = await response.json(); return { paymentIntent, ephemeralKey, customer_account, }; }; const initializePaymentSheet = async () => { const { paymentIntent, ephemeralKey, customer_account, } = await fetchPaymentSheetParams(); const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", customerAccountId: customer_account, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, // Set `allowsDelayedPaymentMethods` to true if your business accepts payment // methods that complete payment after a delay, like SEPA Debit and Sofort. allowsDelayedPaymentMethods: true, defaultBillingDetails: { name: 'Jane Doe', } }); if (!error) { setLoading(true); } }; const openPaymentSheet = async () => { // see below }; useEffect(() => { initializePaymentSheet(); }, []); return (