Acepta pagos con tarjeta sin webhooks

Primero, necesitas una cuenta de Stripe. Inscríbete ahora.

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'

Recopila los datos de tarjeta de lado del cliente con Stripe.js y Stripe Elements. Elements es un conjunto de componentes de interfaz de usuario prediseñados para recopilar y validar el número de tarjeta, el código postal y la fecha de caducidad.

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. Para que funcione la integración, la dirección de la página de finalización de compra también debe comenzar con https:// en lugar de http://.

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

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

<form id='payment-form'>
  <label>
    Card details
    <!-- placeholder for Elements -->
    <div id="card-element"></div>
  </label>
  <button type="submit">Submit Payment</button>
</form>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();
// Set up Stripe.js and Elements to use in checkout form
const style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  },
};
const cardElement = elements.create('card', {style});
cardElement.mount('#card-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
    billing_details: {
      // Include any additional collected billing details.
      name: 'Jenny Rosen',
    },
  })
  stripePaymentMethodHandler(result);
});

Si el PaymentMethod se ha creado correctamente, envía su ID a tu servidor.

const stripePaymentMethodHandler = async (result) => {
  if (result.error) {
    // Show error in payment form
  } else {
    // Otherwise send paymentMethod.id to your server (see Step 4)
    const res = await fetch('/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        payment_method_id: result.paymentMethod.id,
      }),
    })
    const paymentResponse = await res.json();
    // Handle server response (see Step 4)
    handleServerResponse(paymentResponse);
  }
}

Crea un punto de conexión en tu servidor para recibir la petición. Este punto de conexión también se utilizará más adelante para gestionar las tarjetas que requieran un paso adicional de autenticación.

Crear un nuevo PaymentIntent con el ID del PaymentMethod creado en tu cliente. Puedes confirmar el PaymentIntent estableciendo la propiedad confirm como true cuando se crea el PaymentIntent o llamando a confirm después de su creación. También se aceptan la autorización y la captura por separado para los pagos con tarjeta.

Si el pago requiere más acciones, como la autenticación mediante 3D Secure, el estado del PaymentIntent se establecerá en requires_action. Si el pago falla, el estado vuelve a ser requires_payment_method y debes mostrar un mensaje de error al usuario. Si el pago no requiere más autenticación, se crea un cargo y el estado del PaymentIntent pasa a succeeded.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "confirmation_method"="manual" \
  -d "confirm"="true"

Si quieres guardar la tarjeta para volver a utilizarla más tarde, crea un Customer para almacenar el PaymentMethod y especifica los siguientes parámetros al crear el PaymentIntent:

• customer: establécelo en el ID del objeto Customer.
• setup_future_usage: establécelo en off_session para indicarle a Stripe que tienes intención de reutilizar este PaymentMethod para pagos fuera de la sesión sin la presencia del cliente. Si se define esta propiedad, el PaymentMethod se guarda en el objeto Customer después de la confirmación del PaymentIntent y de que el usuario complete las acciones solicitadas. Para obtener más información, observa el ejemplo de código sobre de cómo guardar tarjetas después de un pago.

Escribe el código para gestionar situaciones que requieran la intervención del cliente. Normalmente, un pago se hace efectivo después de que lo confirmas en el servidor, en el paso 4. Sin embargo, cuando el PaymentIntent requiere una acción más por parte del cliente, como la autenticación con 3D Secure, entra en juego este código.

Usa stripe.handleCardAction para activar la interfaz de usuario con el fin de gestionar la acción del cliente. Si la autenticación se realiza correctamente, el estado del PaymentIntent es requires_confirmation. Vuelve a confirmar el PaymentIntent en tu servidor para finalizar el pago.

Mientras estés haciendo pruebas, usa un número de tarjeta de prueba que requiera autenticación (por ejemplo, 4000002760003184

) para forzar este flujo. Si usas una tarjeta que no requiere autenticación (por ejemplo, 4242424242424242

), se omite esta parte del flujo y la operación finaliza en el paso 4.

const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.requires_action) {
    // Use Stripe.js to handle the required card action
    const { error: errorAction, paymentIntent } =
      await stripe.handleCardAction(response.payment_intent_client_secret);
    if (errorAction) {
      // Show error from Stripe.js in payment form
    } else {
      // The card action has been handled
      // The PaymentIntent can be confirmed again on the server
      const serverResponse = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_intent_id: paymentIntent.id })
      });
      handleServerResponse(await serverResponse.json());
    }
  } else {
    // Show success message
  }
}

Este código solo se ejecuta cuando un pago requiere un paso más de autenticación, tal como se hizo en el paso anterior. El código en sí no es opcional porque cualquier pago puede exigir este paso extra.

Utilizando el mismo punto de conexión que has configurado arriba, confirma el PaymentIntent nuevamente para finalizar el pago y tramitar el pedido. Asegúrate de que esta confirmación se produce en el plazo de una hora desde el intento de pago. De lo contrario, el pago fallará y volverá a requires_payment_method.

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

​​Dispones de varias tarjetas de prueba que puedes usar en un entorno de prueba para asegurarte de que la integración esté lista. Úsalas con cualquier CVC y con cualquier fecha de caducidad futura.

Para ver la lista completa de tarjetas de prueba, consulta nuestra guía sobre pruebas.