# 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 utiliza [Cuentas configuradas por el cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utiliza nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias del `cliente` y de los eventos en tu código por las referencias equivalentes de la API Accounts v2.
Esta guía te muestra cómo aceptar pagos con [Link ](https://docs.stripe.com/payments/link.md)utilizando la [API de Payment Intents](https://docs.stripe.com/api/payment_intents.md) y el [Payment Element](https://docs.stripe.com/payments/payment-element.md) o el Authentication Element de [Link.](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 y la inscripción de :
- **Especifica una dirección de correo electrónico:** puedes enviar una dirección de correo electrónico al Payment Element usando [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues). Si ya recolectas la dirección de correo electrónico o el número de teléfono del cliente en el flujo del proceso de compra, te recomendamos este enfoque.
- **Recolecta una dirección de correo electrónico:** puedes recolectar una dirección de correo electrónico directamente en el Payment Element. Si no recolectas la dirección de correo electrónico en ninguna parte del flujo del proceso de compra, te recomendamos este enfoque.
- \**Link Authentication Element: **Puedes usar el Link Authentication Element para crear un único campo de entrada de correo electrónico que sirva tanto para recopilar el correo como para la autenticación de Link. Recomendamos hacerlo si utilizas el [Address Element](https://docs.stripe.com/elements/address-element.md).
Cobrar una dirección de correo electrónico del cliente para la autenticación o registro de Link
## 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'
```
## Crea un PaymentIntent [Lado del servidor]
Stripe utiliza un objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) para representar tu intención de cobrarle un pago a un cliente y hace un seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso.
Si recopilas datos de la tarjeta para[futuro consumo con Setup Intents](https://docs.stripe.com/payments/save-and-reuse.md), enumera métodos de pagos manualmente en lugar de usar métodos de pagos dinámicos. Para usar sin métodos de pagos dinámicos, actualiza tu integración para que pase `enlace` a`pago_method_types`.
Cuando creas una PaymentIntent,[ ofrecer dinámicamente a tus clientes los métodos de pagos más relevantes](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), incluyendo , usando métodos de pagos dinámicos. Para usar métodos de pagos dinámicos, no incluyas el`payment_method_types`. Opcionalmente, 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 los monederos.
Para añadir Link a tu integración de Elements usando métodos de pagos dinámicos:
1. En la [configuración de métodos de pagos](https://dashboard.stripe.com/settings/payment_methods) de tu 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.
### Recupera el secreto del 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 utiliza 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 en tu servidor, utilizando la función `fetch` del navegador. Este enfoque es mejor si tu lado del cliente es una aplicación de una sola página, en particular una construida con un marco de front-end moderno como React. Crea el punto de conexión del servidor que se utiliza para el secreto de cliente:
#### Ruby
```ruby
get '/secret' do
intent = # ... Create or retrieve the PaymentIntent
{client_secret: intent.client_secret}.to_json
end
```
Y luego busca el secreto del 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
Envía el secreto del cliente al cliente desde tu servidor. Este enfoque funciona mejor si tu aplicación genera contenido estático en el servidor antes de enviarlo al navegador.
Añade el [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) en tu formulario de proceso de compra. En el código del lado del 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 del cliente
Link autentica a un cliente utilizando su dirección de correo electrónico. Dependiendo de tu proceso de pago, dispones de las siguientes opciones: pasar la dirección de correo electrónico al Payment Element, recopilarla directamente en el Payment Element o utilizar el Link Authentication Element. De entre ellas, Stripe recomienda pasar la dirección de correo electrónico del cliente al Payment Element, si está disponible.
#### Envía un correo electrónico
Si *alguno* de los siguientes puntos se te aplica:
- Conoces la dirección de correo electrónico de tu cliente antes de que llegue a la página de pago (desde el perfil de un cliente, por ejemplo).
- No es necesario que recojas una dirección de envío de tu cliente.
- Prefieres usar tu propio campo de entrada de correo electrónico, que colocas antes del formulario de pago.
A continuación, integra Link pasando el correo electrónico del cliente al Payment Element, lo que agiliza el proceso de pago al activar el flujo de autenticación de Link en cuanto el cliente llega al paso del pago. Esta opción integra un único elemento: el Payment Element.
Link rellena automáticamente el correo electrónico registrado en el formulario de pago para agilizar el proceso de compra
Link proporciona un mensaje de autenticación para un cliente existente
En este flujo, se recoge la dirección de correo electrónico en un campo del formulario propio *antes* de que el cliente llegue al paso de pago y, a continuación, se pasa la dirección de correo electrónico al Payment Element. El Payment Element autentica al cliente en el paso de pago y muestra los datos de pago del cliente guardados en su cuenta de Link, o bien muestra el formulario de creación de cuenta de Link tras introducir los datos de la tarjeta. Este es el aspecto que tiene:
Integrar 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 utilizando Link Authentication Element, Address Element y Payment Element.
#### Recolectar un correo electrónico
La autenticación de Link en el Payment Element permite a tus clientes introducir una dirección de correo electrónico directamente en dicho elemento sin necesidad de realizar ninguna integración adicional.
En este proceso, el cliente introduce su dirección de correo electrónico y se autentifica o se registra en Link directamente en el Payment Element durante el proceso de compra. Si un cliente no se ha registrado en Link y elige un método de pago compatible en el Payment Element, se le pedirá que guarde sus datos utilizando Link. Para aquellos que ya se hayan registrado, Link rellena automáticamente su información de pago.
#### Utiliza el Link Authentication Element
Si *alguno* de los siguientes puntos se te aplica:
- Quieres un componente único y optimizado para la recopilación de correos electrónicos y la autenticación de Link.
- Debes recolectar una dirección de envío de tu cliente.
A continuación, utiliza el flujo de integración que incorpora estos elementos: Link Authentication Element, Payment Element y Address Element opcional.
Una página del proceso de compra habilitada para Link incluye el Link Authentication Element al principio, seguido del Address Element y, al final, el Payment Element. También puedes mostrar el Link Authentication Element en páginas independientes, siguiendo este mismo orden, para flujos del proceso de compra de varias páginas.
Crea un formulario de pago usando múltiples Elements
La integración funciona de la siguiente manera:
Un diagrama que describe cómo integrar Link utilizando 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 prediseñados de la interfaz de usuario de Elements. La dirección de tu página de pago debe empezar por `https://` en lugar de por `http://` para que tu integración funcione. Puedes probar tu integración sin usar HTTPS. [Habilita HTTPS](https://docs.stripe.com/security/guide.md#tls) cuando esté todo listo para aceptar pagos reales.
#### Envía un correo electrónico
El Payment Element presenta un formulario de contacto con el cliente rellenado previamente que incluye el número de teléfono y la dirección de correo electrónico. También presenta un formulario dinámico que le permite a tu cliente elegir un tipo de método de pago. Este formulario recolecta automáticamente todos los datos de pago necesarios para el tipo de método de pago elegido por el cliente.
Además, el Payment Element gestiona la visualización de los métodos de pago guardados en Link para los clientes autenticados.
#### React
### Configura 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 npm:
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### Crear el formulario de pago
En tu página de pago, ajusta tu formulario de pago con el componente `Elements`, especificando el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Si dispones de más datos del cliente, pásalos al objeto `defaultValues.billingDetails` del `PaymentElement`. Rellenar previamente toda la información posible simplifica la creación de cuentas en Link y facilita su reutilización por parte de tus clientes. También puedes pasar el [objeto de apariencia](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) para personalizar los Elements y adaptarlos al diseño de tu sitio.
Luego, renderiza el `PaymentElement` en tu formulario de pago. Te recomendamos que introduzcas 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 rellenar 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
### Configura Stripe Elements
Incluye la secuencia de comandos de Stripe.js en tu página de pago añadiéndolo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas la secuencia de comandos en un paquete ni alojes una copia tú mismo.
```html
Checkout
```
Crea una instancia del [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) proporcionando 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('<>');
```
### Añade 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:
```html
```
Cuando se cargue el formulario que acabas de configurar, crea un nuevo grupo de Elements especificando el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). También puedes enviar el [objeto Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), personalizando 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` del `PaymentElement`. Rellenar previamente tanta información como sea posible simplifica la creación y reutilización de la cuenta de 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 = { /* ... */ };
// 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");
```
#### Recolectar un correo electrónico
El Payment Element presenta un formulario de contacto con el cliente rellenado previamente que incluye el número de teléfono y la dirección de correo electrónico. También presenta un formulario dinámico que le permite a tu cliente elegir un tipo de método de pago. Este formulario recolecta automáticamente todos los datos de pago necesarios para el tipo de método de pago elegido por el cliente.
Además, el Payment Element gestiona la visualización de los métodos de pago guardados en Link para los clientes autenticados. Para esta integración, debes dejar Link activado en la [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods).
#### React
### Configura 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 npm:
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### Crear el formulario de pago
En tu página de pago, ajusta tu formulario de pago con el componente `Elements`, especificando el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Si dispones de más datos del cliente, pásalos al objeto `defaultValues.billingDetails` del `PaymentElement`. Rellenar previamente toda la información posible simplifica la creación de cuentas en Link y facilita su reutilización por parte de tus clientes. También puedes pasar el [objeto de apariencia](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) para personalizar los Elements y adaptarlos al diseño de tu sitio.
Luego, renderiza el `PaymentElement` en tu formulario de pago. Te recomendamos que introduzcas 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 rellenar 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
### Configura Stripe Elements
Incluye la secuencia de comandos de Stripe.js en tu página de pago añadiéndolo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas la secuencia de comandos en un paquete ni alojes una copia tú mismo.
```html
Checkout
```
Crea una instancia del [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) proporcionando 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('<>');
```
### Añade 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:
```html
```
Cuando se cargue el formulario que acabas de configurar, crea un nuevo grupo de Elements especificando el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). También puedes enviar el [objeto Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), personalizando 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` del `PaymentElement`. Rellenar previamente tanta información como sea posible simplifica la creación y reutilización de la cuenta de 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 = { /* ... */ };
// 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");
```
#### Utiliza el Link Authentication Element
El Link Authentication Element muestra un campo de entrada de correo electrónico. Cuando Link encuentra una coincidencia entre el correo del cliente y una cuenta existente de Link, envía al cliente un código seguro de un solo uso a su teléfono para autenticarse. Si el cliente se autentica correctamente, Stripe muestra automáticamente sus direcciones y métodos de pago guardados en Link para que pueda utilizarlos.
Esta integración también crea el Payment Element, que renderiza un formulario dinámico que permite a tu cliente elegir un tipo de método de pago. El formulario recopila automáticamente todos los datos necesarios del pago según el método de pago seleccionado por el cliente. El Payment Element también gestiona la visualización de los métodos de pago guardados en Link para los clientes autenticados.
#### React
### Configura 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 npm.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
En tu página de pago, ajusta tu formulario de pago con el componente `Elements` y especifica 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 recolectas el correo electrónico del cliente en otra parte de tu formulario, reemplaza la entrada existente por el `linkAuthenticationElement`.
Si no recopilas el correo electrónico, añade el `linkAuthenticationElement` a tu flujo de pago. Debes colocar el `linkAuthenticationElement` antes del `ShippingAddressElement` (opcional si recopilas direcciones de envío) y del `PaymentElement` para que Link pueda autocompletar los datos guardados en Link de tu cliente en el `ShippingAddressElement` y el `PaymentElement`. También puedes pasar la [opción appearance](https://docs.stripe.com/elements/appearance-api.md), personalizando 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` del `linkAuthenticationElement`. Esto rellena previamente su 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`. Rellenar previamente tanta información como sea posible simplifica la creación y reutilización de la cuenta de Link para tus clientes.
A continuación, especifica 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 (
);
}
```
El `linkAuthenticationElement`, el `PaymentElement` y el `ShippingAddressElement` no necesitan estar en la misma página. Si tienes un proceso en el que la información de contacto, los datos de envío y los datos de pago se muestran al cliente en pasos separados, puedes mostrar cada Element en el paso o página correspondiente. Incluye el `linkAuthenticationElement` como 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 el autocompletado de envío y pago proporcionado por Link.
Si recopilas el correo electrónico de tu cliente con el Link Authentication Element al principio del flujo de pago, no necesitas mostrarlo de nuevo en las páginas de envío o de pago.
### Recuperar una dirección de correo electrónico
Puedes recuperar los datos de la dirección de correo electrónico utilizando la propiedad `onChange` en el componente `linkAuthenticationElement`. El controlador `onChange` se activa cada vez que el usuario actualiza el campo de correo electrónico o cuando se rellena automáticamente un correo electrónico de cliente guardado.
```jsx
{
setEmail(event.value.email);
}} />
```
### Rellena automáticamente la dirección de correo electrónico de un cliente
El Link Authentication Element acepta una dirección de correo electrónico. Proporcionar el correo electrónico del cliente activa el flujo de autenticación de Link en cuanto el cliente llega a la página de pago utilizando la opción `defaultValues`.
```jsx
```
#### HTML + JS
### Configura Stripe Elements
Incluye la secuencia de comandos de Stripe.js en tu página de pago añadiéndolo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas la secuencia de comandos en un paquete ni alojes una copia tú mismo.
```html
Checkout
```
Crea una instancia del [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) proporcionando 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('<>');
```
### Añade 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:
```html
```
Cuando se cargue el formulario que acabas de configurar, crea un nuevo grupo de Elements, pasando el[ cliente secreto](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Si ya has recibido el correo electrónico del cliente en tu formulario de pago, sustituye tu entrada actual por`linkAuthenticationElement`.
Si no recopilas direcciones de correo electrónico, añade `linkAuthenticationElement` a tu proceso de compra antes de `shippingAddress` (opcional si recopilas direcciones de envío). Añade `PaymentElement` para Link para rellenar automáticamente los datos guardados de Link de tu cliente en `shippingAddress` y `PaymentElement`. También puedes pasar el [objeto Appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance), personalizando los elementos para que coincidan con el diseño de tu sitio web.
Si tienes el correo electrónico del cliente, pásalo a la opción `defaultValues` de `linkAuthenticationElement`. Esto rellena automáticamente su correo electrónico e inicia el proceso de autenticación de Link. Si dispones de otra información del cliente, pásala al objeto `defaultValues.billingDetails` de `PaymentElement`. Rellenar previamente toda la información posible simplifica la creación de cuentas en Link y su reutilización 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 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 que seleccione el cliente. El `PaymentElement` también gestiona la visualización de métodos de pago guardados en Link para los clientes que han realizado la autenticación.
No es necesario que los Elements Link Authentication, Payment y Shipping Address estén en la misma página. Si tienes un proceso en el que los datos de contacto del cliente, los datos 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 Link Authentication como formulario de entrada de correo electrónico en el paso de recopilación de información de contacto para garantizar que el cliente pueda aprovechar al máximo que Link le rellene los datos.
Si recopilas el correo electrónico de tu cliente con el Link Authentication Element al principio del proceso de pago, no es necesario que lo muestres de nuevo 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 la propiedad `onChange` en el componente `linkAuthenticationElement`. El controlador `onChange` se activa cada vez que el usuario actualiza el campo de correo electrónico o cuando se rellena automáticamente un correo electrónico de cliente guardado.
```javascript
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
});
```
### Rellena automáticamente la dirección de correo electrónico de un cliente
El Link Authentication Element 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 Link en cuanto el cliente llegue a la página de pago utilizando 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: Rellena automáticamente los datos adicionales del cliente [Lado del cliente]
Si lo tienes, el rellenado automático de la información del cliente agiliza aún más el proceso de compra y reduce la introducción manual de datos.
#### Envía un correo electrónico
Payment Element admite un objeto `defaultValues.billingDetails` que permite rellenar automáticamente el nombre y el número de teléfono del cliente, así como su dirección de correo electrónico y la dirección de envío. Al rellenar automáticamente la mayor cantidad posible de datos del cliente, se simplifica la creación y la reutilización de la cuenta de Link.
Rellena previamente la dirección de correo electrónico, el número de teléfono y el nombre de tu cliente para simplificar el proceso de creación de cuentas en Link.
Puedes proporcionar los siguientes valores al objeto `defaultValues.billingDetails`:
| Valor | Obligatorio | Formato |
| --------- | ----------- | -------------------------------------------------------------------------------------- |
| `email` | Obligatorio | cadena |
| `name` | Opcional | cadena |
| `phone` | Opcional | cadena |
| `address` | Opcional | El objeto JSON con los campos `postal_code` y `country`. Todos los campos son cadenas. |
Establecer `defaultValues.billingDetails` en el Payment Element depende de si recolectas la información en una página separada antes del Payment Element o en la misma página.
#### Antes del Payment Element
Si recolectas información en una página separada antes del Payment Element, puedes completar automáticamente los valores especificando `defaultValues.billingDetails` cuando crees 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");
```
#### Misma página que el Payment Element
Si recolectas 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 utilizando el Link Authentication Element, añade el objeto `defaultValues.billingDetails` al Payment Element para rellenar previamente el nombre, el número de teléfono y las direcciones de envío del cliente. Al rellenar previamente tanta información del cliente como sea posible, simplificas la creación y reutilización de la cuenta de Link.
Rellena previamente la dirección de correo electrónico, el número de teléfono y el nombre de tu cliente para simplificar el proceso de registro en Link.
Puedes proporcionar los siguientes valores al objeto `defaultValues.billingDetails`:
| Valor | Obligatorio | Formato |
| --------- | ----------- | -------------------------------------------------------------------------------------- |
| `name` | Opcional | cadena |
| `phone` | Opcional | cadena |
| `address` | Opcional | El objeto JSON con los campos `postal_code` y `country`. Todos los campos son cadenas. |
Un Payment Element con todos los valores completados previamente tiene un aspecto similar a los siguientes ejemplos:
#### React
```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: Recopila direcciones de envío [Lado del cliente]
#### Envía 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 utilizando Link Authentication Element, Address Element y Payment Element en los pasos [Utilizar el Autenticación Element Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).
#### Utiliza el Link Authentication Element
#### React
Para recopilar direcciones, crea un nodo DOM vacío donde se renderizará el [Address Element](https://docs.stripe.com/elements/address-element.md). El Address Element debe mostrarse después del Authentication Element de Link para que Link pueda autocompletar los datos de dirección guardados del 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 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` pasa de forma automática 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 Element Address o después de elegir las direcciones guardadas:
```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 rellenar los datos de la dirección y acelerar el proceso de compra de tus clientes.
```jsx
```
#### HTML + JS
El [Address Element](https://docs.stripe.com/elements/address-element.md) te permite cobrar direcciones de envío o billing. Crea un nodo DOM vacío para el Address Element. Muéstralo después del 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 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 Element Address pasa 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 Element Address, o después de elegir 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 rellenar los datos de la dirección y acelerar el proceso de compra de 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: Personaliza el diseño [Lado del cliente]
Después de añadir estos Elements a tu página, puedes personalizar su [apariencia](https://docs.stripe.com/elements/appearance-api.md#theme) para que encajen con el resto de tu diseño:
Personaliza el diseño de tus Elements
## Envía el pago a Stripe [Lado del cliente]
Usa [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) para efectivizar el pago con los datos recolectados de tu cliente en los diferentes formularios de Elements. Proporciona una [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a esta función para indicar a dónde Stripe redirige al usuario después de efectivizar el pago.
Es posible que primero se redirija al usuario a un sitio intermedio, como una página de autorización bancaria, antes de que Stripe lo redirija al `return_url`.
De forma predeterminada, los pagos con tarjeta o bancarios redireccionan inmediatamente al `return_url` cuando un pago se efectúa correctamente. Si no quieres redirigir al `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 renderizas la página de retorno. Cuando Stripe redirecciona 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 todo 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 y la captura [Lado del servidor]
Link es [compatible 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 en un plazo de 7 días desde 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 solamente
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 realiza 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 petición 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 de ese importe, pero sí menos.
```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
-u "<>:" \
-d amount_to_capture=750
```
### (Opcional) Cancela la autorización
Si necesitas cancelar una autorización, puedes [cancelar el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment).
## Gestionar 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 efectiviza el pago. [Usa un webhook para recibir estos eventos](https://docs.stripe.com/webhooks/quickstart.md) y ejecutar acciones, como enviar a tu cliente un correo electrónico de confirmación del pedido, registrar la venta en una base de datos o iniciar el flujo de trabajo de envíos.
Configura tu integración para recibir notificaciones de 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 recibir notificaciones de 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 gestionar el evento `payment_intent.succeeded`, también puedes gestionar 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 efectivizado un pago correctamente. | 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 ha intentado hacer el pago, pero no se ha hecho efectivo. | Si un pago ha pasado de `processing` a `payment_failed`, ofrece al cliente otro intento de pago. |
## Prueba la integración
> No almacenes datos reales de usuarios en las cuentas *sandbox* (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 de dominio público, ya que estas cuentas de prueba están asociadas a tu clave de publicación.
Actualmente, Link solo funciona con tarjetas de crédito, tarjetas de débito y compras elegibles realizadas con cuentas bancarias de EE. UU. Link requiere el [registro de dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
Puedes crear cuentas de prueba (sandbox) para Link utilizando cualquier dirección de correo electrónico válida. La siguiente tabla muestra los valores fijos de códigos de verificación de un solo uso que Stripe acepta para autenticar cuentas de prueba.
| Valor | Resultado |
| ---------------------------------------------- | -------------------------------------------------- |
| Otros 6 dígitos que no aparezca a continuación | Completado correctamente |
| 000001 | Error, el código no es válido |
| 000002 | Error, el código ha caducado |
| 000003 | Error, se ha superado el número máximo de intentos |
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).
### Varias fuentes de financiación
A medida que Stripe añade compatibilidad para fuentes de financiamiento adicional, no necesitas actualizar la integración. Stripe las acepta automáticamente con el mismo tiempo de liquidación de transacciones y garantías que los pagos con tarjeta y cuenta bancaria.
### Autenticación de tarjetas y 3D Secure
Link admite la autenticación *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 han sido autenticados correctamente mediante 3D Secure están cubiertos por un *traslado 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 pruebas, utiliza la siguiente tarjeta de prueba con cualquier CVC, código postal y una fecha de caducidad futura: 4000000000003220.
En un entorno de prueba, el proceso de autenticación muestra una página de autenticación ficticia. En esa página, puedes autorizar o cancelar la del pago. Al autorizar la del pago, se simula una autenticación correcta y se te redirige a la URL de retorno especificada. Si haces clic en el botón **Error**, se simula un intento de autenticación fallido.
Para obtener más información, consulta la [página de Autenticación mediante 3D Secure](https://docs.stripe.com/payments/3d-secure.md).
> Al probar los flujos de 3DS, solo las tarjetas de prueba para 3DS2 activarán la autenticación en Link.
## Optional: Mostrar los datos guardados por el cliente [Lado del servidor] [Lado del cliente]
Si tu plataforma Connect utiliza [Cuentas configuradas por el cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utiliza nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias del `cliente` y de los eventos en tu código por las referencias equivalentes de la API Accounts v2.
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 que se han usado más recientemente guardadas en el objeto *Cliente* además de los métodos de pago que el cliente haya guardado con Link.
Para ello, crea una clave efímera y envíala 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 en Stripe.js. La clave efímera concede 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"
```
En el lado del cliente, obtén las `customerOptions` con `clientSecret`.
```jsx
(async () => {
const response = await fetch('/secret');const {clientSecret, customerOptions} = await response.json();
})
```
A continuación, especifica los valores `customerOptions.ephemeralKey` y `customerOptions.customer` para la opción `customerOptions` del [grupo Elements](https://docs.stripe.com/js/elements_object/create). También debes especificar el indicador `elements_customers_beta_1` de la versión beta 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: Guarda los métodos de pago de Link [Lado del servidor] [Lado del cliente]
Puedes guardar los métodos de pago de Link para futuros *pagos fuera de 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* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis), pero no para futuros *pagos dentro de sesión* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Para ello, debe asociarlo 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). Cree un objeto `Customer` cuando su cliente cree una cuenta en su empresa. A continuación, especifique el `cliente` al crear su PaymentIntent.
Cuando un nuevo cliente tenga su primera transacción con tu empresa, crea un objeto `customer` en Stripe para almacenar sus datos para usarlos en el 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 sus funciones de forma predeterminada.
Cuando lo tengas todo 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 hace que el PaymentIntent envíe un error si se requiere autenticación cuando tu cliente no está utilizando activamente tu sitio o aplicación.
#### 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
```
## Comunica a tus clientes qué es Stripe
Stripe recoge información sobre las interacciones de los clientes con Elements para brindarte servicios, prevenir el fraude y mejorar sus servicios. Entre los datos recogidos, se incluyen el uso de cookies y direcciones IP para identificar qué Elements ha visto un cliente durante una sola sesión del proceso de compra. Tú eres responsable de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos de estas maneras. Para 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 ](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 Authentication Element de Link](https://docs.stripe.com/payments/link/link-authentication-element.md)
- [ en diferentes integraciones de pagos](https://docs.stripe.com/payments/link/link-payment-integrations.md)