Autofill del formulario de PayPal

Clase 35 de 41 • Curso de HTML y CSS 2019

Que bueno que has llegado hasta aquí. En esta clase aprenderemos algunas cosas extras pero muy importantes sobre PAYPAL y el formulario que acabamos de hacer, lo más importante ahora es que seguro tienes dudas y una de ellas puede ser ¿qué pasa con las variables que envías por el formulario?¿cómo las recibe Paypal en su sistema y para qué nos sirve?

Vamos por pasos:

Variables

Las variables que nosotros enviamos en el código tal como name, phone e email Paypal las recibe para poder completar su formulario por ejemplo cuando nosotros no enviamos ninguna variable en el POST del formulario, la pantalla de Paypal será:

Al recibir data del formulario de PayPal cambia la pantalla por algo como esto:

Esto sucede porque las variables que enviamos por el formulario, después viajan por el URL y llegan a PayPal, son las mismas variables que utiliza para llenar su formulario y así el usuario no tiene que ingresar 2 veces la misma información.

Tu código debe tener estas variables para que la opción de autollenado funcione

Con esto puedes notar que tienes muchas opciones para tu formulario lo importante es que sigas el mismo formato que tiene paypal para pasar las variables.

Te dejo también un ejemplo más amplio de variables para los forms:

Toda la documentación de la función de autollenado la encuentras en este enlace: https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/formbasics/#auto-fill-forms-with-html-variables

Y las variables que pueden enviar para el auto llenado del formulario son : https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables/#paypal-checkout-page-variables

Mau Cor

student•

¿Buena info? si, pero nadie ha compartido cómo queda el código. lo hice de esta forma pero aún dirige a la primera pantalla de iniciar sesión.

<form action="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZVLNXV894N68G" method="post">
							<input type="hidden" name="first_name" value="John">
							<input type="hidden" name="night_phone_a" value="610">
  							<input type="hidden" name="mail" value="jdoe@zyzzyu.com">
							<label for="nombre">Nombre</label>
							<br>
							<input type="text" placeholder="hola" id="name" name="first_name" class="data">
							<br>
							<label for="mail">Mail</label>
							<br>
							<input type="email" placeholder="example@correo.com" id="mail" name="email" class="data">
							<br>
							<label for="phone">phone</label>
							<br>
							<input type="number" id="phone" name="night_phone_a" maxlength="10" class="data">
							<br>
							<input type="submit" class="main_button" name="submit" value="¡Quiero mi gatito!">
						</form>```

Facundo Colavini

student•

Creo que el label nombre no esta asociado con el input name ya que tiene en el atributo for tiene nombre y deberia ser name.

Yuri Añorga

student•

Esta clase me aclaro muchos conceptos de la clase anterior, gracias profesor.

Diego Rubio

student•

está poco claro esto

David Axel González Flores

student•

Yo ya lo entiendo porque ya tengo un poco de experiencia, pero para un principiante este punto no queda tan claro solo con la explicación, de verdad es necesario que se lean los links que pone, o que investiguen por su propia cuenta sobre formularios en HTML :)

Fernando Molano Castrillón

student•

Para quienes tienen dudas, aún no usen el hidden, porque obviamente ocultará los input y no podrán hacer las pruebas. Simplemente asegúrense de que los name y value coincidan con los de PayPal y listo.

<label for="name">Nombre</label><br>
                <input type="text" name="first_name" value="John" class="data"><br>
                <label for="email">Email</label><br>
                <input type="email" name="email" value="jdoe@zyzzyu.com" class="data"><br>
                <label for="phone">Telefono</label><br>
                <input type="number" name="night_phone_a" value="610" class="data"><br>
                <input type="submit" value="Confirmar Pago" name="submit" class="main-btn">```

Una vez hecho esto, para testarlo, asegúrense de poner en los datos un correo que SI tenga cuenta creada con PayPal (puede ser la propia que usaron para crear la cuenta en PayPal) de esta forma se validará la información y mostrará las opciones necesarias para seguir. De otro modo seguirá mostrando la opción de Crear Cuenta.

Cristian Solares Sánchez

student•

crei que el punto de hacer eso es para usuarios sin cuenta de PayPal

Javier Gutierrez Alcantara

student•

Lo hice tal cual y me sigue saliendo la pantalla de inicio de secion :'c

Edgar Jesus Carreño Layton

student•

esto si merecia una clase

Carlos Alfredo López Zavarce

student•

Los formularios en html son muy importantes la informacion que se transfiere debe tener algun metodo el cual no sea visible para cualquiera por eso usamos el metodo POST, el metodo POST lo que hace es enviar la informacion de manera oculta, evitando asi que una persona pueda examinar nuestas URLS y acceder a la informacion.

Por otro lado esta el metodo GET que envia las variables por la URL lo que haria facil examinarlas por cualquierda ademas de modificarlas.

Los metodos hidden dentro de un formulario permiten ocultar parte de la informacion directa al usuario , pero que sera necesaria para el sistema, supongamos que tenemos muchos elementos que estan guardados tanto por su nombre, como un un ID unico que los identifica, seria interesante entonces poder guardar ese ID que tomamos y enviar directamente al sistema de pagos para que identifique el produto y luego se realice le proceso. Sin embargo, este ID no queremos que este a la vista de nuestros usuario por lo tanto usariamos el HIDDEN para eviatar esto.

Saludos

Angel Enrique Barrios

student•

pero en que parte del post le digo el monto a cobrar?

Alejo Fonseca

student•

Creo que eso se configura cuando haces la creación del botón

Daniel Bustamante

student•

Hola, Eso debes especificarlo durante la creación del botón, en la página de PayPal. Aquí te dejo el enlace de la página donde puedes iniciar ese proceso: https://www.paypal.com/lc/webapps/mpp/buttons. Cuando estés ahí, selecciona la opción de Create a Buy Now button

. Luego, ya podrás empezar a colocar la demás información (nombre del producto, precio, moneda, etc.) .

. Saludos

Luis Francisco Rascón Carrasco

student•

Jeffer Alexander Carreño Alvis

student•

Entiendo que "hidden" nos ayuda con la seguridad de la URL, también entiendo que el contenido de "value" también llega a paypal con la intención de que quede como valor default en campos de texto de paypal (con la intención de que no se deban digitar de nuevo, pero que paypal los reciba)

Es así? agradezco los comentarios :D

Santiago Restrepo

student•

Bro pues el hidden simplemente hará que ese input no se muestre, y al darle un value siempre enviará el mismo a menos que se le modifique en el inspector de elementos o que cambies el type a text, quites el value y lo digites por ti mismo en el navegador.

Máximo Conejo

student•

Lo ultimo tampoco lo entendí, y hice las dos pruebas confirmando el pago con información dentro de los inputs, y sin información, ¿Alguien me ayuda?

Juan Pablo Corredor Rodriguez

student•

hola, mandame un Dm y miramos en que te puedo ayudar

Efraín Hernández García

student•

Tengo una duda... ¿Por qué en los inputs, a la hora de poner type="hidden" ya no dejar llenar los formularios? Mi formulario se pone así....

Gastón Konstantinides

student•

Los campos que tiene que llenar el cliente no tienen que ser de tipo "hidden" ya que "hidden" lo que hace es ocultar esa información, al momento de hacer "click" en el botón, envía la información del cliente, más toda la información oculta de los datos "estáticos" del sitio y que nunca van a cambiar, eso sirve para que Paypal los reciba y pueda gestionarlos al momento de hacer el pago.

Por ejemplo si especificamos que el "idioma" tiene tildes y "ñ", le podemos agregar un input así:

&lt;INPUT TYPE=&quot;hidden&quot; name=&quot;charset&quot; value=&quot;utf-8&quot;&gt;

La información que aparece en la URL de Paypal es información del "Sitio", por cualquier consulta o duda, sepa que tiene un teléfono a donde llamar, una dirección física, etc.

Esto le sirve al cliente cuando quiere pagar en Paypal, nada más.

Lucas Ramirez

student•

No me quedó muy claro !voy a tratar de releer hasta que pueda entender

Jesus Velasco

student•

Solo por estos videos de Paypal todo el curso valió la pena :3

Jairo Pinto

student•

No es for, es en type...

José Marcial Ambríz Gómez

student•

Los datos de los inputs que contienen "hidden", son datos que el usuario tiene que proporcionar?

Santiago Marulanda Molina

student•

Por lo general los campos type="hidden" se usan para enviar datos que el usuario no debe llenar (tienen un valor por defecto) o que no quieres que el usuario modifique. Al ser input type="hidden" las personas no visualizan estos campos, a menos que presionen f12 e inspeccionen el código html.

Con campos que el usuario no maneja hago referencia a los siguientes ejemplos:

Fecha de la transacción
Tokens de seguridad
Campos con un valor por defecto

Si no tienes la necesidad de usar hidden para ocultar los campos los cambias por type="text" , type="email", etc.

Ian Vassallo

student•

Entonces debería usarlos al momento de hacer mis inputs? O solo para algunos? Y si es een algunos...como cuales?

Aún lo investigaré también pero si tienes conocimiento sería bueno jaja

Juan Daniel Gómez Posadas

student•

Hola, tengo una pequeña duda. Si por ejemplo un usuario que interactúe con mi botón de compra no tiene una cuenta paypal podrá realizar la transacción solo ingresando sus datos de facturación y sin tener que crear una cuenta paypal?

Greimer Abel Pérez Guzmán

student•

no, tendrá que crear su cuenta PayPal

Greimer Abel Pérez Guzmán

student•

John Ruiz

student•

Wen@s; @Greimer, que bien como lo lograste¿? Llevo toda la mañana cambiando cosas en el código y no logro el auto-fill.

Greimer Abel Pérez Guzmán

student•

Hola amigo, pues este es mi código...

<form action="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GLHY3ENHGAGPU" method="POST">
    <label for="name">Nombre</label>
    <input type="text" name="name" class="data">
    <br>
    <br>
    <label for="email">E-Mail</label>
    <input type="text" name="email" class="data">
    <br>
    <br>
    <label for="phone">Teléfono</label>
    <input type="text" name="phone" class="data">

    <input type="submit" value="Confirmar Pago" class="main_button">
</form>

La verdad no creo haber hecho nada fuera de lo normal jejej, solo que me dí cuenta de que al registrame en Paypal, configurar mi botón y ponerlo en uso este me iba a redirigir a Paypal y al ingresar en mi cuenta, estaría entrando a la cuenta del vendedor jejeej, por eso cuando mi botón me reenvió a Paypal ingresé desde la cuenta de un familiar mío y resultó.

John Gerardo Aparicio Rodriguez

student•

Aunque pongo los input con el name correcto cuando me envía a Paypal no llena los formularios, no sé qué tendré mal

Valente IA

student•

revisa si tienes el method POST

Daniela Benítez González

student•

¿Pero es necesario poner el hidden?

Bryan Alejandro Sánchez Ramírez

student•

Así es. Es para que la etiqueta esté "oculta". Sino se vería como otro input mas y, aparte de que no tendría sentido que se vea, arruinaría el diseño.

<form action="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZVLNXV894N68G" method="post">
							<input type="hidden" name="first_name" value="John">
							<input type="hidden" name="night_phone_a" value="610">
  							<input type="hidden" name="mail" value="jdoe@zyzzyu.com">
							<label for="nombre">Nombre</label>
							<br>
							<input type="text" placeholder="hola" id="name" name="first_name" class="data">
							<br>
							<label for="mail">Mail</label>
							<br>
							<input type="email" placeholder="example@correo.com" id="mail" name="email" class="data">
							<br>
							<label for="phone">phone</label>
							<br>
							<input type="number" id="phone" name="night_phone_a" maxlength="10" class="data">
							<br>
							<input type="submit" class="main_button" name="submit" value="¡Quiero mi gatito!">
						</form>```

<label for="name">Nombre</label><br>
                <input type="text" name="first_name" value="John" class="data"><br>
                <label for="email">Email</label><br>
                <input type="email" name="email" value="jdoe@zyzzyu.com" class="data"><br>
                <label for="phone">Telefono</label><br>
                <input type="number" name="night_phone_a" value="610" class="data"><br>
                <input type="submit" value="Confirmar Pago" name="submit" class="main-btn">```

Una vez hecho esto, para testarlo, asegúrense de poner en los datos un correo que SI tenga cuenta creada con PayPal (puede ser la propia que usaron para crear la cuenta en PayPal) de esta forma se validará la información y mostrará las opciones necesarias para seguir. De otro modo seguirá mostrando la opción de Crear Cuenta.

<form action="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GLHY3ENHGAGPU" method="POST">
    <label for="name">Nombre</label>
    <input type="text" name="name" class="data">
    <br>
    <br>
    <label for="email">E-Mail</label>
    <input type="text" name="email" class="data">
    <br>
    <br>
    <label for="phone">Teléfono</label>
    <input type="text" name="phone" class="data">

    <input type="submit" value="Confirmar Pago" class="main_button">
</form>

Autofill del formulario de PayPal

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework