Pagos con tarjeta sin autenticación bancaria

Crea una integración más simple con limitaciones regionales.

This integration supports businesses accepting only US and Canadian cards. It’s simpler up front, but does not scale to support a global customer base.

¿Cómo funciona esta integración?

¿En qué se diferencia de la integración global?

Growing or global businesses should use Stripe’s global integration to support bank requests for two-factor authentication and allow customers to pay with more payment methods.

Crear un formulario de compra
Lado del cliente

Elements, que forma parte de Stripe.js, proporciona componentes de interfaz de usuario para recopilar información de las tarjetas de los clientes. Stripe los aloja y los coloca en tu formulario de pago como un iframe para que los datos de la tarjeta de tu cliente nunca toquen tu código.

Primero, incluye el script de Stripe.js en el encabezado de cada página de tu sitio.

<script src="https://js.stripe.com/v3/"></script>

Si incluyes el script en cada página de tu sitio, podrás sacar provecho de las funcionalidades antifraude avanzadas de Stripe y de la capacidad de detectar comportamientos anómalos en la navegación.

Requisitos de seguridad

Este script siempre debe cargarse directamente desde js.stripe.com para cumplir con la normativa PCI. No puedes incluir el script en un paquete ni alojar una copia en tus sistemas.

Cuando usas Elements, toda la información de pago se envía a una conexión HTTPS segura.

La dirección de la página que contiene Elements también debe comenzar con https:// y no con http://. Para obtener más información sobre cómo obtener certificados SSL e integrarlos a tu servidor para habilitar una conexión HTTPS segura, consulta la documentación sobre seguridad.

Agrega Elements a tu página

A continuación, necesitas una cuenta de Stripe. Inscríbete ahora.

Crea elementos DOM (contenedores) vacíos con ID únicos en tu formulario de pago.

payment.html
<form id="payment-form">
  <div id="card-element"><!-- placeholder for Elements --></div>
  <button id="card-button">Submit Payment</button>
  <p id="payment-result"><!-- we'll pass the response from the server here --></p>
</form>

Crea una instancia del objeto Stripe y suministra tu clave de API publicable como primer parámetro. Luego, crea una instancia del objeto Elements y úsala para montar un elemento Card en el contenedor de elementos DOM vacío en la página.

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

Usa stripe.createPaymentMethod del lado de tu cliente para recopilar los datos de la tarjeta y crear un PaymentMethod cuando el cliente envíe el formulario de pago. Envía el ID del PaymentMethod a tu servidor.

client.js
const form = document.getElementById("payment-form");

var resultContainer = document.getElementById('payment-result');

// cardElement is defined in the previous step
cardElement.on('change', function(event) {
  if (event.error) {
    resultContainer.textContent = event.error.message;
  } else {
    resultContainer.textContent = '';
  }
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  resultContainer.textContent = '';
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  handlePaymentMethodResult(result);
});

const handlePaymentMethodResult = async ({ paymentMethod, error }) => {
  if (error) {
    // An error happened when collecting card details, show error in payment form
    resultContainer.textContent = result.error.message;
  } else {
    // Send paymentMethod.id to your server (see Step 3)
    const response = await fetch("/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_method_id: paymentMethod.id })
    });

    const responseJson = await response.json();

    handleServerResponse(responseJson);
  }
};

const handleServerResponse = async responseJson => {
  if (responseJson.error) {
    // An error happened when charging the card, show it in the payment form
    resultContainer.textContent = responseJson.error;
  } else {
    // Show a success message
    resultContainer.textContent = 'Success!';
  }
};

Configurar Stripe
Lado del servidor

Usa una biblioteca oficial para hacer solicitudes a la API de Stripe desde tu aplicación:

Efectuar un pago
Lado del servidor

Configura un punto de conexión en tu servidor para recibir la solicitud del cliente.

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.

Decide cuánto cobrar siempre del lado del servidor, un entorno de confianza, no del lado del cliente. Esto impide que clientes maliciosos puedan elegir sus propios precios.

Crea un punto de conexión HTTP para responder a la solicitud AJAX del paso 1. En ese punto de conexión, debes decidir cuánto le cobrarás al cliente. Para crear un pago, crea un PaymentIntent usando el ID del PaymentMethod del paso 1 con el siguiente código:

Advertencia

If you set error_on_requires_action to true when confirming a payment, Stripe automatically fails the payment if it requires two-factor authentication from the user.

Respuesta de la API Payment Intents

Cuando efectúas un pago con la API, la respuesta incluye el estado del PaymentIntent. Si el pago se realizó correctamente, el estado será succeeded.

{
  "id": "pi_0FdpcX589O8KAxCGR6tGNyWj",
  "object": "payment_intent",
  "amount": 1099,
  "charges": {
    "object": "list",
    "data": [
      {
        "id": "ch_GA9w4aF29fYajT",
        "object": "charge",
        "amount": 1099,
        "refunded": false,
        "status": "succeeded",
      }
    ]
  },
  "client_secret": "pi_0FdpcX589O8KAxCGR6tGNyWj_secret_e00tjcVrSv2tjjufYqPNZBKZc",
  "currency": "usd",
  "last_payment_error": null,
  "status": "succeeded",
}

Si el pago es rechazado, la respuesta incluye el código de error y el mensaje de error. Veamos un ejemplo de un pago fallido porque se exigía la autenticación de dos factores para la tarjeta.

{
  "error": {
    "code": "authentication_required",
    "decline_code": "authentication_not_handled",
    "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
    "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
    "payment_intent": {
      "id": "pi_1G8JtxDpqHItWkFAnB32FhtI",
      "object": "payment_intent",
      "amount": 1099,
      "status": "requires_payment_method",
      "last_payment_error": {
        "code": "authentication_required",
        "decline_code": "authentication_not_handled",
        "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
        "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
        "type": "card_error"
      },
    },
    "type": "card_error"
  }
}

Probar la integración

Stripe proporciona varias tarjetas de prueba que puedes usar en un entorno de prueba para asegurarte de que esta integración esté lista. Úselas con cualquier CVC, código postal y fecha de vencimiento futura.

Número	Descripción
	Se efectúa correctamente la transacción y se procesa el pago de inmediato.
	Siempre da error con un código de rechazo `insufficient_funds`.
	Requiere autenticación, que en esta integración fallará con el código de rechazo `authentication_not_handled`.

Consulta la lista completa de tarjetas de prueba.

Actualiza tu integración para gestionar la autenticación de tarjetas

¡Felicitaciones! Has completado una integración para pagos básicos con tarjeta. Ten en cuenta que esta integración rechaza las tarjetas que exigen autenticación durante el pago.

Si empiezas a ver en el Dashboard pagos que figuran como Failed, es hora de actualizar la integración. La integración global de Stripe gestiona estos pagos en lugar de rechazarlos automáticamente.