Crea cargos Direct

Crea cargos directamente en la cuenta conectada y cobra una comisión.

Crea cargos directos cuando los clientes realicen la transacción directamente con una cuenta conectada, a menudo sin saber que existe tu plataforma. Con cargos directos:

El pago aparece como cargo en la cuenta conectada, no en la cuenta de tu plataforma.
El saldo de la cuenta conectada aumenta con cada pago.
El saldo de tu cuenta aumenta con las comisiones de la aplicación recibidas de cada pago.

Este tipo de cargo es el más adecuado para las plataformas que proporcionan software como servicio. Por ejemplo, Shopify proporciona herramientas para crear tiendas en línea, y Thinkific permite a quienes ofrecen cursos de educación venderlos en línea.

Nota

Recomendamos usar cargos directos para las cuentas conectadas que tienen acceso al Dashboard completo de Stripe.

Web

iOS

Android

React Native

Para crear una integración de pagos personalizada, incorpora componentes de interfaz de usuario (IU) en tu sitio con Stripe Elements. El código del cliente y del servidor crea un formulario del proceso de compra que acepta varios métodos de pago. Comprueba cómo esta integración se compara con otros tipos de integración de Stripe.

Para ver cómo funciona Link en un usuario que regresa, introduce el correo electrónico demo@stripe.com. Para ver cómo funciona Link cuando se crea una cuenta nueva, introduce cualquier otro correo electrónico y completa el resto del formulario. En esta demostración, solo se muestra Google Pay o Apple Pay si tienes una tarjeta activa con cualquiera de las billeteras.

Esfuerzo de integración

Mismo código

Tipo de integración

Combina componentes de la interfaz de usuario en un flujo de pago personalizado

Personalización de la interfaz de usuario

Personalización a nivel CSS con la API Appearance

Primero, inscríbete para obtener una cuenta de Stripe.

Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:

Crear un PaymentIntent
Lado del servidor

Stripe usa un objeto PaymentIntent 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.

Los métodos de pago que se les 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 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, no los enumeres manualmente. 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. Stripe les da prioridad a aquellos 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.

Crea un PaymentIntent en tu servidor con 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. Stripe gestiona la devolución de los métodos de pago que cumplen con los requisitos en función de factores como el importe de la transacción, la moneda y el flujo de pagos.

Recuperar el secreto de cliente

El PaymentIntent incluye un secreto de cliente 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.

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:

Luego recupera el secreto de cliente con JavaScript del lado del cliente:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Recopilar datos de pago
Lado del cliente

Recopila los datos de pago del lado del cliente con Payment Element. El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recopilación de datos para diversos métodos de pago.

El Payment Element contiene un iframe que envía de forma segura la información de pago a Stripe a través de una conexión HTTPS. Evita colocar el Payment Element dentro de otro iframe porque algunos métodos de pago requieren redirigir a otra página para la confirmación del pago. Si eliges usar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo allow establecido en igual a "payment *".

Para que la integración funcione, la dirección de la página de confirmación de compra debe empezar con https:// en lugar de http://. Puedes probar tu integración sin usar HTTPS, pero recuerda habilitarla cuando todo esté listo para aceptar pagos reales.

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 confirmació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.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Crea una instancia de Stripe con el siguiente JavaScript en tu página de confirmación de compra:

checkout.js
// Initialize Stripe.js with the same connected account ID used when creating
// the PaymentIntent.
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  stripeAccount: '{{CONNECTED_ACCOUNT_ID}}'

});

Agrega Stripe Elements y el Payment Element a tu página de pago

El Payment Element necesita un lugar donde residir en tu página de pago. Crea un nodo DOM vacío (contenedor) con una ID única en tu formulario de pago.

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Pay</button>
</form>

Cuando se haya cargado el formulario, crea una instancia de Payment Element y móntala en el nodo DOM del contenedor junto con el client secret del paso anterior. Especifica este valor como opción cuando crees la instancia Elements.

El secreto de cliente debe gestionarse con cuidado porque sirve para completar el cargo. No lo registres, no lo insertes en direcciones URL ni se lo muestres a nadie que no sea el cliente.

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with the Appearance API
  appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form using the client secret
const elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");

El Payment Element procesa un formulario dinámico que le permite a tu cliente elegir un método de pago. El formulario recopila automáticamente todos los datos de pago necesarios para el método de pago que el cliente seleccionó. Al configurar el objeto Elements, podrás personalizar el aspecto del Payment Element para que coincida con el diseño de tu sitio.

Enviar el pago a Stripe
Lado del cliente

Usa stripe.confirmPayment para completar el pago con los datos del Payment Element. Proporciona una 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 lareturn_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 en if_required. Esto solo redirigirá a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento.

checkout.js
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`.
  }
});

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 del objeto `PaymentIntent`.

Precaución

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 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.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// 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;
  }
});

Administrar eventos posteriores al pago
Lado del servidor

Stripe envía un evento payment_intent.succeeded cuando se completa el pago. Usa la herramienta de webhook del Dashboard o sigue la guía de webhooks 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 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	Se envía cuando un cliente completa correctamente un pago.	Envía al cliente una confirmación del pedido y completa el pedido.
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	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.

Probar la integración

Número de tarjeta	Escenario	Cómo hacer la prueba
	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.
	El pago con tarjeta 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.
	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.
	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.

Consulta Pruebas para obtener información adicional para probar tu integración.

OpcionalHabilitar métodos de pago adicionales

Cobra comisiones

Cuando se procesa un pago, tu plataforma puede tomar una parte de la transacción en forma de comisiones de la plataforma. Puedes establecer los precios de la comisión de la plataforma de dos maneras:

Utiliza la herramienta de tarifas de la plataforma para establecer y probar las reglas de tarifas. Esta función que no requiere programación del Dashboard de Stripe solo está disponible actualmente para plataformas responsables de pagar las comisiones de Stripe.
Define las reglas de precios internamente, especificando las comisiones de la aplicación directamente en un PaymentIntent. Las comisiones establecidas con este método anulan la lógica de tarifas especificada en la herramienta de tarifas de la plataforma.

Tu plataforma puede cobrar una comisión de la plataforma con las siguientes limitaciones:

El valor de application_fee_amount debe ser positivo e inferior al importe del cargo. La comisión de la plataforma que se cobra tiene un límite del importe capturado del cargo.
No se aplican comisiones adicionales de Stripe a la comisión de la plataforma en sí.
En concordancia con los requisitos reglamentarios y de cumplimiento de la normativa de Brasil, las plataformas establecidas fuera de Brasil con cuentas conectadas brasileñas no pueden cobrar comisiones de la plataforma a través de Stripe.
La moneda de application_fee_amount depende de algunos factores de varias monedas.

La transacción de saldo del cargo resultante incluye un desglose detallado de las comisiones de Stripe y de la plataforma. Para brindar una mejor experiencia a la hora de elaborar informes, se crea un objeto Application Fee después del cobro de la comisión. Utiliza la propiedad amount en el objeto Application Fee para la elaboración de informes. También puedes acceder a estos objetos usando el punto de conexión de las Comisiones de la aplicación.

Las comisiones ganadas se agregan al saldo disponible de tu cuenta según el mismo calendario que se aplica a los fondos provenientes de cargos normales de Stripe. Las comisiones de la aplicación se pueden ver en la sección Comisiones cobradas del Dashboard.

Precaución

De manera predeterminada, las comisiones de la plataforma para cargos directos se crean de forma asincrónica. Si expandes el objeto application_fee en una solicitud de creación de cargo, la comisión de la plataforma se crea sincrónicamente como parte de esa solicitud. Solo expande el objeto application_fee si es necesario, ya que aumenta la latencia de la solicitud.

Para acceder a los objetos Application Fee por las comisiones de la aplicación que se crearon de forma asíncrona, escucha el evento de webhook application_fee.created.

Flujo de fondos con comisiones

Cuando especificas una comisión de aplicación en un cargo, el monto de la comisión se transfiere a la cuenta de Stripe de tu plataforma. Al procesar un cargo directamente en la cuenta conectada, el monto del cargo, menos las comisiones de Stripe y la comisión de la aplicación, se deposita en la cuenta conectada.

Por ejemplo, si efectúas un cargo de USD 10 con una comisión de la aplicación de USD 1.23 (como en el ejemplo anterior), se transfieren USD 1.23 a la cuenta de la plataforma. La cuenta conectada obtiene un importe neto de USD 8.18 (USD 10 - USD 0.59 - USD 1.23) (con las comisiones estándar de Stripe en Estados Unidos).

Flujo de fondos para un cargo con una comisión de la aplicación

Si procesas pagos en varias monedas, lee cómo se administran las monedas en Connect.

Emitir rembolsos

De la misma manera que las plataformas pueden crear cargos en las cuentas conectadas, también pueden crear reembolsos de cargos en las cuentas conectadas. Crea un reembolso con la clave secreta de tu plataforma estando autenticado como cuenta conectada.

Las comisiones de la aplicación no se reembolsan automáticamente al emitir el reembolso. Tu plataforma debe reembolsar expresamente la comisión de la aplicación, o la cuenta conectada (la cuenta en la que se creó el cargo) perderá ese importe. Puedes reembolsar la comisión de la aplicación pasando el valor refund_application_fee de true en la solicitud de reembolso:

De forma predeterminada, se reembolsa el total del cargo, pero puedes crear un reembolso parcial estableciendo un valor de amount como un número entero positivo. Si el reembolso implica que se reembolsa el total del cargo, se reembolsa el total de la comisión de la plataforma. De lo contrario, se reembolsa un importe proporcional de la comisión de la plataforma. Como alternativa, puedes proporcionar un valor de refund_application_fee de false y reembolsar la comisión de la plataforma por separado.

Crea cargos Direct