Aceptar pagos con Stripe Elements y la API ChargesAPI Charges

Acepta pagos electrónicos de clientes de Estados Unidos y Canadá.

API heredada

El contenido de esta sección se refiere a una funcionalidad Heredada. En su lugar, usa la API Payment Intents.

La API Charges no admite las siguientes funcionalidades, muchas de las cuales son necesarias para cumplir con la normativa de las tarjetas de crédito:

Comerciantes de India
Solicitudes bancarias para autenticación de tarjetas
Autenticación reforzada de clientes (SCA)

Usa Stripe Elements, nuestros componentes de interfaz de usuario prediseñados, para crear un formulario de pago que te permita recopilar en modo seguro los datos de tarjeta del cliente sin tener que manejar los datos confidenciales. Los datos de la tarjeta se convierten luego en un token representativo que puedes enviar de forma segura a tus servidores. El servidor puede utilizar ese token para crear un cargo.

Configura Stripe

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

Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:

Crear tu formulario de pago
Lado del cliente

Para recopilar de forma segura los datos de la tarjeta de los clientes, Stripe Elements crea componentes de interfaz de usuario alojados en Stripe. A continuación, se colocan en tu formulario de pago, en lugar de crearlos directamente.

Configurar Stripe Elements

Para que Stripe Elements esté disponible en tu página web, agrega esta etiqueta de script en el head de tu página HTML:

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

El script debe cargarse siempre directamente desde https://js.stripe.com.

Crea una instancia de Elements con el siguiente JavaScript en tu página de pago:

client.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Después de cargar Elements, puedes crear un contenedor DOM vacío con un ID único dentro de tu formulario de pago en donde quieras que Elements agregue su campo de entrada. Te recomendamos colocar ese contenedor dentro de una etiqueta <label> o junto a una etiqueta <label> con un atributo for que coincida con el id único del contendedor Element. Al hacerlo, el Element es seleccionado automáticamente cuando el cliente hace click en la etiqueta correspondiente.

Por ejemplo:

payment.html
<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display Element errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

Una vez cargado el formulario mencionado arriba, crea una instancia de un card Element y móntala en el contenedor Element creado antes:

client.js
// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: '#32325d',
  },
};

// Create an instance of the card Element.
const card = elements.create('card', {style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

El card Element simplifica el formulario de pago y minimiza la cantidad de campos obligatorios insertando un único campo de entrada flexible que recopila todos los datos necesarios de la tarjeta en modo seguro.

De lo contrario, combina cardNumber, cardExpiry y cardCvc Elements para obtener un formulario de tarjeta de múltiples entradas flexible.

Nota

Recopila siempre el código postal para aumentar las tasas de aceptación de tarjetas y disminuir el fraude.

El Card Element de una sola línea recopila y envía automáticamente el código postal del cliente a Stripe. Si creas un formulario de pago con Elements divididos (número de tarjeta, vencimiento, CVC), agrega un campo de entrada separado para el código postal del cliente.

Consulta nuestra documentación de referencia sobre Stripe.js para obtener una lista completa de los tipos de Elements admitidos.

Crea un token
Lado del cliente

Agrega un receptor de eventos para cuando tu cliente envíe los datos de su tarjeta y usa stripe.createToken(card) para tokenizar esa información:

client.js
// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {token, error} = await stripe.createToken(card);

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('card-errors');
    errorElement.textContent = error.message;
  } else {
    // Send the token to your server.
    stripeTokenHandler(token);
  }
});

createToken también acepta un segundo parámetro opcional (no utilizado en este ejemplo) que contiene datos adicionales de la tarjeta del cliente. La función devuelve una Promise que se resuelve con un objeto result. Este objeto obtiene dos resultados:

result.token: el token se creó correctamente.
result.error: se produjo un error. Incluye los errores de validación del lado del cliente. Consulta la referencia de API para ver todos los errores posibles.

Si el objeto contiene un result.token, envíalo a tu servidor. De lo contrario, muéstrale el error al cliente.

Envía el token a tu servidor
Lado del cliente

Envía el token a tu servidor junto con la información adicional que se haya recopilado:

client.js
const stripeTokenHandler = (token) => {
  // Insert the token ID into the form so it gets submitted to the server
  const form = document.getElementById('payment-form');
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

Crea un cargo con el token
Lado del servidor

Después de que el cliente registra el token en tu servidor, puedes usarlo para crear un cargo. En tu servidor, toma el token de Stripe en los parámetros POST enviados por tu formulario. Hecho esto, basta con hacer una llamada a la API para cobrar a la tarjeta:

La respuesta después de la creación de un cargo será un objeto Charge o un error con un código de error. Si la respuesta confirma la creación del cargo, completa el pedido del cliente y muéstrale una página de confirmación. De lo contrario, muéstrale una página de error.

Prueba tu integración

Si puedes ingresar de manera confiable una tarjeta de prueba en tu formulario HTML, envíalo al servidor y verifica si tu servidor creó el cargo. De ser así, tu integración está terminada.

¡Felicidades! Has completado una integración básica de pagos con la API Charges. Esta API no admite ampliar el desarrollo de empresas o clientes fuera de los Estados Unidos y Canadá. Para contar con opciones de pagos internacionales más sólidas, aprende a aceptar pagos con la API Payment Intents.

Consulta también

Puedes obtener más información sobre Elements y cómo guardar tarjetas con la API Charges.