Aceptar pagos con Stripe Elements y la API ChargesAPI Charges
API heredada
El contenido de esta sección se refiere a una funcionalidad de Legacy. Usa la API PaymentIntents.
The Charges API doesn’t support the following features, many of which are required for credit card compliance:
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 librerías oficiales para acceder a la API de Stripe desde tu aplicación:
Crear tu formulario de pagoLado del cliente
Para recopilar datos de tarjeta de tus clientes en modo seguro, Elements crea componentes de interfaz de usuario que son alojados por Stripe y que luego son colocados en tu formulario de pago. Tú no tienes que crearlos.
Configurar Stripe Elements
Crea un tokenLado del cliente
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 servidorLado del cliente
Envía el token a tu servidor junto con la información adicional que se haya recopilado:
Crea un cargo con el tokenLado 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.