Crea una página del proceso de compra personalizada que incluya Link

Primero, crea una cuenta de Stripe o inicia sesión.

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Stripe usa un objeto PaymentIntent 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 tarjetas para usarlos en el futuro con Setup Intents, enumera los 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 la integración para pasar de link a payment_method_types.

Cuando creas un PaymentIntent, ofrece a tus clientes de forma dinámica los métodos de pago más pertinentes, incluido Link, mediante el uso de métodos de pago dinámicos. Para usar métodos de pago dinámicos, no incluyas el parámetro payment_method_types. Si lo deseas, también puedes habilitar automatic_payment_methods.

Para agregar Link a tu integración de Elements usando métodos de pago dinámicos, haz lo siguiente:

1. En la configuración del método de pago de tu Dashboard, activa Link.
2. Si tienes una integración existente que enumera manualmente los métodos de pago, elimina el parámetro payment_method_types de tu integración.

Recuperar el secreto de cliente

El PaymentIntent incluye un secreto de cliente que el lado del cliente usa para completar el proceso de pago de forma segura. Puedes usar diferentes métodos para pasar el secreto del cliente al lado del cliente.

get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

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

Link autentica a un cliente utilizando su dirección de correo electrónico. Según tu flujo de compra, tienes las siguientes opciones: enviar un correo electrónico al Payment Element, recopilarlo directamente en el Payment Element o usar el Link Authentication Element. De estas opciones, Stripe recomienda pasar una dirección de correo electrónico del cliente al Payment Element si está disponible.

Pasa un correo electrónico

Recopila un correo electrónico

Utilizar el Link Authentication Element

Si alguno de los siguientes puntos se aplica a tu caso:

• Quieres un componente único y optimizado para la recopilación de correos electrónicos y la autenticación de Link.
• Debes recopilar una dirección de envío de tu cliente.

A continuación, utiliza el flujo de integración que implementa estos elementos: el Link Authentication Element, el Payment Element y el Address Element opcional.

Una página de pago habilitada por Link tiene el Link Authentication Element al principio, seguido del Address Element y el Payment Element al final. También puedes mostrar el Link Authentication Element en páginas separadas, en este mismo orden, para flujos de pago de varias páginas.

Crea un formulario de pago usando varios Elements

La integración funciona de la siguiente manera:

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 cuando estés listo para aceptar pagos reales.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

<linkAuthenticationElement onChange={(event) => {
  setEmail(event.value.email);
}} />

<linkAuthenticationElement options={{defaultValues: {email: 'foo@bar.com'}}}/>

Usa stripe.confirmPayment para completar el pago con los datos recopilados de tu cliente en los diferentes formularios de Elements. Proporciona un 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 para cambiar el comportamiento.

import {loadStripe} from "@stripe/stripe-js";
import {
  useStripe,
  useElements,
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
  // If collecting shipping
  AddressElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

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 (
    <form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}

La return_url corresponde a una página en tu sitio web que proporciona el estado del pago 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.

Stripe envía un evento payment_intent.succeeded cuando se completa el pago. Usa un webhook para recibir estos eventos 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 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:

En este momento, Link solo funciona con tarjetas de crédito, tarjetas de débito y compras que califican de cuentas bancarias de EE. UU. Link exige el registro del dominio.

Puedes crear cuentas en entornos de prueba para Link usando cualquier dirección de correo electrónico válida. En la siguiente tabla se muestran los valores fijos de código de acceso de único que Stripe acepta para autenticar las cuentas de entornos de prueba:

Para probar métodos de pago específicos, consulta los ejemplos de prueba del Payment Element.

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) para pagos con tarjeta. 3DS2 requiere que los clientes completen otro paso más de verificación ante el emisor de la tarjeta al pagar. Los pagos que pasan la autenticación con 3D Secure están cubiertos por una transferencia de responsabilidad.

Para activar flujos de comprobación de autenticación con interacción del cliente 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.