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 utiliza un objeto PaymentIntent 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 usarla en el futuro con Setup Intents, enumera los métodos de pago manualmente en lugar de usar métodos de pago dinámicos. Para utilizar Link sin métodos de pago dinámicos, actualiza tu integración para pasar link a payment_method_types.

Al crear un PaymentIntent, ofrece a tus clientes de forma dinámica los métodos de pago más relevantes, 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. Opcionalmente, también puede habilitar automatic_payment_methods.

Para añadir Link a tu integración de Elements usando métodos de pago dinámicos:

1. Activa Link en la configuración del método de pago del Dashboard.
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.

Recupera el secreto del cliente

El PaymentIntent incluye un secreto de cliente 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.

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 del proceso de compra, tienes las siguientes opciones: enviar un correo electrónico al Payment Element, recolectarlo directamente en el Payment Element o utilizar el Link Authentication Element. De estas, Stripe recomienda enviar una dirección de correo electrónico del cliente al Payment Element si está disponible.

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

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

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

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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

export default function CheckoutForm() {
  return (
    <form>
      <h3>Payment</h3>

      // Create the Payment Element
      <PaymentElement/>
      <button type="submit">Submit</button>
    </form>
  );
}

Usa stripe.confirmPayment para efectivizar el pago con los datos recolectados de tu cliente en los diferentes formularios de Elements. Proporciona una 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 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 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.

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

Actualmente, Link solo funciona con tarjetas de crédito, tarjetas de débito y compras con cuentas bancarias cualificadas de EE. UU. Link requiere el registro del dominio.

Puedes crear cuentas en el entorno de prueba para Link usando 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 el entorno de prueba:

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

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 acepta la autenticación mediante 3D Secure 2 (3DS2) para pagos con tarjeta. 3DS2 requiere que los clientes completen un paso más de verificación con el emisor de la tarjeta al pagar. Los pagos que se han autenticado correctamente con 3D Secure están cubiertos por una transferencia de responsabilidad.

Para activar los flujos de comprobación de la autenticación mediante 3DS2 con Link en un entorno de prueba, usa la siguiente tarjeta de prueba con cualquier CVC, código postal y 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.