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

## Limitaciones de visibilidad de la plataforma

Los cargos Direct tienen una visibilidad limitada a nivel de plataforma. Cuando creas cargos Direct, sucede lo siguiente:

- Los objetos de transacción como `PaymentIntents` y `Charges` existen en la cuenta conectada, no en la plataforma.
- Para acceder a los datos de cargos Direct, debes realizar una consulta a la API de Stripe utilizando el [ID de la cuenta conectada en la cabecera Stripe-Account](https://docs.stripe.com/connect/authentication.md).

Este comportamiento de alcance afecta a servicios de sincronización de datos como Fivetran, así como a otras integraciones de terceros que dependen de consultas a la API a nivel de plataforma. Para recuperar datos de cargos Direct, deben consultar la cuenta conectada, no la plataforma.

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

Para crear una integración de pagos personalizada, incorpora componentes de interfaz de usuario (IU) en tu sitio con [Stripe Elements](https://docs.stripe.com/payments/elements.md). 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](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

#### Esfuerzo de integración
Complexity: 3/5
#### 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](https://docs.stripe.com/elements/appearance-api.md)

Primero, [inscríbete](https://dashboard.stripe.com/register) para obtener una cuenta de Stripe.

Usa nuestras bibliotecas oficiales para acceder a la API de Stripe 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'
```

## Crear un PaymentIntent [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.

Un excelente resumen de la integración de pagos que se describe en este documento. (See full diagram at https://docs.stripe.com/connect/direct-charges)

```text
[Cliente] -- Ir a la página de pago --> [Cliente]
[Cliente] -- Enviar información del pedido --> [Servidor]
[Servidor] -- POST /v1/payment_intents --> [Stripe]
[Stripe] -- payment_intent.created: Crea un PaymentIntent nuevo --> [Stripe]
[Stripe] -- Devolver PaymentIntent nuevo --> [Servidor]
[Servidor] -- Devolver client_secret del PaymentIntent --> [Cliente]
[Cliente] -- Brindar detalles de facturación y finalizar el pago --> [Cliente]
[Cliente] -- Llamar a stripe.confirmPayment() con la instancia Elements --> [Stripe]
[Stripe] -- Intenta el pago (puede redirigir a una página asociada) --> [Stripe]
[Stripe] -- Redirige al usuario a la página return_url --> [Cliente]
[Cliente] -- Mostrar el estado del pago --> [Cliente]
[Stripe] -- Envía eventos de webhook con los estados de pago --> [Servidor]
```

Los [métodos de pago que se muestran a los clientes](https://docs.stripe.com/connect/manage-payment-methods.md) durante el proceso de compra también se incluyen en el `PaymentIntent`. Puedes permitir que Stripe extraiga los métodos de pago automáticamente desde la configuración de tu Dashboard o puedes incluirlos en una lista de forma manual.

A menos que tu integración requiera una opción basada en código para ofrecer métodos de pago, no incluyas los métodos de pago en una lista de forma manual. 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 prioriza los métodos de pago que ayudan a aumentar la conversión y que son más pertinentes para la moneda y la ubicación del cliente. Stripe oculta los métodos de pago de menor prioridad en un menú de contenido adicional.

#### Gestionar los métodos de pago desde el Dashboard

Crea un `PaymentIntent` en tu servidor con un importe y una moneda. La especificación del parámetro `automatic_payment_methods` es opcional, ya que su valor predeterminado es true. Stripe identifica los métodos de pago que cumplen con los requisitos según factores como el importe de la transacción, la moneda y el flujo de pago.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \
  -d amount=1000 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d application_fee_amount=123
```

#### Enumerar métodos de pago manualmente

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \
  -d amount=1099 \
  -d currency=eur \
  -d "allowed_payment_method_types[]=bancontact" \
  -d "allowed_payment_method_types[]=card" \
  -d "allowed_payment_method_types[]=eps" \
  -d "allowed_payment_method_types[]=ideal" \
  -d "allowed_payment_method_types[]=p24" \
  -d "allowed_payment_method_types[]=sepa_debit" \
  -d "allowed_payment_method_types[]=sofort" \
  -d application_fee_amount=123
```

Cuando creas un `PaymentIntent`, debes especificar ciertos parámetros, como los siguientes:

- `amount`: crea un `PaymentIntent` en tu servidor con un importe específico. Determina siempre cuánto cobrar del lado del servidor, ya que es un entorno de confianza. Este enfoque impide que clientes malintencionados elijan sus propios precios.
- `currency`: la moneda que incluyas en el `PaymentIntent` filtrará los métodos de pago que se le mostrarán al cliente, por lo que debes elegirla en función de los métodos de pago que quieras ofrecer. Por ejemplo, si especificas `eur` y tienes OXXO habilitado en el Dashboard, OXXO no le aparecerá al cliente porque no admite pagos en EUR. Algunos métodos de pago admiten múltiples monedas y países. En esta guía, se utilizan Bancontact, tarjetas de crédito, EPS, iDEAL, Przelewy24, débito directo SEPA y Sofort en el código de ejemplo.
- `"allowed_payment_method_types[]"`: enumera de forma manual todos los métodos de pago que quieres admitir.
- (Opcional) `payment_intent_data[application_fee_amount]`: este argumento especifica el importe que tu plataforma planea cobrar de la transacción. Si utilizas la [herramienta de precios de la plataforma](https://docs.stripe.com/connect/platform-pricing-tools.md) de Stripe para gestionar los precios de la comisión de la plataforma desde el [Dashboard](https://dashboard.stripe.com/test/settings/connect/platform_pricing/payments), no incluyas este argumento, ya que anula cualquier lógica de precios establecida por la herramienta. Después de procesar el pago en la cuenta conectada, Stripe transfiere el `application_fee_amount` a la plataforma y deduce la comisión de Stripe del saldo de la cuenta conectada.

> Cada método de pago debe admitir la moneda que se especifica en el `PaymentIntent` y el país en el que está establecida tu empresa. 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 detalles.

### 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 de forma segura el proceso de pago. Puedes usar diferentes métodos para pasar el secreto de 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
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## Recopilar datos de pago [Lado del cliente]

Recopila los datos de pago del lado del cliente con [Payment Element](https://docs.stripe.com/payments/payment-element.md). 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&nbsp;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&nbsp;Element 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.

Si optas por usar un iframe y quieres aceptar Apple&nbsp;Pay o Google&nbsp;Pay, el iframe debe tener el atributo [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) configurado en `"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](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos reales.

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

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

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

```javascript
// Initialize Stripe.js with the same connected account ID used when creating
// the PaymentIntent.
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>', {
  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.

```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](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del paso anterior. Especifica este valor como opción cuando crees la instancia [Elements](https://docs.stripe.com/js/elements_object/create).

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.

```javascript
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&nbsp;Element muestra 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ó. Si configuras el objeto `Elements`, podrás [personalizar el aspecto del Payment&nbsp;Element](https://docs.stripe.com/elements/appearance-api.md) para que coincida con el diseño de tu sitio.

#### React

### Configurar Stripe.js

Instala [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador 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 la `Promise` devuelta junto con el [client secret](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("<<YOUR_PUBLISHABLE_KEY>>", {
  stripeAccount: '{{CONNECTED_ACCOUNT_ID}}'
});
function App() {
  const options = {
    // pass the client secret from the previous step
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with the Appearance API
    appearance: {/*...*/},
  };
  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));
```

### Agrega el componente PaymentElement

Usa el componente `PaymentElement` para crear tu formulario.

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};
export default CheckoutForm;
```

El Payment&nbsp;Element muestra un formulario dinámico que le permite a tu cliente elegir un tipo de 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ó. Si configuras el proveedor `Elements`, podrás [personalizar el aspecto del Payment&nbsp;Element](https://docs.stripe.com/elements/appearance-api.md) para que coincida con el diseño de tu sitio.

## Enviar el pago a Stripe [Lado del cliente]

Use [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) to complete the payment using details from the Payment Element. Provide a [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) to this function to indicate where Stripe should redirect the user after they complete the payment. Your user might be first redirected to an intermediate site, such as a bank authorization page, before being redirected to the `return_url`. Card payments immediately redirect to the `return_url` when a payment is successful.

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 tu componente de formulario de pago, usa los hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#usestripe-hook) y [useElements](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#useelements-hook).

Si prefieres los componentes de clase tradicionales en lugar de los hooks, puedes usar un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md?ui=elements#elements-consumer) en su lugar.

```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 (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

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('<<YOUR_PUBLISHABLE_KEY>>');

// 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;
```

### Recopilar información de la cartera

Si aceptas Apple Pay o Google Pay, llama a [elements.submit()](https://docs.stripe.com/js/elements/submit) al principio de tu controlador de envío. Esto activa la validación del formulario y muestra la hoja de pago nativa para que tu cliente pueda autorizar el pago.

#### HTML + JS

```javascript
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Confirm the payment
});
```

#### React

```jsx
const handleSubmit = async (event) => {
  event.preventDefault();

  if (!stripe || !elements) {
    // Stripe.js hasn't yet loaded.
    // Make sure to disable form submission until Stripe.js has loaded.
    return;
  }

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Confirm the payment
};
```

## Administrar eventos posteriores al pago [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. |

## Probar la integración

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

Como plataforma, puedes aceptar pagos en tus cuentas conectadas por una parte de cada transacción en forma de comisiones de solicitud. Puedes establecer las comisiones de la plataforma de las siguientes maneras:

- Utiliza la [herramienta de tarifas de la plataforma](https://docs.stripe.com/connect/platform-pricing-tools.md) 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.
- Especifica las comisiones de la solicitud directamente en un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md). Las comisiones establecidas con este método anulan la lógica de tarifas especificada en la herramienta de tarifas de la plataforma.

> #### Revisar la configuración del cobrador de comisiones
> 
> El cobro de comisiones y la generación de informes para los cargos Direct varían según tu [modelo de precios](https://docs.stripe.com/connect/saas.md#monetization) y cómo configures la [responsabilidad de la comisión](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md#application-fee-behavior). Asegúrate de que tu comisión de la plataforma se ajuste a este comportamiento.

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

- El valor del importe de la comisión de la aplicación (`application_fee_amount`) debe ser positivo e inferior al importe del cargo. El importe del cargo es el tope de la comisión de la plataforma que se puede cobrar.
- 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 normativo 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](https://docs.stripe.com/connect/currencies.md).

La [BalanceTransaction](https://docs.stripe.com/api.md#balance_transaction_retrieve) del cargo resultante incluye un desglose detallado de las comisiones tanto de Stripe como de la solicitud. Para ofrecer una mejor experiencia de elaboración de informes, el cobro de una comisión genera un objeto [ApplicationFee](https://docs.stripe.com/api/application_fees/object.md). Utiliza la propiedad `amount` del objeto `ApplicationFee` para la elaboración de informes.

Puedes ver las comisiones de solicitud en la sección [Comisiones cobradas](https://dashboard.stripe.com/connect/application_fees) del Dashboard.

> 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 recibir notificaciones de los objetos `ApplicationFee` creados de forma asincrónica, escucha el evento webhook [application_fee.created](https://docs.stripe.com/api/events/types.md#event_types-application_fee.created).

## 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](https://docs.stripe.com/api.md#create_refund) con la clave secreta de tu plataforma estando [autenticado](https://docs.stripe.com/connect/authentication.md#stripe-account-header) 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:

```curl
curl https://api.stripe.com/v1/refunds \
  -u "<<YOUR_SECRET_KEY>>:" \
  -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \
  -d "charge={{CHARGE_ID}}" \
  -d refund_application_fee=true
```

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](https://docs.stripe.com/api.md#create_fee_refund) por separado.

## Componentes integrados de Connect

Los [componentes integrados de Connect](https://docs.stripe.com/connect/get-started-connect-embedded-components.md) admiten cargos directos. Cuando usas el [componente integrado de pagos](https://docs.stripe.com/connect/supported-embedded-components/payments.md), puedes permitir que tus cuentas conectadas vean la información de pago, capturen cargos y gestionen disputas desde tu sitio.

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

Los siguientes componentes muestran información para cargos directos:

- [Componente de pago](https://docs.stripe.com/connect/supported-embedded-components/payments.md): muestra todos los pagos y las disputas de una cuenta.

- [Detalles de pagos](https://docs.stripe.com/connect/supported-embedded-components/payment-details.md): Muestra información para un pago específico.

- [Componente de lista de disputas](https://docs.stripe.com/connect/supported-embedded-components/disputes-list.md): muestra todas las disputas de una cuenta.

- [Disputas para un componente de pago](https://docs.stripe.com/connect/supported-embedded-components/disputes-for-a-payment.md): muestra las disputas para un solo pago especificado. Puedes usarlo para incluir funcionalidades para gestionar disputas en una página con tu interfaz de usuario (IU) de pagos.

## See also

- [Cómo trabajar con varias monedas](https://docs.stripe.com/connect/currencies.md)
- [Descripción del cargo en el extracto bancario con Connect](https://docs.stripe.com/connect/statement-descriptors.md)