Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Creative Coding

WordPress Y PayPal: Una Introducción

by
Read Time:17 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este tutorial recorreremos los pasos involucrados en la integración de tu cuenta de PayPal para proveer servicios de pago en un sitio basado en WordPress. Trabajaremos con Tipos de Entradas Personalizadas, crearemos un carrito de compras básico y posibilitaremos la realización de pagos a través de PayPal. Aunque el ejemplo mostrado es funcional, deberás tomar medidas adicionales para sanear y almacenar datos cuando trabajes con los pagos.


Introducción

Utilizaremos las páginas personalizadas de WP-Admin para ver los pedidos, tipos de entradas personalizadas para la creación de productos (clase sobre CPT de Jeffrey Way) y las plantillas de página personalizadas para visualizar los productos, el carrito de compra y su procesado. La base de nuestra función estará creada con PHP y aplicaremos algunos estilos básicos con CSS.

En los fragmentos de código mostrados abajo algunas etiquetas podrían haber sido eliminadas para facilitar la lectura.

Para los que se incorporan desde aquí, por favor avanzad y cobrad $200 o pasad a la etapa 2 de este tutorial y aprovechaos de los datos de muestra.


Paso 1 WP-Admin y la Estructura de la Página

PagesPagesPages

Vamos a publicar en WP-Admin las páginas que usaremos a lo largo del tutorial.

  1. Carrito
  2. Productos
  3. Gracias

Volveremos a visitar estas páginas más adelante y asignaremos a cada de ellas una una plantilla personalizada.


Paso 2 Estructura del Tema Hijo

StructureStructureStructure

Ahora vamos a crear los directorios y los archivos necesarios para nuestro proyecto.

Aquí estamos creando un tema de hijo a partir de Twenty Ten, sólo tenemos que crear los archivos que vamos a modificar o crearlos desde cero. WordPress se encargará de suministrar por nosotros cualquier otro archivo que sea necesario, por ejemplo footer.php.


Paso 3 Tipos de Entradas Personalizadas según el Método de Jeffrey Way

Vamos a trabajar usando como guía la clase de Jeffrey Way (requiere PHP 5.3) para crear un tipo de entrada personalizada de producto.
Lo que te permitirá la creación de productos, y no entradas de blog que pretendan hacerse pasar por productos, a través de WP-Admin.

Custom Post Type - ProductsCustom Post Type - ProductsCustom Post Type - Products

En el archivo /wppp/wppp/post_types.php, añade las siguientes piezas de código.

Primero incluiremos la clase.

En segundo lugar, crearemos un nuevo Tipo de Entrada Personalizada e identificaremos los componentes de la página de edición que vamos a usar.

En tercer lugar tenemos una campo específico que se adapta mejor con un campo texto propio. Precio.

Uniéndolo todo lo que obtenemos tiene el siguiente aspecto.

Paso 5 Recuperar Todos los Productos

Product listProduct listProduct list

Los Tipos de Entradas Personalizadas en WordPress son fantásticas y su implementación puede lograrse rápidamente siguiendo el método de Jeffrey. Se puede acceder muy rápidamente a los datos personalizados, de forma muy similar a la que usarías para las entradas del "loop".

Visitemos el archivo tpl/wppp-products.php y recuperemos los productos.

Se trata de una convención que WordPress nos requiere para poder crear una plantilla personalizada. Siempre que el tema activo contenga este archivo podremos asignarlo a cualquier página.

Sigue adelante y asigna esta plantilla a la página de productos publicada con anterioridad.

Structure

A continuación creamos una nueva instancia de WP_Query y buscamos
un post_type para el "producto".

Al usar WP_Query tendremos acceso a muchas de las etiquetas de plantilla de WordPress.

Todo lo que se requiere ahora es enlazar los productos y mostrar los datos de salida.

get_post_meta(); recuperará los datos almacenados en los campos personalizados, y al haber añadido una caja meta mediante la clase anterior de JW, esa es la que hay que emplear para recuperar su valor.

Observa que estamos usando "product_info_price" como segundo parámetro para get_post_meta. Éste es el nombre aplicado a nuestro campo personalizado cuando utilizamos la clase de los CPT de JW. La convención que se suele usar parece ser name-of-post-type_info_field.


Paso 6 Obtener un Solo Producto

Single productSingle productSingle product

WordPress usará la plantilla single-custom-post-type.php si existe un tipo de entrada personalizada y además existe un archivo single-custom-post-name.php en el tema activo. Esto es útil cuando se crea una nueva plantilla para los productos individuales.

Al igual que hicimos para recuperar múltiples productos, podríamos utilizar WP_Query (para realizar consultas personalizadas) y las etiquetas de plantilla que WordPress proporciona. No obstante cuando visualizamos un solo elemento, técnicamente ya no necesitamos un loop o un WP_Query personalizado.

Una adición más a nuestro archivo single-product.php, una forma que permitirá que este elemento sea añadido al carrito de compras de la sesión actual.

Se han añadido dos campos ocultos a este formulario, el primero va a almacenar el ID de la entrada (o a identificar el producto) y el otro se utilizará un poco más adelante. También se establece una cantidad predeterminada de 1 producto.


Paso 7 Añadir un Elemento A la Sesión

El botón "Añadir al carrito" reside en la página de producto como muestra en el paso anterior, después de que un usuario haya decidido añadir un producto, el formulario será enviado a la página del carrito.

Trabajemos ahora con el archivo tpl/wppp-cart.php.

tpl-cart.php es una plantilla personalizada de modo que necesitamos que WordPress la reconozca y asignarla a la página del carrito a través de WP-admin.

Ahora comprobamos si los datos adecuados de la entrada han sido enviados y si es así los almacenamos convenientemente en forma de variables.

Utilizando switch para determinar la acción actual y por consiguiente el proceso.

Para mostrar el carrito en la página, se emplea un loop para confirmar los datos de sesión.

Aunque en este loop realizamos una consulta sobre datos humanos legibles en lugar de por la representación numérica de cada producto / entrada almacenados en la sesión actual.

get_post() es perfecto para hacer esto lo que nos proporciona una forma de hacer una consulta rápida a WordPress pasandole un ID de entrada. Los datos devueltos vienen en forma de una versión anterior escalada de WP_Query y son almacenados en $row.

$row puede ahora mostrarse en la página junto con un total que muestra el precio del producto multiplicado por la cantidad.

Dentro del loop se encuentra un formulario que, por conveniencia, permitirá al usuario eliminar un elemento de su carro.

Usando el botón conmutador escrito anteriormente, una casilla de verificación que permitirá "eliminar" el producto de la sesión.


Paso 8 La Preparación para PayPal

PayPal ofrece varias formas para enviar y recuperar datos, usaremos la Notificación de Pago Instantánea o IPN.

Para que PayPal calcule y procese las transacciones, los datos pueden enviarse a través de un formulario con campos que coinciden con las nomenclaturas y las convenciones de datos que esperada y han sido establecidos por PayPal.
La guía IPN puede encontrarse en la cabecera o en los menús a pie de página de paypal.com/ipn.

Continuemos... en tpl-cart.php, bajo todo esto se añade un formulario con los requisitos mínimos esenciales para PayPal.

Consulta developer.paypal.com para obtener información sobre sandbox y el entorno de prueba.

Tras haber iniciado sesión en tu cuenta de desarrollador podrás crear cuentas de comprador y vendedor de prueba y "Entrar en el sandbox del sitio de pruebas".

Enviar el carrito a "https://www.sandbox.paypal.com/cgi-bin/webscr" permitirá el uso del entorno de prueba.

Si decides hacerlo en vivo, la dirección URL del formulario de la acción simplemente cambiaría a "https://www.paypal.com/cgi-bin/webscr".

developer.paypal.com puede proporcionar una experiencia con fallos y lenta, ten paciencia. Escribiendo este tutorial tuve que esperar a que PayPal solucionase un error propio y volver un par de horas más tarde.

De forma bastante parecida al loop de la sesión anterior, los datos se obtienen y presentan mediante una combinación de PHP puro y una función de WordPress.

Suponiendo que has enviado a PayPal el tipo de datos correcto, estos serán procesados través de IPN.

En el formulario situado sobre el nombre del producto, todas las cantidades y los precios relacionados con cada producto son enviados. PayPal realizará el cálculo esta vez de los múltiplos basados en el precio por artículo y la cantidad.

Las "Variables de transacción y notificación" según se describen en la guía IPN se han implementado como campos ocultos de un formulario de igual manera que otros tipos de variables controladas por PayPal.

Pasar una dirección de correo electrónico a la entrada con el nombre de "business" le indica a PayPal que se trata de la cuenta del vendedor. Aquí por comodidad usamos correo electrónico del actual administrador de WordPress.

business - Dirección de correo electrónico o ID de la cuenta del receptor del pago (es decir, el
vendedor). Equivalente a los valores de receiver_email (si el pago es
enviado a la cuenta principal) y el negocio indicado es el sitio Web del Pago
HTML.
- Guía IPN -

Las 3 URLs enviadas con el formulario (return, cancel_return y notify_url) permiten colocar los enlaces en el proceso de compra cuando el usuario esté visitando el carrito en paypal.com. La URL "cancel" se mostrará antes y durante la transacción, mientras que "return" se muestra después de la transacción.

Se podría decir que el campo más importante aquí es "notify_url", el cual le permite al desarrollador escuchar las instrucciones realizadas por PayPal entre bastidores conforme el usuario procesa su transacción.

Cuando PayPal envía una respuesta al archivo ipn.php que los detalles de la transacción pueden ser almacenados en una base de datos, se pueden enviar mensajes de correo electrónico y descargas presentan. Depende de usted para procesar los datos usando métodos que reflejan el tipo de producto para la venta.

Así que vamos a crear la tabla de base de datos en el archivo ipn.php y pasar a recuperar órdenes.


Paso 9 la Base de Datos

CartCartCart

Para aumentar la velocidad de ejecución se crea un campo de texto para items_ordered en donde almacenar los artículos adquiridos en cada pedido y la cantidad en forma de datos serializados. Puede ser aconsejable con un almacén vivo para normalizar las tablas de la base de datos detrás de su tienda a 4NF o considerar el uso de un tipo de mensaje personalizado al almacenar pedidos.


Paso 10 Realizar Pruebas

PayPal Developer SandboxPayPal Developer SandboxPayPal Developer Sandbox

Ahora deberías poder publicar nuevos productos, añadir un producto a la sesión del carrito, ver la sesión del carrito de compra y proceder a PayPal.

Después de que un cliente ha pagado por las mercancías en PayPal, ¿cuál es entonces? ¿Cómo podemos identificar si la transacción ha sido exitosa, que las mercancías han sido adquiridas y donde debe enviarse?

En el Paso 8 las cuentas de comprador y vendedor se destacaron para comprobar las compras.

Además, previamente "return_url" fue creado como un campo de formulario oculto dentro de tpl-cart.php, este archivo podría ser utilizado si el usuario eligiese "Volver al sitio del vendedor" después de realizar la transacción en PayPal.

Realizando un bucle sobre los datos de la entrada mostrará lo que está sucediendo.

Este bucle imprimirá cualquier dato devuelto por PayPal en la entrada. Puedes optar por usar esto para almacenar los datos, realmente no es muy práctico hacerlo así.

Para llegar a la página de agradecimiento esperamos que el usuario se haga clic en "Volver a la página web mercantil" de PayPal. En caso de que un usuario decide cerrar el navegador ¿qué entonces?

Debido a esta trampa todo lo que se debe hacer a través de tpl-thankyou.php es vaciar el carrito y mostrar el contenido como se muestra a continuación.

Luego se nos notifica de PayPal no importa lo que el usuario decide hacerlo después del pago. Esto es donde entra la "notificación" de la notificación de pago instantánea.

Cuando se envió inicialmente el formulario a PayPal "notify_url" tenía un valor. Esta le indica a PayPal que nos gustaría utilizar el archivo http://yoursite.com/wp-content/themes/wppp/ipn.php para la comunicación.

Con esto en mente podemos ahora "escuchar" a PayPal (y no el usuario) para información actualizada sobre el estado de pago y el proceso. Vamos a crear el archivo final y lo ipn.php.

El código anterior da un poco de miedo, puedes ver cómo se ha reconstruido observando el código code-sample.php sobre en PayPal.

Sin explicar el ejemplo que PayPal ha dado como guía, estamos escuchando válido o inválidas respuestas y tratamiento en consecuencia. WPDB es utilizado para almacenar cualquier dato requerido devuelto por PayPal.

Este fragmento de datos de correos y se comprueba si el elemento actual es un item_name_x que sabemos que es nuestro nombre. Los datos entonces es seriados y almacenados en una matriz.

El método insert WPDB se utiliza más adelante para enviar los datos serializados junto con otros valores a la tabla clientes.


Paso 12 Página de Pedidos en WP-Admin

OrdersOrdersOrders

Nuestro último paso consiste en crear una página de menú de WP-Admin y rellenar la página con los clientes / pedidos de datos previamente almacenados.

Usted puede decidir crear una página de órdenes más robusta para permitir la paginación, marcar cada artículo para el envío, fácil impresión de etiquetas de envío y cualquier otra cosa.

Vamos a seguir las convenciones de estilo de WordPress y crear una razonablemente bien larga lista de pedidos.

add_menu_page() es ejecutado con 6 parámetros de los 7 posibles.

  1. Título de la página
  2. Título de menú
  3. Rol de usuario
  4. Dirección URL de nuestra página de opciones. En lugar de competir para posicionar usamos la ubicación del archivo y su nombre
  5. Función para ejecutar y acceder a esta página
  6. Icono para el menú

Una parámetro opcional "menú posición" podría pasar pero vamos otra vez a no lucha con otros autores.

Anteriormente, se crea una función y dentro, algunos marcado para mostrar los pedidos. Al agregar la nueva página de menú esta función también se aprobó que manda a WordPress para ejecutar este código al ver la página de menú correspondiente.

Usando wpdb a las órdenes de salida será la etapa final.

Al enviar productos y cantidades a la base de datos se serializan los datos. Ahora es el momento de revertirlo en cada iteración con unserialize.

Un bucle anidado permite que cada línea de datos unserialized a ser dividido y se muestra como elementos de lista.

Finalmente las funciones que creó anteriormente se ejecutan utilizando la función add_action y la acción admin_menu específicamente. Para una lista completa de las acciones, visite la Referencia de la acción.


Conclusión

En este tutorial una combinación de las mejores prácticas, hacks y técnicas han demostrado mucho de los cuales estará abierto para el debate. Algún código y debate ha sido omitido en el tutorial, es concreto, additional.css y functions.php.

Se importa additional.css en la hoja de estilos para Twenty Ten (style.css) y aplica algunos estilos básicos de la visualización a través del ejemplo.

functions.php requiere que cualquier archivo para las entradas personalizadas y la visualización de los pedidos esté dentro de WP-admin. También se establece un nuevo tamaño de imagen que recorta la imagen de miniatura del producto para que coincida.

Hacemos uso de veinte diez capacidad de menú para mostrar los enlaces del menú superior de "Productos" y "Carro".

Háganos saber en los comentarios Qué opinas de esta introducción al uso de PayPal con WordPress.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.