Pagos con tarjeta sin autenticación bancaria

Elements, parte de Stripe.js, proporciona componentes de interfaz de usuario para recopilar datos 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.

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

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

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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!';
  }
};

Usa una biblioteca oficial para hacer solicitudes 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'

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

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.

Decide siempre cuánto cobrar del lado del servidor, un entorno de confianza, y no del lado del cliente. Esto impide que clientes malintencionados 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:

# Check the status of the PaymentIntent to make sure it succeeded

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc: \
  -d amount=1099 \
  -d currency=usd \

# A PaymentIntent can be confirmed some time after creation,
# but here we want to confirm (collect payment) immediately.
  -d confirm=true \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \

# If the payment requires any follow-up actions from the
# customer, like two-factor authentication, Stripe will error
# and you will need to prompt them for a new payment method.
  -d error_on_requires_action=true

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 ha realizado 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 se ha rechazado, la respuesta incluye el código de error y el mensaje de error. A continuación, encontrás un ejemplo de un pago fallido porque para la tarjeta se exigía la autenticación de dos factores.

{
  "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"
  }
}

Dispones de varias tarjetas de prueba que puedes usar en modo de prueba para asegurarte de que la integración esté lista. Úsalas con cualquier CVC, código postal y fecha de caducidad futura.

Ver la lista completa de tarjetas de prueba.

¡Enhorabuena! 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 los pagos en el Dashboard como Failed, entonces es el momento de actualizar tu integración. La integración global de Stripe gestiona estos pagos en lugar de rechazarlos automáticamente.