Aceptar pagos con Stripe Elements y la API ChargesAPI Charges

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

API heredada

The content of this section refers to a Legacy feature. Use the Payment Intents API instead.

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

Usa Stripe Elements, nuestros componentes de interfaz de usuario predefinidos, para crear un formulario de pago que te permita recopilar de forma segura los datos de tarjeta del cliente sin tener que gestionar los datos confidenciales. Los datos de la tarjeta se convierten luego en un token representativo que puedes enviar de manera segura a tus servidores. Tu 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:

Crea tu formulario de pago
Lado del cliente

Para recopilar los datos de las tarjetas de tus clientes de forma segura, Stripe Elements crea componentes de interfaz de usuario que están alojados en Stripe. Luego se colocan en tu formulario de pago, en lugar de que tú tengas que crearlos directamente.

Configura Stripe Elements

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

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

El script siempre debe cargarse 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 el lugar que quieras que Elements añada 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 clic 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 Element card e insértala 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 Element card 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 cardNumber, cardExpiry y cardCvc Elements para obtener un formulario de tarjeta flexible de varias entradas.

Nota

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

The single line Card Element automatically collects and sends the customer’s postal code to Stripe. If you build your payment form with split Elements (Card Number, Expiry, CVC), add a separate input field for the customer’s postal code.

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

Añade un oyente 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 tiene:

result.token: el token se ha creado correctamente.
result.error: se ha producido un error; esto incluye los errores de validación del lado del cliente. Consulta la referencia de la 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 registre el token en tu servidor, puedes usarlo para crear un cargo. En tu servidor, coge 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 al crear un cargo será un cargo o un error con un código de error. Si la respuesta se realiza correctamente, completa el pedido del cliente y muéstrale que se ha realizado correctamente. De lo contrario, muéstrale una página de error.

Prueba tu integración

Si puedes introducir de manera fiable una tarjeta de prueba en tu formulario HTML, envíalo al servidor y comprueba que tu servidor ha creado el cargo. De ser así, la integración habrá terminado.

¡Enhorabuena! Has completado una integración básica de pagos con la API Charges. Esta API no da soporte a empresas en expansión ni a clientes fuera de Estados Unidos y Canadá. Para contar con opciones de pagos internacionales más sólidas, descubre cómo aceptar pagos con la API Payment Intents.

Véase también

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