# Crea una página del proceso de compra personalizada que incluya Link
Integra Link mediante el Payment Element o el Contact Details Element.
En esta guía, se explica cómo aceptar pagos con [Link](https://docs.stripe.com/payments/link.md) mediante la [API Payment Intents](https://docs.stripe.com/api/payment_intents.md) y el [Payment Element](https://docs.stripe.com/payments/payment-element.md) o el [Contact Details Element](https://docs.stripe.com/payments/elements/contact-details-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.
- **Contact Details Element:** puedes usar el Contact Details Element para crear un único campo de entrada de correo electrónico tanto para recopilar correos electrónicos como para autenticar con Link. Te recomendamos que lo hagas si usas el [Address Element](https://docs.stripe.com/elements/address-element.md).
Recopila una dirección de correo electrónico del cliente para la autenticación o la inscripción en 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'
```
## 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 Contact Details 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 compra para agilizar el proceso de compra
Link proporciona una solicitud 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:
Integrate Link using the Payment 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 Contact Details 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.
#### Usa el Contact Details 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 Contact Details Element, el Payment Element y, de forma opcional, el Address Element.
Una página de confirmación de compra habilitada para Link tiene Contact Details Element al principio, seguido de Address Element y Payment Element al final. También puedes mostrar Contact Details Element en páginas diferentes, en este 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:
A diagram describing how to integrate Link using the Contact Details 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");
```
#### Usa el Contact Details Element
El Contact Details Element muestra un campo destinado a la dirección de correo electrónico. Cuando Link asocia el correo electrónico de un cliente con una cuenta existente de Link, le envía al cliente un código seguro de un solo uso a su teléfono con el fin de autenticar. Si el cliente se autentica de forma correcta, Stripe muestra automáticamente sus direcciones y métodos de pago guardados en Link para que los use.
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 pásale 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 de tu formulario, reemplaza tu campo de entrada actual con el `ContactDetailsElement`.
Si no recopilas correos electrónicos, agrega el `ContactDetailsElement` a tu flujo de compra. Debes colocar el `ContactDetailsElement` antes del `ShippingAddressElement` (opcional si recopilas direcciones de envío) y del `PaymentElement` para que Link complete automáticamente la información guardada de Link para tu cliente en el `ShippingAddressElement` y en el `PaymentElement`. También puedes pasar la [opción de aspecto](https://docs.stripe.com/elements/appearance-api.md) para personalizar los Elements y 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 `ContactDetailsElement`. Esto completa automáticamente 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`. 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, muestra los componentes `ContactDetailsElement` y `PaymentElement` en tu formulario de pago:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
ContactDetailsElement,
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 `ContactDetailsElement`, el `PaymentElement` y el `ShippingAddressElement` no tienen que estar en la misma página. Si tienes un proceso en el que la información de contacto del cliente, los detalles de envío y los detalles de pago se le muestran al cliente en pasos diferentes, puedes mostrar cada Element en el paso o página correspondiente. Incluye el `ContactDetailsElement` como el formulario de entrada del 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 completar automáticamente el envío y el pago provista por Link.
Si recopilas el correo electrónico de tu cliente con el Contact Details 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 la información de la dirección de correo electrónico con la propiedad `onChange` en el componente `ContactDetailsElement`. El controlador `onChange` se activa cada vez que el usuario actualiza el campo de correo electrónico, o cuando se completa automáticamente el correo electrónico guardado de un cliente.
```jsx
{
setEmail(event.value.email);
}} />
```
### Autocompletar una dirección de correo electrónico de un cliente
El Contact Details 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 Link en cuanto el cliente llega a la página de pago mediante 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 pasa 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 tu entrada actual por `contactDetailsElement`.
Si no recopilas el correo electrónico, agrega `contactDetailsElement` a tu flujo de compra antes de `shippingAddress` (opcional si recopilas direcciones de envío). Agrega `PaymentElement` para que Link complete de manera automática la información guardada en Link de tu cliente en `shippingAddress` y `PaymentElement`. También puedes pasar el [objeto de aspecto](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) para personalizar los Elements de modo 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 `contactDetailsElement`. Esto completa automáticamente su 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` de `PaymentElement`. Completar automáticamente la mayor cantidad de información 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 = { /* ... */ };
// 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 contactDetailsElement = elements.create("contactDetails");
// 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
contactDetailsElement.mount("#contact-details-element");
paymentElement.mount("#payment-element");
```
`contactDetailsElement` 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.
Los Elements Contact Details, Payment y Shipping Address no tienen que estar en la misma página. Si tienes un proceso en el que la información de contacto, la información de envío y los detalles de pago del cliente se muestran en pasos diferentes durante la confirmación de compra, puedes mostrar cada Element en el paso o la página correspondiente. Incluye el Contact Details Element 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 la función de completar automáticamente que Link ofrece.
Si recopilas el correo electrónico de tu cliente con el Contact Details 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 la dirección de correo electrónico
Puedes recuperar la información de la dirección de correo electrónico con la propiedad `onChange` en el componente `contactDetailsElement`. El controlador `onChange` se activa cada vez que el usuario actualiza el campo de correo electrónico, o cuando se completa automáticamente el correo electrónico guardado de un cliente.
```javascript
contactDetailsElement.on('change', (event) => {
const email = event.value.email;
});
```
### Autocompletar una dirección de correo electrónico de un cliente
El Contact Details 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 llega a la página de pago mediante la opción `defaultValues`.
```javascript
// Create contactDetails element with the defaultValues option
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
contactDetailsElement.mount("#contact-details-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 de tu cliente para simplificar el proceso de creación de cuenta en 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()};
});
```
#### Pasa un correo electrónico al Contact Details Element
Si usas el Contact Details Element, agrega el objeto `defaultValues.billingDetails` al Payment Element para completar con anticipación el nombre y el número de teléfono de un cliente, así como sus direcciones de envío. Si se completa con anticipación la mayor cantidad de información posible de tu cliente, simplificas la creación y la reutilización de 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 mediante el Contact Details Element, el Address Element y el Payment Element en los pasos de [Usa el Contact Details Element](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).
#### Usa el Contact Details Element
#### React
Con el fin de recopilar direcciones, crea un nodo DOM vacío para que se represente el [Address Element](https://docs.stripe.com/elements/address-element.md) las renderice. El Address Element debe mostrarse después del Contact Details Element con el objetivo de que Link complete con anterioridad los datos de la dirección guardada del cliente:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
ContactDetailsElement,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
El [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 el Address Element. Muéstralo después del Contact Details 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 contactDetailsElement = elements.create("contactDetails");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-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]
Además de mostrar tus propias direcciones y métodos de pago guardados para un cliente, puedes mostrar sus datos guardados en Link.
> #### Usa la API Accounts v2 para representar a los clientes
>
> La API Accounts v2 suele estar disponible para usuarios Connect y en versión preliminar pública para otros usuarios de Stripe. Si eres parte de la versión preliminar Accounts v2, debes especificar una [versión preliminar](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
>
> Para solicitar el acceso a la versión preliminar Accounts v2,
>
> Para la mayoría de los casos de uso, te recomendamos que[modeles a tus clientes como objetos Account configurados por el cliente](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) en lugar de usar objetos [Customer](https://docs.stripe.com/api/customers.md).
Si un cliente tiene más de un método de pago guardado, Stripe muestra sus tres tarjetas guardadas más recientes, además de los métodos de pago que haya guardado con Link.
Para ello, crea una clave efímera y envíala a tu front-end junto con el ID `Account` (para los clientes representados como objetos `Account` configurados por el cliente) o el ID `Customer` (para los clientes representados como objetos `Customer`). Dado que la información sobre el cliente es confidencial, no puedes recuperarla directamente en Stripe.js, pero una clave efímera otorga acceso temporal a estos datos.
#### Accounts v2
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-04-22.dahlia" \
-d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
#### Customers v1
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-04-22.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-04-22.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: Save Link payment methods [Lado del servidor] [Lado del cliente]
Puedes guardar Link 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* (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 durante la 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, debes adjuntarlo a un cliente representado como un objeto `Account` configurado por el cliente o como un objeto `Customer`.
> #### Usa la API Accounts v2 para representar a los clientes
>
> La API Accounts v2 suele estar disponible para usuarios Connect y en versión preliminar pública para otros usuarios de Stripe. Si eres parte de la versión preliminar Accounts v2, debes especificar una [versión preliminar](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
>
> Para solicitar el acceso a la versión preliminar Accounts v2,
>
> Para la mayoría de los casos de uso, te recomendamos que[modeles a tus clientes como objetos Account configurados por el cliente](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) en lugar de usar objetos [Customer](https://docs.stripe.com/api/customers.md).
#### Accounts v2
Cuando tu cliente cree una cuenta o realice su primera transacción con tu empresa, crea un objeto `Account` configurado por el cliente para almacenar sus datos y usarlos en el futuro. Luego, especifica el ID `customer_account` cuando crees tu `PaymentIntent`.
```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 setup_future_usage=off_session
```
Cuando tengas todo listo para volver a aceptar pagos de tu cliente, usa el ID `customer_account` y el ID *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) resultante para crear un nuevo `PaymentIntent`.
#### Customers v1
Cuando tu cliente cree una cuenta o realice su primera transacción con tu empresa, crea un objeto `Customer` para almacenar sus datos y usarlos en el futuro. Luego, especifica el ID `customer` cuando crees tu `PaymentIntent`.
```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
```
Cuando tengas todo listo para volver a aceptar pagos de tu cliente, usa el ID `customer` y el ID *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 `PaymentIntent` envíe un error si se requiere autenticación cuando tu cliente no está usando de forma activa 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
```
## 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 Contact Details Element](https://docs.stripe.com/payments/link/contact-details-element.md)
- [Link en diferentes integraciones de pago](https://docs.stripe.com/payments/link/link-payment-integrations.md)