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 del 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 vencimiento.

Un Stripe Element contiene un iframe que envía la información del pago a Stripe en modo seguro 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 funcione tu integración.

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

<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 creó 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);
  }
}

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

Crea un nuevo PaymentIntent con la ID del PaymentMethod creado en el cliente. Puedes confirmar el PaymentIntent estableciendo la propiedad confirm como “true” al crear el PaymentIntent o llamando a confirm después de su creación. También se admite Separar la autorización de la captura con pagos con tarjeta.

Si el pago requiere otras acciones, como autenticación con 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 mostrarle un mensaje de error al usuario. Si el pago no requiere ninguna autenticación adicional, se crea un cargo y el estado del PaymentIntent se establece en 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 adelante, crea un objeto Customer para almacenar el PaymentMethod y especifica estos otros parámetros al crear el PaymentIntent:

• cliente. Establecido en el ID del objeto Customer.
• setup_future_usage. Establecido en off_session para indicarle a Stripe que planeas 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 completa las acciones solicitadas. Para obtener más detalles, echa una ojeada al ejemplo de código acerca de cómo guardar tarjetas después de un pago.

Escribe código para gestionar situaciones que requieran la intervención de tu cliente. Normalmente, un pago se efectiviza después de que lo confirmas en el servidor en el paso 4. Sin embargo, cuando el PaymentIntent requiere otra acción de parte del cliente, como autenticar con 3D Secure, este código interviene.

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. Confirma el PaymentIntent otra vez en tu servidor para finalizar el pago.

Mientras realices pruebas, usa un número de tarjeta de prueba que requiera autenticación (por ejemplo, 4000002760003184

) para forzar ese flujo. Si usas una tarjeta que no necesita 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 autenticación adicional, tal como se hizo en el paso anterior. El código en sí no es opcional porque cualquier pago puede requerir este paso extra.

Utilizando el mismo punto de conexión que configuraste arriba, confirma el PaymentIntent nuevamente para finalizar el pago y completar el pedido. Cerciórate de que esta confirmación se produzca en el término de una hora a partir del 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 verificar que la integración esté lista. Úsalas con cualquier CVC y una fecha de vencimiento futura.

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