Guarda una tarjeta sin autenticación bancaria

Antes de comenzar esta guía, necesitas una cuenta de Stripe. Regístrate ahora.

Crea una página del proceso de compra para recopilar los datos de la tarjeta de tu cliente. Usa Stripe Elements, una biblioteca de interfaz de usuario que te ayuda a crear formularios de pago personalizados. Para empezar a usar Elements, incluye la biblioteca .js de Stripe con la siguiente secuencia en tu página del proceso de compra.

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

Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia en tus sistemas.

Para aprovechar al máximo la función de fraude avanzada de Stripe, incluye este script en todas las páginas de tu sitio web, no solo en la página del proceso de compra. La inclusión del script en cada página permite a Stripe detectar comportamientos sospechosos que pueden indicar fraude cuando los usuarios navegan por tu sitio web.

Añadir Elements a tu página

Para recoger los datos de las tarjetas de tus clientes de forma segura, Elements crea componentes de interfaz de usuario para ti alojados por Stripe. Luego se colocan en tu formulario de pago, en lugar de que tú tengas que crearlos directamente. Para determinar dónde insertar estos componentes, crea elementos DOM vacíos (contenedores) con ID únicos en tu formulario de pago.

<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>

A continuación, crea una instancia del objeto Stripe suministrando tu clave de API publicable como primer parámetro. Después, crea una instancia del objeto Elements y úsala para montar un elemento card en el DOM.

El card Element simplifica el formulario de pago y minimiza la cantidad de campos obligatorios al insertar un único campo de entrada flexible que recopila todos los datos necesarios de la tarjeta de forma segura.

De lo contrario, combina los Elements cardNumber, cardExpiry y cardCvc para obtener un formulario flexible de tarjeta de varias entradas.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

Un Stripe Element contiene un iframe que envía la información del pago a Stripe de forma segura a través de una conexión HTTPS. La dirección de la página de finalización de compra también debe empezar con https:// en lugar de http:// para que tu integración funcione.

Puedes probar tu integración sin usar HTTPS. Habilítala cuando todo esté listo para aceptar pagos en el modo activo.

const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});

Envía el ID de PaymentMethod resultante a tu servidor.

Utiliza 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'

Guarda la tarjeta asociando el PaymentMethod a un objeto Customer. Puedes usar el objeto Customer para almacenar otros datos sobre tu cliente, como los datos de envío y la dirección de correo electrónico.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

Si ya tienes un objeto Customer, puedes vincular el PaymentMethod a ese objeto.

curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}

En este punto, asocia el ID del Customer y el ID del PaymentMethod con tu propia representación interna del cliente, si tienes una.

Cuando esté todo listo, busca el ID del PaymentMethod y el ID del Customer para efectuar el cargo. Puedes hacerlo almacenando los ID de ambos en tu base de datos o utilizando el ID del Customer para buscar todos los PaymentMethods disponibles para el cliente.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Usa el ID del PaymentMethod y el ID del Customer para crear un nuevo PaymentIntent. Establece error_on_requires_action en true para rechazar los pagos que requieran acciones por parte del cliente, como la autenticación en dos pasos.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true

Cuando falla un intento de pago, también falla la solicitud con un código de estado HTTP 402 y Stripe devuelve un error. Debes enviar una notificación al cliente para que vuelva a tu aplicación (por ejemplo, mediante un correo electrónico) y complete el pago. Comprueba el código de error que ha enviado la biblioteca de la API de Stripe o revisa el last_payment_error.decline_code del PaymentIntent para inspeccionar por qué el emisor de la tarjeta ha rechazado el pago.

Notifica a tu cliente que el pago no se realizó correctamente y dirígelo al formulario de pago que creaste en el Paso 1, donde puede introducir los nuevos datos de la tarjeta. Envía ese nuevo ID del PaymentMethod a tu servidor para vincularlo al objeto Customer y volver a realizar el pago.

Como alternativa, si ya has creado un objeto Customer, puedes crear un PaymentIntent y guardar una tarjeta todo ello en una sola llamada a la API.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

Configurar setup_future_usage en on_session indica a Stripe que quieres guardar la tarjeta para su uso posterior, sin activar la autenticación innecesariamente.

Stripe proporciona tarjetas de prueba que puedes usar en un entorno de prueba para simular el comportamiento de las diferentes tarjetas. Usa estas tarjetas con cualquier CVC, código postal y fecha de caducidad futura.