# Crea una página del proceso de compra personalizada que incluya Link
Integra Link utilizando el Payment Element o el Link Authentication Element.
Si tu plataforma Connect usa [Cuentas configuradas por clientes](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), usa nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias de `Clientes` y eventos en tu código con las referencias de la API Accounts v2 equivalentes.
Esta guía te explica cómo aceptar pagos con [](https://docs.stripe.com/payments/link.md) mediante el uso de la [API Payment Intents](https://docs.stripe.com/api/payment_intents.md) y el [elemento Payment](https://docs.stripe.com/payments/payment-element.md) o el elemento Authentication de [](https://docs.stripe.com/payments/elements/link-authentication-element.md).
Hay tres formas de proteger la dirección de correo electrónico del cliente para la autenticación e inscripción de :
- **Especifica una dirección de correo electrónico**: puedes especificar una dirección de correo electrónico para el Payment Element usando [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues). Si ya recopilas la dirección de correo electrónico o el número de teléfono del cliente en el flujo de compra, te recomendamos este enfoque.
- **Recopilar una dirección de correo electrónico**: puedes recopilar una dirección de correo electrónico directamente en el Payment Element. Si no recopilas la dirección de correo electrónico en ninguna parte del flujo de compra, te recomendamos este enfoque.
- **Elemento Authentication :** puedes usar el elemento Authentication de para crear un único campo de entrada de correo electrónico tanto para la recopilación como para autenticación del correo electrónico . Te recomendamos hacerlo si usas el [elemento Address](https://docs.stripe.com/elements/address-element.md).
Recopilación de una dirección de correo electrónico del cliente para la autenticación o la inscripción de
## Configurar Stripe [Lado del servidor]
Primero, [crea una cuenta de Stripe](https://dashboard.stripe.com/register) o [inicia sesión](https://dashboard.stripe.com/login).
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 cobrar 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 recopilas datos de la tarjeta para [consumo futuro con Setup Intents](https://docs.stripe.com/payments/save-and-reuse.md), enumera métodos de pago manualmente en lugar de usar métodos de pago dinámicos. Para usar Link sin métodos de pago dinámicos, actualiza tu integración para pasar `link` a `pago_method_types`.
Cuando crees un PaymentIntent, [ofréceles dinámicamente a tus clientes los métodos de pago más relevantes](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), incluido Link, usando métodos de pago dinámicos. Para usar métodos de pago dinámicos, no incluyas el parámetro `pago_method_types`. Como opción, también puedes habilitar `automatic_payment_methods`.
> Cuando tu integración no establece el parámetro `payment_method_types`, algunos métodos de pago se activan automáticamente, incluidas las tarjetas y billeteras.
Para agregar Link a tu integración de Elements con métodos de pago dinámicos:
1. En la [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) del Dashboard, activa Link.
1. Si tienes una integración existente que enumera manualmente los métodos de pago, elimina el parámetro [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) de tu integración.
### 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 el correo electrónico de los clientes
Link autentica a un cliente mediante su dirección de correo electrónico. Según tu flujo de compra, tienes las siguientes opciones: enviar el correo electrónico al Payment Element, solicitarlo directamente dentro del Payment Element, o usar el Link Authentication Element. De estas, Stripe recomienda enviar la dirección de correo electrónico del cliente al Payment Element cuando esté disponible.
#### Pasa un correo electrónico
Si *alguno* de los siguientes puntos se aplica a tu caso:
- Conoces la dirección de correo electrónico de tu cliente antes de que llegue a la página de pago (por el perfil de un cliente, por ejemplo).
- No es necesario que recopiles una dirección de envío de tu cliente.
- Prefieres usar tu propio campo de entrada de correo electrónico que coloques antes del formulario de pago.
Luego, integra Link mediante el envío de la dirección de correo electrónico del cliente al Payment Element. Esto permite un proceso de compra más rápido, ya que activa el flujo de autenticación de Link tan pronto como el cliente llega al paso de pago. Esta opción utiliza un solo elemento: el Payment Element.
Link completa automáticamente el correo electrónico recopilado en el formulario de proceso de compra para agilizar este proceso
Link muestra un aviso de autenticación para un cliente existente
En este flujo, recopilas el correo electrónico en tu propio formulario *antes* de que el cliente llegue al paso de pago y lo envías al Payment Element. Este autentica al cliente en el paso de pago y muestra los datos de pago guardados en su cuenta de Link, o bien presenta el formulario de creación de cuenta de Link después de ingresar los datos de la tarjeta. Esto se ve de la siguiente forma:
Integra Link utilizando el Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
Esta opción de integración no recopila la dirección de envío del cliente. Si necesitas recopilar una dirección de envío, integra Link con el Link Authentication Element, Address Element y Payment Element.
#### Recopila un correo electrónico
La autenticación de Link en el Payment Element permite a tus clientes ingresar su dirección de correo electrónico directamente en el Payment Element, sin necesidad de realizar ninguna integración adicional.
En este flujo, tu cliente ingresa su dirección de correo electrónico y se autentica o se registra con Link directamente en el Payment Element durante el proceso de compra. Si un cliente aún no se registró con Link y selecciona un método de pago compatible en el Payment Element, se le pedirá que guarde sus datos con Link. Para quienes ya se registraron, Link completa automáticamente su información de pago.
#### Utilizar el Link Authentication Element
Si *alguno* de los siguientes puntos se aplica a tu caso:
- Quieres un único componente optimizado para la recopilación de correo electrónico y la autenticación con Link.
- Debes recopilar una dirección de envío de tu cliente.
Luego, utiliza el flujo de integración que implementa estos elementos: el Link Authentication Element, el Payment Element y, de forma opcional, el Address Element.
Una página de proceso de compra habilitada para Link coloca el Link Authentication Element al inicio, seguido del Address Element y, al final, el Payment Element. También puedes mostrar el Link Authentication Element en páginas diferentes con el mismo orden para flujos de compra de varias páginas.
Crea un formulario de pago usando varios Elements
La integración funciona de la siguiente manera:
Un diagrama que describe cómo integrar Link usando el Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
## Configura tu formulario de pago [Lado del cliente]
Ahora puedes configurar tu formulario de pago personalizado con los componentes de interfaz de usuario prediseñados de Elements. Para que la integración funcione, tu página de pago debe empezar con `https://` en lugar de `http://`. Puedes probar tu integración sin usar HTTPS. [Habilita HTTPS](https://docs.stripe.com/security/guide.md#tls) cuando estés listo para aceptar pagos reales.
#### Pasa un correo electrónico
El Payment Element renderiza un formulario de contacto del cliente completado automáticamente que incluye el número de teléfono y la dirección de correo electrónico. También genera un formulario dinámico que le permite a tu cliente elegir un tipo de método de pago. Este formulario recopila automáticamente todos los datos de pago necesarios para el método de pago seleccionado por el cliente.
Además, el elemento Payment se encarga de mostrar los métodos de pago guardados por Link para los clientes autenticados.
#### React
### Configurar Stripe Elements
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
```
### Crear el formulario de pago
En tu página de pago, integra tu formulario de pago con el componente `Elements` y transfiere el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Si tienes otra información del cliente, pásala al objeto `defaultValues.billingDetails` del `PaymentElement`. Completar automáticamente la mayor cantidad de información posible agiliza la creación y reutilización de cuentas Link por parte de tus clientes. También puedes incluir el [objeto Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) para personalizar los Elements y que coincidan con el diseño de tu sitio.
Luego, renderiza el `PaymentElement` en tu formulario de pago. Te recomendamos que especifiques al menos la dirección de correo electrónico del cliente en [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) para completar automáticamente sus datos en Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Configurar Stripe Elements
Incluye el script de Stripe.js en tu página de pago agregándolo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el guión en un paquete ni alojes una copia por tu cuenta.
```html
Checkout
```
Crea una instancia del [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) especificando tu [clave de API](https://docs.stripe.com/keys.md) publicable como primer parámetro:
```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 Link Elements a tu página de pago
En tu página de pagos, crea nodos DOM vacíos con ID únicos para que Elements los renderice en:
```html
```
Cuando se cargue el formulario que acabas de configurar, crea un nuevo grupo de Elements y transfiere el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). También puedes especificar el [objeto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) y personalizar los Elements para que coincidan con el diseño de tu sitio.
Si tienes otra información del cliente, pásala al objeto `defaultValues.billingDetails` de `PaymentElement`. Completar automáticamente la mayor cantidad de información posible agiliza la creación de cuentas de Link y su reutilización por parte de tus clientes.
Por último, crea una instancia de cada Element y móntala en el nodo DOM correspondiente:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Prefill customer data using the defaultValues option. Passing in the email
// is required for this integration. The other fields are optional.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'foo@bar.com',
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Recopila un correo electrónico
El Payment Element renderiza un formulario de contacto del cliente completado automáticamente que incluye el número de teléfono y la dirección de correo electrónico. También genera un formulario dinámico que le permite a tu cliente elegir un tipo de método de pago. Este formulario recopila automáticamente todos los datos de pago necesarios para el método de pago seleccionado por el cliente.
Además, el elemento Payment se encarga de mostrar los métodos de pago guardados de Link para los clientes autenticados. Para esta integración, debes dejar activada la opción Link en la [configuración de métodos de Payment](https://dashboard.stripe.com/settings/payment_methods).
#### React
### Configurar Stripe Elements
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
```
### Crear el formulario de pago
En tu página de pago, integra tu formulario de pago con el componente `Elements` y transfiere el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Si tienes otra información del cliente, pásala al objeto `defaultValues.billingDetails` del `PaymentElement`. Completar automáticamente la mayor cantidad de información posible agiliza la creación y reutilización de cuentas Link por parte de tus clientes. También puedes incluir el [objeto Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) para personalizar los Elements y que coincidan con el diseño de tu sitio.
Luego, renderiza el `PaymentElement` en tu formulario de pago. Te recomendamos que especifiques al menos la dirección de correo electrónico del cliente en [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) para completar automáticamente sus datos en Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Configurar Stripe Elements
Incluye el script de Stripe.js en tu página de pago agregándolo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el guión en un paquete ni alojes una copia por tu cuenta.
```html
Checkout
```
Crea una instancia del [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) especificando tu [clave de API](https://docs.stripe.com/keys.md) publicable como primer parámetro:
```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 Link Elements a tu página de pago
En tu página de pagos, crea nodos DOM vacíos con ID únicos para que Elements los renderice en:
```html
```
Cuando se cargue el formulario que acabas de configurar, crea un nuevo grupo de Elements y transfiere el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). También puedes especificar el [objeto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) y personalizar los Elements para que coincidan con el diseño de tu sitio.
Si tienes otra información del cliente, pásala al objeto `defaultValues.billingDetails` de `PaymentElement`. Completar automáticamente la mayor cantidad de información posible agiliza la creación de cuentas de Link y su reutilización por parte de tus clientes.
Por último, crea una instancia de cada Element y móntala en el nodo DOM correspondiente:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Create the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Utilizar el Link Authentication Element
El elemento Authentication renderiza una entrada de dirección de correo electrónico. Cuando encuentra una coincidencia entre el correo electrónico de un cliente y una cuenta de existente, envía al cliente un código seguro de un solo uso a su teléfono para autenticar. Si el cliente lo autentica correctamente, Stripe muestra automáticamente las direcciones guardadas en y los métodos de pago para que puedan usarlos.
Esta integración también crea el elemento Payment, que renderiza 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 seleccionado por el cliente. El elemento Payment también gestiona la pantalla de métodos de pago guardados en Link para los clientes autenticados.
#### React
### Configurar Stripe Elements
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 npm.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
En tu página de pago, integra tu formulario de pago con el componente `Elements`, y transfiere el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del [paso anterior](https://docs.stripe.com/payments/link/add-link-elements-integration.md#web-create-intent). Si ya recopilas el correo electrónico del cliente en otra parte del formulario, reemplaza la entrada existente con el `linkAuthenticationElement`.
Si no recopilas el correo electrónico, agrega el `linkAuthenticationElement` a tu flujo de compra. Debes colocar el `linkAuthenticationElement` antes del `ShippingAddressElement` (opcional si recopilas direcciones de envío) y el `PaymentElement` para Link a fin de completar automáticamente los datos guardados por Link para tu cliente en el `ShippingAddressElement` y `PaymentElement`. También puedes especificar la [opción de aspecto](https://docs.stripe.com/elements/appearance-api.md) mediante la personalización de Elements para que coincidan con el diseño de tu sitio.
Si recopilas la dirección de correo electrónico del cliente, pásala a la opción `defaultValues` del `linkAuthenticationElement`. Esto completa previamente tu dirección de correo electrónico e inicia el proceso de autenticación de Link.
Si tienes otra información del cliente, pásala al objeto `defaultValues.billingDetails` del `PaymentElement`. Completar previamente la mayor cantidad de información posible agiliza la creación de cuentas de Link y la reutilización de cuentas para tus clientes.
Luego, renderiza los componentes `linkAuthenticationElement` y `PaymentElement` en tu formulario de pago:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
No es necesario que `linkAuthenticationElement`, `PaymentElement` y `ShippingAddressElement` estén en la misma página. Si tienes un proceso en el que la información de contacto del cliente, la información de envío y los detalles de pago se muestran al cliente en pasos separados, puedes mostrar cada Element en el paso o la página correspondiente. Incluye el `linkAuthenticationElement` como el formulario de entrada de correo electrónico en el paso de recopilación de información de contacto para asegurarte de que el cliente pueda aprovechar al máximo la función de autocompletar envío y pago proporcionada por Link.
Si recopilas el correo electrónico de tu cliente con el Authentication Element al principio del flujo de compra, no es necesario que lo vuelvas a mostrar en las páginas de envío o pago.
### Recuperar una dirección de correo electrónico
Puedes recuperar los datos de la dirección de correo electrónico utilizando el accesorio `onChange` en el componente `linkAuthenticationElement`. El controlador `onChange` se activa cuando el usuario actualiza el campo de correo electrónico o cuando un correo electrónico de cliente guardado se completa previamente.
```jsx
{
setEmail(event.value.email);
}} />
```
### Autocompletar una dirección de correo electrónico de un cliente
El Authentication Element acepta una dirección de correo electrónico. Proporcionar la dirección de correo electrónico de un cliente activa el flujo de autenticación de cuando el cliente llega a la página de pago con la opción `defaultValues`.
```jsx
```
#### HTML + JS
### Configurar Stripe Elements
Incluye el script de Stripe.js en tu página de pago agregándolo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el guión en un paquete ni alojes una copia por tu cuenta.
```html
Checkout
```
Crea una instancia del [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) especificando tu [clave de API](https://docs.stripe.com/keys.md) publicable como primer parámetro:
```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 Link Elements a tu página de pago
En tu página de pagos, crea nodos DOM vacíos con ID únicos para que Elements los renderice en:
```html
```
Cuando se cargue el formulario que acabas de configurar, crea un nuevo grupo de Elements y transfiere el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Si ya recopilas el correo electrónico del cliente en tu formulario de pago, reemplaza la información que ya has ingresado por `linkAuthenticationElement`.
Si no recopilas el correo electrónico, agrega `linkAuthenticationElement` a tu flujo de compra antes de `ShippingAddress` (opcional si recopilas direcciones de envío). Agrega `PaymentElement` para Link para autocompletar los datos guardados de Link para tu cliente en `shippingAddress` y `PaymentElement`. También puedes especificar el [objeto de aspecto](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) y personalizar los Elements para que coincidan con el diseño de tu sitio.
Si tienes el correo electrónico del cliente, pásalo a la opción `defaultValues` de `linkAuthenticationElement`. Esto completa previamente su correo electrónico e inicia el proceso de autenticación Link. Si tienes otra información del cliente, pásala al objeto `defaultValues.billingDetails` de `PaymentElement`. Completar previamente la mayor cantidad de información posible simplifica la creación y reutilización de la cuenta Link para tus clientes.
Por último, crea una instancia de cada Element y móntala en el nodo DOM correspondiente:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2), loader, and appearance (optional).
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");
// Passing in defaultValues is optional, but useful if you want to prefill consumer information to
// ease consumer experience.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
paymentElement.mount("#payment-element");
```
`linkAuthenticationElement` renderiza una entrada de dirección de correo electrónico. Cuando Link hace coincidir el correo electrónico de un cliente con una cuenta de Link existente, envía al cliente un código seguro único a su teléfono para autenticar. Si el cliente autentica su identidad correctamente, Stripe muestra automáticamente las direcciones guardadas en Link y los métodos de pago para que puedan usarlos.
El `PaymentElement` renderiza 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 tipo de método de pago seleccionado por el cliente. El `PaymentElement` también gestiona la pantalla de métodos de pago guardados en Link para los clientes autenticados.
No hace falta que los Elements Link Autenticación, Pago y Dirección de envío estén en la misma página. Si tienes un proceso en el que la información de contacto del cliente, la información de envío y los detalles de pago se muestran al cliente en pasos separados mientras realizas el pago, puedes mostrar cada Element en el paso o página correspondiente. Incluye el Element Authentication como formulario de entrada de correo electrónico en el paso de cobro para garantizar que el cliente pueda aprovechar al máximo la función de autocompletado proporcionada por .
Si recopilas el correo electrónico de tu cliente con el Element Autenticación al principio del flujo de compra, no es necesario que lo vuelvas a mostrar en las páginas de envío o pago.
### Recuperar la dirección de correo electrónico
Puedes recuperar los datos de la dirección de correo electrónico utilizando el accesorio `onChange` en el componente `linkAuthenticationElement`. El controlador `onChange` se activa cuando el usuario actualiza el campo de correo electrónico o cuando un correo electrónico de cliente guardado se completa previamente.
```javascript
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
});
```
### Autocompletar una dirección de correo electrónico de un cliente
El Link Element Autenticación acepta una dirección de correo electrónico. Proporcionar la dirección de correo electrónico de un cliente inicia el flujo de autenticación de cuando el cliente llega a la página de pago con la opción `defaultValues`.
```javascript
// Create linkAuthentication element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
```
## Optional: Completar automáticamente datos adicionales del cliente [Lado del cliente]
Si tienes la información del cliente, completarla previamente agiliza aún más el proceso de pago y reduce la entrada manual de datos.
#### Pasar un correo electrónico
Payment Element acepta un objeto `defaultValues.billingDetails` que te permite completar de manera automática el nombre y el número de teléfono del cliente, así como su correo electrónico y su dirección de envío. Completar automáticamente la mayor cantidad posible de información del cliente agiliza la creación y reutilización de cuentas Link.
Completa automáticamente la dirección de correo electrónico, el número de teléfono y el nombre del cliente así se agiliza el proceso de creación de cuentas Link
Puedes proporcionar los siguientes valores al objeto `defaultValues.billingDetails`:
| Valor | Obligatoria | Formato |
| --------- | ----------- | ---------------------------------------------------------------------------------- |
| `email` | Obligatoria | cadena |
| `name` | Opcional | cadena |
| `phone` | Opcional | cadena |
| `address` | Opcional | Objeto JSON con los campos `postal_code`y `country`. Todos los campos son cadenas. |
La especificación de `defaultValues.billingDetails` en el Payment Element depende de si recopilas la información en una página separada antes del Payment Element o en la misma página.
#### Antes del Payment Element
Si recopilas información en una página separada antes del Payment Element, puedes completar automáticamente los valores especificando `defaultValues.billingDetails` al crear el Payment Element:
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'johnd@domain.com',
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
#### La misma página que el Payment Element
Si recopilas información en la misma página que el Payment Element, puedes completar automáticamente los valores actualizando el Payment Element con `defaultValues.billingDetails`.
```javascript
const paymentElement = elements.create('payment')
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
function updateValues() {
paymentElement.update({
defaultValues: {
billingDetails: {
email: document.getElementById('email').value, // Or whichever ID used for your fields
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
address: {
postal_code: document.getElementById('postal_code').value,
country: document.getElementById('country').value,
},
},
},
});
}
const yourCollectionFieldIds = [
'name',
'email',
'phone',
'country',
'postal_code',
];
// We recommend updating defaultValues only onBlur
yourCollectionFields.forEach((key) => {
document.getElementById(key).onblur = function() {updateValues()};
});
```
#### Envía un correo electrónico al Link Authentication Element
Si estás usando el Link Authentication Element, agrega el objeto `defaultValues.billingDetails` al Payment Element para completar automáticamente el nombre, el teléfono y las direcciones de envío del cliente. Cuanta más información completes automáticamente, más fácil será crear y usar la cuenta de Link.
Completa automáticamente la dirección de correo electrónico, el número de teléfono y el nombre del cliente así se agiliza el proceso de creación de cuentas Link
Puedes proporcionar los siguientes valores al objeto `defaultValues.billingDetails`:
| Valor | Obligatoria | Formato |
| --------- | ----------- | ---------------------------------------------------------------------------------- |
| `name` | Opcional | cadena |
| `phone` | Opcional | cadena |
| `address` | Opcional | Objeto JSON con los campos `postal_code`y `country`. Todos los campos son cadenas. |
Un Payment Element con todos sus valores completados automáticamente tiene un aspecto similar al de los siguientes ejemplos:
#### Reaccionar
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
## Optional: Recopilar direcciones de envío [Lado del cliente]
#### Pasar un correo electrónico
Esta opción de integración no recopila la dirección de envío del cliente. Si necesitas recopilar una dirección de envío, integra Link usando el Link Authentication Element, Address Element y Payment Element en los pasos [Usar el Link Authentication Element](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).
#### Utilizar el Link Authentication Element
#### React
Para recopilar direcciones, crea un nodo DOM vacío para que el [elemento Address](https://docs.stripe.com/elements/address-element.md) las renderice. El elemento Address debe mostrarse después del elemento Authentication de para que complete de manera automática los detalles de la dirección guardada de un cliente:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,AddressElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
Muestra el `AddressElement` antes del `PaymentElement`. El `PaymentElement` detecta de manera dinámica los datos de la dirección recopilados por el `AddressElement`, oculta los campos innecesarios y recopila los datos adicionales de la dirección de facturación que sean necesarios.
### Recupera la información de la dirección
El `AddressElement` automáticamente especifica la dirección de envío cuando un cliente envía el pago, pero también puedes recuperar los datos de la dirección en el front-end usando la propiedad `onChange`. El controlador `onChange` envía un evento cuando el usuario actualiza cualquier campo en el Address Element o elige una dirección guardada:
```jsx
{
setAddressState(event.value);
}} />
```
### Completar previamente una dirección de envío
Usa [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) para completar automáticamente la información de la dirección y acelerar el proceso de finalización de compra para tus clientes.
```jsx
```
#### HTML + JS
[Address Element](https://docs.stripe.com/elements/address-element.md) te permite recopilar direcciones de envío o de facturación. Crea un nodo DOM vacío para Address Element. Muéstralo después de Link Authentication Element:
```html
```
Luego, crea una instancia del Address Element y móntala en el nodo DOM:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>');
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");addressElement.mount("#address-element");
paymentElement.mount("#payment-element");
```
Muestra el Address Element antes del Payment Element. El Payment Element detecta de manera dinámica los datos de la dirección recopilados por el Address Element, oculta los campos innecesarios y recopila los datos adicionales de la dirección de facturación que sean necesarios.
### Recupera la información de la dirección
El Address Element especifica automáticamente la dirección de envío cuando un cliente realiza el pago, pero también puedes recuperar los datos de la dirección en el front-end usando el evento `change`. El evento `change` se envía cuando el usuario actualiza cualquier campo en el Address Element, o después de seleccionar las direcciones guardadas:
```javascript
addressElement.on('change', (event: AddressChangeEvent) => {
const address = event.value;
})
```
### Completar previamente una dirección de envío
Usa [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) para completar automáticamente la información de la dirección y acelerar el proceso de finalización de compra para tus clientes.
```javascript
// Create addressElement with the defaultValues option
const addressElement = elements.create("address", {
mode: 'shipping',
defaultValues: {
name: 'Jane Doe',
address: {
line1: '354 Oyster Point Blvd',
line2: '',
city: 'South San Francisco',
state: 'CA',
postal_code: '94080',
country: 'US',
}
}
});
// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");
```
## Optional: Personalizar el aspecto [Lado del cliente]
Después de agregar estos Elements a tu página, puedes personalizar su [aspecto](https://docs.stripe.com/elements/appearance-api.md#theme) para adecuarlos al resto de tu diseño:
Personaliza el aspecto de tus Elements
## Enviar el pago a Stripe [Lado del cliente]
Usa [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) para completar el pago con los datos recopilados de tu cliente en los diferentes formularios de Elements. Proporciona un [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 redirige al usuario después de completar el pago.
Es posible que tu usuario sea redirigido primero a un sitio intermedio, como una página de autorización bancaria, antes de que Stripe lo redirija a la `return_url`.
De forma predeterminada, los pagos con tarjeta y bancarios redirigen inmediatamente a la `return_url` cuando un pago se realiza correctamente. Si no quieres redirigir a la `return_url`, puedes usar [if_required](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) para cambiar el comportamiento.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
// If collecting shipping
AddressElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage =({clientSecret}) => (
);
export default function CheckoutForm() {const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
},
});
if (error) {
// handle error
}
};
return (
);
}
```
#### HTML + JS
```javascript
const stripe = Stripe('<>');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
}
});
if (error) {
// Show error to your customer (for example, payment details incomplete)
console.log(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`.
}
});
```
La `return_url` corresponde a una página en tu sitio web que proporciona [el estado del pago](https://docs.stripe.com/payments/payment-intents/verifying-status.md) del `PaymentIntent` cuando procesas la página de devolución. Cuando Stripe redirige al cliente a la `return_url`, puedes usar los siguientes parámetros de consulta de URL para verificar el estado del pago. También puedes adjuntar tus propios parámetros de consulta cuando proporciones la `return_url`. Estos parámetros de consulta se conservan durante el proceso de redireccionamiento.
| 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`. |
## Optional: Separar la autorización de la captura [Lado del servidor]
Link admite [la autorización y la captura por separado](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). Debes capturar un pago autorizado de Link dentro de los 7 días posteriores a la autorización. De lo contrario, la autorización se cancela automáticamente, y no podrás capturar ese pago.
### Indicarle a Stripe que autorice únicamente
Para indicar que quieres separar la autorización y la captura, establece [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) en `manual` al crear el PaymentIntent. Este parámetro le indica a Stripe que solo debe autorizar el importe en el método de pago del cliente.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d "payment_method_types[]=link" \
-d "payment_method_types[]=card" \
-d amount=1099 \
-d currency=usd \
-d capture_method=manual
```
### Capturar los fondos
Una vez que la autorización se completa correctamente, el [estado](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) del PaymentIntent pasa a `requires_capture`. Para capturar los fondos autorizados, realiza una solicitud de [captura](https://docs.stripe.com/api/payment_intents/capture.md) del PaymentIntent. De forma predeterminada, se captura el importe total autorizado; no puedes capturar más que eso, pero puedes capturar menos.
```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
-u "<>:" \
-d amount_to_capture=750
```
### (Opcional) Cancelar la autorización
Si necesitas cancelar una autorización, puedes [cancelar el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-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 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 envío.
Configura tu integración para escuchar estos eventos en lugar de esperar una devolución de llamada del cliente. Cuando esperas una devolución de llamada del cliente, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada. 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`, también puedes administrar otros dos eventos importantes cuando cobras 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 desde Stripe cuando un cliente ha completado 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.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Se envía desde Stripe cuando el cliente intentó hacer un pago, pero no se efectuó correctamente. | Si un pago pasó de `processing` a `payment_failed`, ofrécele al cliente otro intento de pago. |
## Probar la integración
> No almacenes datos de usuarios reales en cuentas de *entorno de prueba* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) Link. Trátalas como si fueran públicas, ya que estas cuentas de prueba están vinculadas a tu clave publicable.
Actualmente, solo funciona con tarjetas de crédito, tarjetas de débito y cuentas bancarias calificadas de los EE. UU. requiere [registro de dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
Puedes crear cuentas en entornos de prueba para con cualquier dirección de correo electrónico válida. La siguiente tabla muestra los valores fijos de código de acceso de un solo uso que Stripe acepta para autenticar las cuentas en entornos de prueba:
| Valor | Resultado |
| -------------------------------------------------------------------- | ------------------------------------------- |
| Otros seis dígitos diferentes de los mencionados a continuación | Operación correcta |
| 000001 | Error: código inválido |
| 000002 | Error: código vencido |
| 000003 | Error: cantidad máxima de intentos superada |
Para probar métodos de pago específicos, consulta los [ejemplos de prueba del Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources).
### Múltiples fuentes de financiación
Como Stripe agrega soporte adicional para fuentes de financiamiento, no tienes que actualizar tu integración. Stripe las admite automáticamente con el mismo tiempo de liquidación de transacciones y garantías que los pagos con tarjeta y cuentas bancarias.
### Autenticación de tarjetas y 3D Secure
Link admite la autenticación con *3D Secure 2 (3DS2)* (3D Secure 2 (3DS2) removes friction from the authentication process and improves the purchase experience compared to 3D Secure 1. It's the main card authentication method used to meet Strong Customer Authentication (SCA) requirements in Europe and is a key mechanism for businesses to request exemptions to SCA) para pagos con tarjeta. 3DS2 requiere que los clientes completen un paso adicional de verificación con el emisor de la tarjeta cuando realizan un pago. Los pagos que se autenticaron correctamente con 3D Secure están cubiertos por una *transferencia de responsabilidad* (With some 3D Secure transactions, the liability for fraudulent chargebacks (stolen or counterfeit cards) shifts from you to the card issuer).
Para activar los flujos de desafío de autenticación 3DS2 con Link en un entorno de prueba, utiliza la siguiente tarjeta de prueba con cualquier CVC, código postal y fecha de vencimiento futura: 4000000000003220.
En el entorno de prueba, el proceso de autenticación muestra una página de autenticación de prueba. En esa página, puedes autorizar o cancelar el pago. Si autorizas el pago, se simula una autenticación correcta y se te redirige a la URL de retorno especificada. Cuando haces clic en el botón **Error**, se simula un intento de autenticación fallido.
Para obtener más detalles, consulta la [página de autenticación con 3D Secure](https://docs.stripe.com/payments/3d-secure.md).
> Si pruebas los flujos de 3DS, únicamente las tarjetas de prueba para 3DS2 activarán la autenticación en Link.
## Optional: Mostrar los datos guardados en el cliente [Lado del servidor] [Lado del cliente]
Si tu plataforma Connect usa [Cuentas configuradas por clientes](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), usa nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias de `Clientes` y eventos en tu código con las referencias de la API Accounts v2 equivalentes.
Además de mostrar tus propias direcciones y métodos de pago guardados para un cliente, puedes mostrar sus datos guardados en Link.
Si un cliente tiene más de un método de pago guardado, Stripe muestra las tres tarjetas usadas más recientemente guardadas en el objeto *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) además de los métodos de pago que el cliente haya guardado con Link.
Para esto, debes crear una clave efímera y enviarla a tu front-end junto con el ID del *cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). La información que contiene el objeto `customer` es confidencial: no puedes recuperarla directamente desde Stripe.js. La clave efímera otorga acceso temporal a los datos de `customer`.
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-03-25.dahlia" \
-d "customer"="{{CUSTOMER_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer"="{{CUSTOMER_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
Del lado del cliente, recupera `customerOptions` con `clientSecret`.
```jsx
(async () => {
const response = await fetch('/secret');const {clientSecret, customerOptions} = await response.json();
})
```
Luego, especifica los valores `customerOptions.ephemeralKey` y `customerOptions.customer` en la opción `customerOptions` en el [grupo Elements](https://docs.stripe.com/js/elements_object/create). También debes especificar el indicador beta `elements_customers_beta_1` al cargar la instancia de Stripe.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>', {apiVersion: '2026-03-25.dahlia',
betas: ['elements_customers_beta_1'],
});
const appearance = {/* ... */};
const loader = 'auto';
const CheckoutPage =({
clientSecret,customerOptions,
}) => (
);
```
#### HTML + JS
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>', {betas: ['elements_customers_beta_1'],
});
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2) and appearance (optional).
const elements = stripe.elements({
clientSecret,
appearance,
loader,customerOptions,
});
```
## Optional: Guardar métodos de pago de Link [Lado del servidor] [Lado del cliente]
Puedes guardar métodos de pago para futuros *pagos fuera de la sesión* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) o *suscripciones*, pero no para futuros *pagos durante la sesión*. Para ello, debes adjuntarlo a un *Cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea un objeto `customer` cuando tu cliente cree una cuenta en tu empresa. Luego, especifica el `customer` al crear tu PaymentIntent.
Cuando un nuevo cliente tiene su primera transacción con tu empresa, crea un objeto `customer` en Stripe para almacenar sus datos para uso futuro.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d setup_future_usage=off_session
```
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.
Cuando estés listo para volver a cobrarle a tu cliente, usa el `customer` y el ID del *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) resultante para crear un nuevo PaymentIntent. Establece [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) en `true`. Esto provoca que el PaymentIntent envíe un mensaje de error si es necesaria la autenticación cuando el cliente no está usando el sitio web o la aplicación en forma activa.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
## Cuéntales a tus clientes qué es Stripe
Stripe recopila información sobre las interacciones de los clientes con Elements para proporcionarte servicios, mejorarlos y prevenir el fraude. Esto incluye el uso de cookies y direcciones IP para identificar qué Elements vio un cliente durante una sola sesión de finalización de compra. Tienes la responsabilidad de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos para dichos fines. Si deseas obtener más información, visita nuestro [centro de privacidad](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).
## See also
- [Qué es Link](https://docs.stripe.com/payments/link.md)
- [Link con Elements](https://docs.stripe.com/payments/link/elements-link.md)
- [Link en el Payment Element](https://docs.stripe.com/payments/link/payment-element-link.md)
- [Explora el Link Authentication Element](https://docs.stripe.com/payments/link/link-authentication-element.md)
- [Link en diferentes integraciones de pago](https://docs.stripe.com/payments/link/link-payment-integrations.md)