7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

Creación de un formulario de pago de PayPal

Read Time: 5 mins

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

Aunque puede tener algunos problemas, PayPal proporciona una forma muy sencilla de aceptar pagos en un sitio web. Y con un pequeño ajuste, puedes convertir fácilmente un botón "Comprar ahora" de PayPal en un formulario en el que el usuario especifique cuánto le gustaría pagar y por qué está pagando.

Cómo funciona

PayPal hace que hacer esto sea muy fácil proporcionando esos botones "Comprar ahora" que probablemente hayas visto por todas partes. Básicamente, cuando ves uno de esos botones, en realidad es el botón enviar en un formulario HTML con todos los campos del formulario configurados como ocultos. Esto está bien para cuando tienes un precio establecido y un artículo establecido, pero ¿qué pasa si quieres que el usuario especifique cuánto está pagando y por qué está pagando?

Por ejemplo, si estás agregando un formulario de pago a tu sitio de trabajo independiente, entonces querrás que el cliente ingrese su número de factura y la cantidad que desea pagar. Esto se hace fácilmente cambiando los campos <input> de oculto a texto y eliminando los valores predeterminados para que el usuario pueda completarlos. Así que empecemos.

Paso 1

Lo primero que necesitamos es una página a la que volver después de la transacción. En mi ejemplo, estoy creando un formulario de donación para NETTUTS, así que creé esta página de Confirmación de pago.

Paso 2

A continuación, iniciamos sesión en nuestra cuenta de PayPal y hacemos clic en la pestaña Servicios comerciales. En la parte inferior derecha verás un enlace que dice Botones Comprar ahora, síguelo y llegarás a un formulario para crear uno de estos botones.

Completa el formulario, en ID del artículo, simplemente escribe el número 1 y usa números ficticios similares para el nombre y el precio del artículo. Los cambiaremos en el código más tarde. Asegúrate de NO cifrar el botón. El resto de los campos (peso, entre otros) se pueden dejar en blanco.

Paso 3

Este es el código que me da PayPal. Como puedes ver, el botón es de hecho un elemento <form&rt; que utiliza un botón de envío de imagen. Lo más importante es que podemos cambiar cualquiera de los que están ocultos. Introduce campos en campos de texto reales simplemente cambiando la palabra oculto a texto.

Esto significaría que, por ejemplo, en lugar de especificar el valor de la cantidad en 9,00, podemos permitir que el usuario escriba el valor que desea pagar. De manera similar, item_name también puede ser una entrada de usuario.

Este es un resumen de los campos que te interesaría cambiar:

  • Número de artículo El valor que colocas en este campo aparece cuando el usuario accede a PayPal y hace clic en la flecha hacia abajo para obtener más detalles sobre su compra (puedes verlo ingresando alguna información en el siguiente formulario de prueba).
  • Negocio Este campo es para la cuenta de PayPal a la que se paga. Asegúrate de que esté configurado en tu cuenta. El que estoy usando es para las cuentas [@] freelanceswitch.com (que está vinculado a nuestro sitio hermano FreelanceSwitch).
  • Código de divisas Esto es bastante sencillo. Al crear el botón Comprar ahora, puedes seleccionar diferentes opciones para esta configuración. Si por alguna razón quisieras, también podrías cambiar esto a un elemento <select> y deja que tu usuario elija en qué moneda pagar.
  • Nombre del elemento El campo item_name es aquel en el que tu usuario describe lo que está pagando. En el formulario de ejemplo a continuación, utilicé un cuadro de selección para permitir que el usuario elija a qué está donando. Puedes cambiarlo fácilmente a un campo de texto y dejar que el usuario escriba algo.
  • Cantidad Lo único que hay que tener en cuenta aquí es que si el usuario escribe algo que no sea un número, PayPal devolverá un error, por lo que es posible que quieras utilizar algo de Javascript para realizar la validación en este campo y asegurarse de que sea un número, aunque sería un tutorial completamente diferente. Entonces, en cambio, para mi formulario de ejemplo, acabo de escribir un signo $ antes del campo de texto, con la esperanza de que eso lo haga un poco más autoexplicativo.

Paso 4

Es posible que hayas notado que no hay espacio para una dirección URL de retorno. Afortunadamente, en una versión anterior del formulario del botón Comprar ahora, solía haberlo, y el valor aún funciona. Simplemente necesitas agregar esta línea a tu formulario (¡sustituyéndola por la URL de retorno apropiada, por supuesto!).

Paso 5

Dado que ese botón de PayPal es bastante feo, también volveré a un botón de envío normal. Para ello simplemente intercambiamos el elemento <input type='image'> con un elemento regular <input type='submit'> , como este:

Paso 6

Haz una donación a NETTUTS Completa el formulario y envíanos unos dólares para tu tutorial favorito:

¿Donación / Contribución?

¿Para qué tutorial estás donando?

¿Cuánto quieres donar? $

Así que ahí lo tienes. En el ejemplo un tanto tonto de arriba utilicé dos campos <select>. Por supuesto, podrías usar campos de texto normales o realmente cualquier combinación. Incluso puedes omitir campos, por ejemplo, no es realmente necesario tener el item_number e item_name en mi ejemplo.

Si completas el formulario y presionas Pagar, verás dónde aparecen las tres entradas en PayPal; ¡no te preocupes, realmente no es necesario que pagues!

Este es el código final que usé:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.