Categorías

Feed RSS

Miércoles, 17 de febrero de 2010

Cómo utilizar PayPal para realizar compras en tu web

Categoría: XHTML

Vamos a explicar cómo llamar al API de PayPal para realizar pagos en tu página web. En primer lugar deberemos crear una cuenta como desarrollador de PayPal Sandbox (https://developer.paypal.com/) que usaremos para verificar que lo hacemos de manera correcta antes de hacerlo funcionar en nuestra página web.

Tras hacerla y meternos en nuestra cuenta de desarrollador, deberemos seleccionar la opción Create a preconfigured buyer or seller account donde rellenaremos con nuestros datos el formulario teniendo en cuenta que debe ser una cuenta de vendedor.

Una vez creada, entraremos a nuestro listado de cuentas de PayPal Sandbox. Estas cuentas no son cuentas reales de PayPal y sólo funcionarán dentro de su Sandbox. Para entrar en ella pulsaremos el botón de Enter Sandbox Test Site y podremos introducir el usuario y contraseña para esta cuenta de prueba. Una vez dentro podemos observar que es como si fuera una cuenta de PayPal pero los pagos que se hagan a ella no serán reales.

Ejemplo de pago con el API de PayPal

Para realizar el pago utilizaremos un documento HTML en el que le pasaremos los parámetros que PayPal necesita (importe, código de venta, etc.) y otros opcionales como los datos del usuario que compra para que le aparezcan rellenados en el formulario de pago. Un ejemplo sería el siguiente:

<html>

<head>

<title>Ejemplo de pago mediante la API de PayPal</title>

</head>

<body>

<form name='formTpv' method='post' action='https://www.sandbox.paypal.com/cgi-bin/webscr'>

	<input type='hidden' name='cmd' value='_xclick'>
	<input type='hidden' name='business' value='mi_cuenta_sandbox@mi_pagina.com'>
	<input type='hidden' name='item_name' value='Nueva compra en mi web'>
	<input type='hidden' name='item_number' value='VENTA-X2561'>
	<input type='hidden' name='amount' value='10.15'>
	<input type='hidden' name='page_style' value='primary'>
	<input type='hidden' name='no_shipping' value='1'>
	<input type='hidden' name='return' value='http://mi_pagina/exito.html'>
	<input type='hidden' name='rm' value='2'>
	<input type='hidden' name='cancel_return' value='http://mi_pagina/cancelada.html'>
	<input type='hidden' name='no_note' value='1'>
	<input type='hidden' name='currency_code' value='EUR'>
	<input type='hidden' name='cn' value='PP-BuyNowBF'>
	<input type='hidden' name='custom' value=''>
	<input type='hidden' name='first_name' value='NOMBRE'>
	<input type='hidden' name='last_name' value='APELLIDOS'>
	<input type='hidden' name='address1' value='DIRECCIÓN'>
	<input type='hidden' name='city' value='POBLACIÓN'>
	<input type='hidden' name='zip' value='CÓDIGO POSTAL'>
	<input type='hidden' name='night_phone_a' value=''>
	<input type='hidden' name='night_phone_b' value='TELÉFONO'>
	<input type='hidden' name='night_phone_c' value=''>
	<input type='hidden' name='lc' value='es'>
	<input type='hidden' name='country' value='ES'>
</form>
<script type='text/javascript'>
	document.formTpv.submit();
</script>

</body>

</html>

La dirección de llamada del formulario de pruebas es https://www.sandbox.paypal.com/cgi-bin/webscr pero al pasar a ventas reales deberemos indicar https://www.paypal.com/cgi-bin/webscr

Como podemos ver, existente multitud de parámetros en el formulario que son fáciles de ver cuales son su propósito (nombre, dirección, etc.). A continuación detallamos los más importantes o que podemos tener duda de qué son realmente:

business: indicaremos la cuenta de PayPal asociada al vendedor. Mientras estemos de pruebas indicaremos la cuenta de pruebas del Sandbox, pero para ventas reales deberemos indicar nuestra cuenta de vendedor.
item_name: título que aparecerá en la pantalla de pago.
item_number: código de la venta, actuará como identificador único de cada venta.
amount: importe a pagar, donde si hay decimales no podrán indicarse con una coma ni con más de dos números.
return: página de vuelta a nuestra web indicando éxito en el pago.
cancel_return: página de vuelta a nuestra web indicando que no se realizó el pago por que el usuario lo canceló.
currency_code: código de la moneda usada en el pago. Para el caso del euro es EUR.
lc: idioma de la pantalla de pago.
country: código ISO del país del cliente.

Enviado por Imaginanet a las 9:32

0 comentarios

Media de 4,0 puntos / 1 votos

Miércoles, 10 de febrero de 2010

Usando AJAX: Un simple ejemplo con PHP y jQuery.

Categoría: jQuery Ajax

Descrito de una manera muy resumida, AJAX es una tecnología que nos permite realizar acciones en una página web que necesiten respuesta del servidor sin recargarla. Con ello conseguimos que nuestra web sea dinámica y por tanto obtener un diseño más atractivo. Algunos ejemplos de lo que podemos hacer:

Un enlace que compruebe si un valor existe ya en una base de datos.
Completar un campo de texto de búsqueda con valores sugeridos por nuestra web.
Un chat web
etc.

En este artículo vamos a describir como realizar una sencilla llamada AJAX a una fichero externo que ejecutará un proceso (una suma entre dos valores enviados mediante POST) y nos devolverá la salida correspondiente apoyándonos con la librería jQuery, que aunque no es necesario su uso, lo haremos sobre ella para aprovechar la potencia que nos proporciona. Se podría decir que es el típico Hola mundo en AJAX.

El código se compone de dos archivos: un archivo donde mostraremos los formularios con datos de entrada y otro con el archivo de procesamiento.

A continuación mostramos el código del fichero de entrada de datos (habrá que tener cuidado con escribir correctamente la ruta a la librería jQuery):

<html>

<head>

<title>Ejemplo sencillo de AJAX</title>

<script type="text/javascript" src="/js/jquery.js"></script>

<script>
function realizaProceso(valorCaja1, valorCaja2){
        var parametros = {
                "valorCaja1" : valorCaja1,
                "valorCaja2" : valorCaja2
        };
        $.ajax({
                data:  parametros,
                url:   'ejemplo_ajax_proceso.php',
                type:  'post',
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) {
                        $("#resultado").html(response);
                }
        });
}
</script>

</head>

<body>

Introduce valor 1

<input type="text" name="caja_texto" id="valor1" value="0"/> 


Introduce valor 2

<input type="text" name="caja_texto" id="valor2" value="0"/>

Realiza suma

<input type="button" href="javascript:;" onclick="realizaProceso($('#valor1').val(), $('#valor2').val());return false;" value="Calcula"/>

<br/>

Resultado: <span id="resultado">0</span>

</body>

</html>

En este código, utilizamos los id de las cajas de texto para pasarle sus valores a la función realizaProceso. En esta función recogemos los valores de entrada en un array parametros y enviamos mediante AJAX especificando el parámetro data (datos que mandamos), url (dirección del archivo de proceso) y type (POST o GET).

Por último vemos que tenemos dos eventos: beforeSend y success donde podemos indicar la acción a realizar mientras se procesan los datos y tras terminar de procesarlos (en este caso jugar con el contenido HTML del id resultado).

Ahora vemos el archivo de procesamiento de datos (ejemplo_ajax_proceso.php) que únicamente suma los datos recibidos por POST:

<?php 
$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2']; 
echo $resultado;
?>

Enviado por Imaginanet a las 10:48

0 comentarios

Media de 0,0 puntos / 0 votos

Sábado, 6 de febrero de 2010

Crear plugins de jquery

Categoría: JavaScript jQuery

Jquery es una de las bibliocas javascript más simples e utilizadas. Crear plugins para esta biblioteca es muy sencillo. Vamos a ver los pasos necesarios:

Primero tenemos que incluir la biblioteca jquery en la cabecera. Nos la descargamos desde su web y la añadimos de la siguiente forma:
```
			
		
```
Luego creamos nuestro archivo del plugin, que luego también tendremos que añadirlo en la cabecera para utilizarlo.
```
			$.fn.duplicar = function () {
				this.each(function () {
					var html = "
"+$(this).html();
					$(this).append(html);
				});
			}
		
```
Lo que hace este plugin es duplicar el contenido de los elementos seleccionados.
$.fn es el objeto de jquery que contiene las funciones que nosotros le definimos. Dentro del código de la función, el this es un array con los elementos seleccionados con jquery. Con la función each, recorremos ese array.
Para utilizarlo:
```
			$("div.doble").duplicar();
		
```
Así duplicaríamos el contenido de todos los divs con la clase "doble"

Éste es un ejemplo muy básico. Para más información sólo hay que pasarse por la web de jquery la cual tiene una bastante buena documentación.

Enviado por Imaginanet a las 21:09

0 comentarios

Media de 4,0 puntos / 2 votos

Sábado, 6 de febrero de 2010

Display inline-block e internet explorer.

Categoría: XHTML CSS Internet Explorer Navegadores

La propiedad display de css (en la versión 2.1), puede contener un valor muy interesante, inline-block. Con este valor conseguimos que el elemento con esa propiedad se comporte como una caja, pero mostrandose en la misma línea, como si tuviese display: inline.

¿Y esto de qué nos sirve?, pues si no usamos esta propiedad tendríamos que añadirle a la caja un "float: left", por ejemplo, pero esto trae unas consecuencias, a veces, muy molestas. Por ejemplo, si queremos mostrar contenido dividido en cajas y que se muestren filas de 3 cajas, si éstas varían con la altura, pasaría esto:

Esto pasa porque al tener "float:left", las cajas "buscan" el primer espacio disponible a su izquierda. Ésto podría solucionarse desde el html, añadiendo cada tres cajas un elemento que tenga la propiedad "clear:both". Pero si queremos que el número de cajas por fila varíe dependiendo de la anchura de nuestra ventana del navegador, ya no valdría esta solución. Además si usamos la propiedad "display: inline-block", podemos alinear las cajas arriba, abajo, al centro , con tan solo cambiar la propiedad vertical-align. Si ponemos "vertical-align:top", tendremos esto:

Hacks para conseguir "display: inline-block" en internet explorer 6 y 7

Nuestros amigos Ie6 e Ie7, como siempre, mostrandonos su tecnología punta (recordemos que ésto es CSS 2.1), no implementan esta propiedad completamente.

De todas formas es muy sencillo hacerlo funcionar con un pequeño truco. En vez de usar "display: inline-block", tendríamos que ponerles "display: inline" y añadirles la propiedad "zoom:1"

	div.block {
		display: inline-block;
		#display: inline-block;
		_display: inline;
		zoom: 1;
	}

La "#" es un hack para que solo aplique esa propiedad IE7 y el "_" para IE6. La propiedad zoom solo la cojeran esos 2 navegadores, puesto que no es estándar, haciendo que el elemento se comporte como una caja.

Ver ejemplo en funcionamiento.

Enviado por Imaginanet a las 19:41

0 comentarios

Media de 4,5 puntos / 2 votos

Jueves, 28 de enero de 2010

HTML 5 y el famoso tag "video"

Categoría: HTML5 Navegadores

HTML5 ha llegado, y aunque sea pronto para que el usuario pueda disfrutar de todo su potencial, los programadores hace ya unos meses que podemos ir viendo como serán las webs de dentro de unos años.

El tag <video/> es el que más revuelo está teniendo, y no solo por su integración en sitios como Youtube o Vimeo, sinó por los estándares soportados por cada navegador.

Mozilla se ha puesto firme al respecto y ha anunciado que no piensa incluir el estandar h264, ya que este no es un codec abierto y existen otros que si lo son y pueden ofrecer mejor calidad.
Esto nos deja en una situación en la que los navegadores web que actualmente soportan el tag de HTML5:

•Presto/Opera: HTML5 mediante GStreamer (incluye sólo Ogg/Theora).
•WebKit/Chrome: HTML5 mediante ffmpeg (Ogg/Theora y H.264/MP4).
•Gecko/Firefox: HTML5 con Ogg/Theora.
•WebKit/Epiphany: HTML5 mediante GStreamer (Ogg/Theora garantizado).
•WebKit/Safari: HTML5 mediante QuickTime (H.264/MOV/M4V, puede reproducir Ogg/Theora con XiphQT components).

Nos encontramos frente a una guerra en la que empresas como Apple y Microsoft, forman parte de la MPEG-LA, empresa que tiene la patente del codec h264, frente a Mozilla (por el momento) que se ha posicionado en contra de usar una tecnología propietaria que condicione la red.

Por su parte, Youtube no da su brazo a torcer. A pesar de que hay decenas de peticiones y de comentarios pidiendo el soporte de Ogg Theora, no sueltan prenda al respecto.

Enviado por Imaginanet a las 8:27

0 comentarios

Media de 4,4 puntos / 5 votos

Página siguiente >

Loguéate
E-mail
Contraseña

Regístrate
Nombre
E-mail
Contraseña