Empecemos el tutorial de pasarela de pago.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Paso 1<\/strong>: Comenzamos creando un plugin<\/p>\n\n\n\n En caso de que no lo sepas, los m\u00e9todos de pago personalizados son simplemente plugins. Por lo tanto, tenemos que crear uno.<\/p>\n\n\n\n Para crear un plugin solo necesitas crear un archivo y agregar un par de l\u00edneas de c\u00f3digo dentro de \u00e9l.<\/p>\n\n\n\n As\u00ed que, en la carpeta \/plugins, cre\u00e9 un archivo llamado misha-gateway.php y agregu\u00e9 el siguiente c\u00f3digo all\u00ed. En caso de que tu plugin tenga m\u00e1s de un archivo, col\u00f3calo en una carpeta con el mismo nombre, por ejemplo: misha-gateway\/misha-gateway.php.<\/p>\n\n\n\n Una vez que lo hayas hecho, \u00a1el plugin aparecer\u00e1 en tu \u00e1rea de administraci\u00f3n! E incluso puedes activarlo.<\/p>\n\n\n\n Paso 2: Las pasarelas de pago son clases de PHP. Aqu\u00ed est\u00e1 el esqueleto de la clase.<\/p>\n\n\n\n As\u00ed que tenemos que crear una clase PHP personalizada para extender la clase WC_Payment_Gateway de WooCommerce.<\/p>\n\n\n\n Cada m\u00e9todo de clase se describe a continuaci\u00f3n. Puedes comenzar copiando y pegando el siguiente c\u00f3digo en tu archivo principal del plugin.<\/p>\n\n\n\n Si insertas el c\u00f3digo anterior “tal cual” en tu archivo del plugin, obtendr\u00e1s un error 500, porque este c\u00f3digo simplemente muestra la estructura de la clase del plugin, donde cada m\u00e9todo deber\u00eda estar.<\/p>\n\n\n\n Paso 3: Opciones del Plugin de la Pasarela de Pago<\/p>\n\n\n\n En el constructor de la clase:<\/p>\n\n\n\n Tambi\u00e9n podemos registrar webhooks de la pasarela de pago en el constructor de la clase.<\/p>\n\n\n\n Paso 4: Formulario de Pago Directo<\/p>\n\n\n\n Antes de implementar el c\u00f3digo a continuaci\u00f3n, por favor lee estos puntos clave:<\/p>\n\n\n\n 4.1. Agregar scripts en cola<\/p>\n\n\n\n En el Paso 2 ya hemos agregado el gancho de acci\u00f3n wp_enqueue_scripts y conectado el m\u00e9todo payment_scripts() a \u00e9l.<\/p>\n\n\n\n 4.2. Obtener un token en JavaScript<\/p>\n\n\n\n Antes que nada, quiero decir que para cada procesador de pagos, este c\u00f3digo podr\u00eda ser diferente, pero la idea principal es la misma. Aqu\u00ed est\u00e1 el contenido de tu archivo misha.js:<\/p>\n\n\n\n 4.3. Formulario con datos de la tarjeta<\/p>\n\n\n\n Con el m\u00e9todo payment_fields() de la clase, puedes crear un formulario de pago con los campos de la tarjeta de cr\u00e9dito de esta manera:<\/p>\n\n\n\n Paso 5: Procesar pagos<\/p>\n\n\n\n 5.1. Validar campos<\/p>\n\n\n\n S\u00e9 que los campos de la p\u00e1gina de pago, como el nombre, deben validarse antes, pero esto es solo un ejemplo:<\/p>\n\n\n\n 5.2. Capturar pagos con la API y establecer el estado del pedido<\/p>\n\n\n\n Prep\u00e1rate para mucho texto \ud83d\ude43<\/p>\n\n\n\n Eso es! Si sigues este tutorial paso a paso, deber\u00edas obtener tu pasarela de pago personalizada y funcional. Toma en cuenta que este es solo un ejemplo y, en realidad, puede haber m\u00e1s desaf\u00edos durante el proceso de desarrollo. Tambi\u00e9n recuerda que el c\u00f3digo del procesador de pagos real puede ser diferente, y necesitar\u00e1s adaptarlo en consecuencia.<\/p>\n\n\n\n Espero que esto te ayude a crear tu propia pasarela de pago personalizada para WooCommerce. \u00a1Buena suerte en tu proyecto! Si tienes alguna pregunta o necesitas m\u00e1s ayuda, no dudes en preguntar. \u00a1Feliz desarrollo!<\/p>\n\n\n\n Tomado en parte de: https:\/\/rudrastyh.com\/woocommerce\/payment-gateway-plugin.html<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Empecemos el tutorial de pasarela de pago. Paso 1: Comenzamos creando un plugin En caso de que no lo sepas, los m\u00e9todos de pago personalizados son simplemente plugins. Por lo tanto, tenemos que crear uno. Para crear un plugin solo necesitas crear un archivo y agregar un par de l\u00edneas de c\u00f3digo dentro de \u00e9l. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-woocommerce"],"_links":{"self":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":3,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<?php
\/*
* Plugin Name: WooCommerce Custom Payment Gateway
* Plugin URI: https:\/\/rudrastyh.com\/woocommerce\/payment-gateway-plugin.html
* Description: Acepta pagos con tarjeta de cr\u00e9dito en tu tienda.
* Author: Misha Rudrastyh
* Author URI: http:\/\/rudrastyh.com
* Version: 1.0.1
*\/
<\/code><\/pre>\n\n\n\n\/*\n * Este gancho de acci\u00f3n registra nuestra clase PHP como una pasarela de pago de WooCommerce\n *\/\nadd_filter( 'woocommerce_payment_gateways', 'misha_add_gateway_class' );\nfunction misha_add_gateway_class( $gateways ) {\n\t$gateways[] = 'WC_Misha_Gateway'; \/\/ aqu\u00ed va el nombre de tu clase\n\treturn $gateways;\n}\n\n\/*\n * La propia clase, ten en cuenta que est\u00e1 dentro del gancho de acci\u00f3n plugins_loaded\n *\/\nadd_action( 'plugins_loaded', 'misha_init_gateway_class' );\nfunction misha_init_gateway_class() {\n\n\tclass WC_Misha_Gateway extends WC_Payment_Gateway {\n\n\t\t\/**\n\t\t * Constructor de la clase, m\u00e1s sobre esto en el Paso 3\n\t\t *\/\n\t\tpublic function __construct() {\n\n\t\t...\n\n\t\t}\n\n\t\t\/**\n\t\t * Opciones del plugin, las veremos en el Paso 3 tambi\u00e9n\n\t\t *\/\n\t\tpublic function init_form_fields(){\n\n\t\t...\n\t\n\t\t}\n\n\t\t\/**\n\t\t * Lo necesitar\u00e1s si deseas tu propio formulario personalizado para la tarjeta de cr\u00e9dito, el Paso 4 trata sobre esto\n\t\t *\/\n\t\tpublic function payment_fields() {\n\n\t\t...\n\t\t\t\t \n\t\t}\n\n\t\t\/*\n\t\t * CSS y JS personalizados, generalmente solo se requieren cuando decides tener un formulario personalizado para la tarjeta de cr\u00e9dito\n\t\t *\/\n\t\tpublic function payment_scripts() {\n\n\t\t...\n\t\n\t\t}\n\n\t\t\/*\n\t\t * Validaci\u00f3n de campos, m\u00e1s en el Paso 5\n\t\t *\/\n\t\tpublic function validate_fields() {\n\n\t\t...\n\n\t\t}\n\n\t\t\/*\n\t\t * Aqu\u00ed procesamos los pagos, todo sobre esto en el Paso 5\n\t\t *\/\n\t\tpublic function process_payment( $order_id ) {\n\n\t\t...\n\t\t\t\t\t\n\t\t}\n\n\t\t\/*\n\t\t * En caso de que necesites un webhook, como PayPal IPN, etc.\n\t\t *\/\n\t\tpublic function webhook() {\n\n\t\t...\n\t\t\t\t\t\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n\n
public function __construct() {\n\n\t$this->id = 'misha'; \/\/ ID del plugin de la pasarela de pago\n\t$this->icon = ''; \/\/ URL del icono que se mostrar\u00e1 en la p\u00e1gina de pago junto al nombre de tu pasarela\n\t$this->has_fields = true; \/\/ en caso de que necesites un formulario personalizado para la tarjeta de cr\u00e9dito\n\t$this->method_title = 'Misha Gateway';\n\t$this->method_description = 'Descripci\u00f3n de la pasarela de pago Misha'; \/\/ se mostrar\u00e1 en la p\u00e1gina de opciones\n\n\t\/\/ las pasarelas pueden admitir suscripciones, reembolsos, m\u00e9todos de pago guardados,\n\t\/\/ pero en este tutorial comenzaremos con pagos simples\n\t$this->supports = array(\n\t\t'products'\n\t);\n\n\t\/\/ M\u00e9todo con todos los campos de opciones\n\t$this->init_form_fields();\n\n\t\/\/ Cargar las configuraciones.\n\t$this->init_settings();\n\t$this->title = $this->get_option( 'title' );\n\t$this->description = $this->get_option( 'description' );\n\t$this->enabled = $this->get_option( 'enabled' );\n\t$this->testmode = 'yes' === $this->get_option( 'testmode' );\n\t$this->private_key = $this->testmode ? $this->get_option( 'test_private_key' ) : $this->get_option( 'private_key' );\n\t$this->publishable_key = $this->testmode ? $this->get_option( 'test_publishable_key' ) : $this->get_option( 'publishable_key' );\n\n\t\/\/ Este gancho de acci\u00f3n guarda las configuraciones\n\tadd_action( 'woocommerce_update_options_payment_gateways_' . $this->id, array( $this, 'process_admin_options' ) );\n\n\t\/\/ Necesitamos JavaScript personalizado para obtener un token\n\tadd_action( 'wp_enqueue_scripts', array( $this, 'payment_scripts' ) );\n\t\n\t\/\/ Tambi\u00e9n puedes registrar un webhook aqu\u00ed\n\t\/\/ add_action( 'woocommerce_api_{nombre_del_webhook}', array( $this, 'webhook' ) );\n}\n\npublic function init_form_fields(){\n\n\t$this->form_fields = array(\n\t\t'enabled' => array(\n\t\t\t'title' => 'Habilitar\/Deshabilitar',\n\t\t\t'label' => 'Habilitar Pasarela Misha',\n\t\t\t'type' => 'checkbox',\n\t\t\t'description' => '',\n\t\t\t'default' => 'no'\n\t\t),\n\t\t'title' => array(\n\t\t\t'title' => 'T\u00edtulo',\n\t\t\t'type' => 'text',\n\t\t\t'description' => 'Esto controla el t\u00edtulo que el usuario ve durante el proceso de pago.',\n\t\t\t'default' => 'Tarjeta de cr\u00e9dito',\n\t\t\t'desc_tip' => true,\n\t\t),\n\t\t'description' => array(\n\t\t\t'title' => 'Descripci\u00f3n',\n\t\t\t'type' => 'textarea',\n\t\t\t'description' => 'Esto controla la descripci\u00f3n que el usuario ve durante el proceso de pago.',\n\t\t\t'default' => 'Paga con tu tarjeta de cr\u00e9dito a trav\u00e9s de nuestra s\u00faper genial pasarela de pago.',\n\t\t),\n\t\t'testmode' => array(\n\t\t\t'title' => 'Modo de prueba',\n\t\t\t'label' => 'Habilitar modo de prueba',\n\t\t\t'type' => 'checkbox',\n\t\t\t'description' => 'Activar el modo de prueba usando claves API de prueba.',\n\t\t\t'default' => 'yes',\n\t\t\t'desc_tip' => true,\n\t\t),\n\t\t'test_publishable_key' => array(\n\t\t\t'title' => 'Clave p\u00fablica de prueba',\n\t\t\t'type' => 'text'\n\t\t),\n\t\t'test_private_key' => array(\n\t\t\t'title' => 'Clave privada de prueba',\n\t\t\t'type' => 'password',\n\t\t),\n\t\t'publishable_key' => array(\n\t\t\t'title' => 'Clave p\u00fablica en vivo',\n\t\t\t'type' => 'text'\n\t\t),\n\t\t'private_key' => array(\n\t\t\t'title' => 'Clave privada en vivo',\n\t\t\t'type' => 'password'\n\t\t)\n\t);\n}\n\n<\/code><\/pre>\n\n\n\n\n
\n
public function payment_scripts() {\n\n\t\/\/ solo necesitamos JavaScript para procesar un token en las p\u00e1ginas de carrito y pago, \u00bfverdad?\n\tif ( ! is_cart() && ! is_checkout() && ! isset( $_GET['pay_for_order'] ) ) {\n\t\treturn;\n\t}\n\n\t\/\/ si nuestra pasarela de pago est\u00e1 deshabilitada, tampoco tenemos que encolar JS\n\tif ( 'no' === $this->enabled ) {\n\t\treturn;\n\t}\n\n\t\/\/ no es necesario trabajar con los detalles de la tarjeta sin SSL a menos que tu sitio web est\u00e9 en modo de prueba\n\tif ( ! $this->testmode && ! is_ssl() ) {\n\t\treturn;\n\t}\n\n\t\/\/ supongamos que es nuestro JavaScript del procesador de pagos que permite obtener un token\n\twp_enqueue_script( 'misha_js', 'https:\/\/www.mishapayments.com\/api\/token.js' );\n\n\t\/\/ y este es nuestro JS personalizado en el directorio de tu plugin que funciona con token.js\n\twp_register_script( 'woocommerce_misha', plugins_url( 'misha.js', __FILE__ ), array( 'jquery', 'misha_js' ) );\n\n\t\/\/ en la mayor\u00eda de los procesadores de pagos, tienes que usar la CLAVE P\u00daBLICA para obtener un token\n\twp_localize_script( 'woocommerce_misha', 'misha_params', array(\n\t\t'publishableKey' => $this->publishable_key\n\t) );\n\n\twp_enqueue_script( 'woocommerce_misha' );\n\n}\n\n<\/code><\/pre>\n\n\n\nvar successCallback = function(data) {\n\n\tvar checkout_form = $( 'form.woocommerce-checkout' );\n\n\t\/\/ agregar un token a nuestro campo de entrada oculto\n\t\/\/ console.log(data) para encontrar el token\n\tcheckout_form.find('#misha_token').val(data.token);\n\n\t\/\/ desactivar el evento checkout_place_order\n\tcheckout_form.off( 'checkout_place_order', tokenRequest );\n\n\t\/\/ enviar el formulario ahora\n\tcheckout_form.submit();\n\n};\n\nvar errorCallback = function(data) {\n console.log(data);\n};\n\nvar tokenRequest = function() {\n\n\t\/\/ aqu\u00ed estar\u00e1 la funci\u00f3n de la pasarela de pago que procesa todos los datos de la tarjeta desde tu formulario,\n\t\/\/ tal vez necesite tu Clave API p\u00fablica que est\u00e1 en misha_params.publishableKey\n\t\/\/ y activa successCallback() en caso de \u00e9xito y errorCallback en caso de error\n\treturn false;\n\t\t\n};\n\njQuery(function($){\n\n\tvar checkout_form = $( 'form.woocommerce-checkout' );\n\tcheckout_form.on( 'checkout_place_order', tokenRequest );\n\n});\n\n<\/code><\/pre>\n\n\n\npublic function payment_fields() {\n \n\t\/\/ bien, vamos a mostrar una descripci\u00f3n antes del formulario de pago\n\tif ( $this->description ) {\n\t\t\/\/ puedes agregar instrucciones para el modo de prueba, es decir, n\u00fameros de tarjetas de prueba, etc.\n\t\tif ( $this->testmode ) {\n\t\t\t$this->description .= ' MODO DE PRUEBA HABILITADO. En el modo de prueba, puedes usar los n\u00fameros de tarjeta enumerados en la <a href=\"#\">documentaci\u00f3n<\/a>.';\n\t\t\t$this->description = trim( $this->description );\n\t\t}\n\t\t\/\/ mostrar la descripci\u00f3n con etiquetas <p> etc.\n\t\techo wpautop( wp_kses_post( $this->description ) );\n\t}\n \n\t\/\/ Voy a usar echo() para mostrar el formulario, pero puedes cerrar las etiquetas PHP y mostrarlo directamente en HTML\n\techo '<fieldset id=\"wc-' . esc_attr( $this->id ) . '-cc-form\" class=\"wc-credit-card-form wc-payment-form\" style=\"background:transparent;\">';\n \n\t\/\/ Agregar este gancho de acci\u00f3n si deseas que tu pasarela de pago personalizada lo admita\n\tdo_action( 'woocommerce_credit_card_form_start', $this->id );\n \n\t\/\/ Recomiendo usar IDs \u00fanicos, porque otras pasarelas podr\u00edan estar usando #ccNo, #expdate, #cvc\n\techo '<div class=\"form-row form-row-wide\"><label>N\u00famero de tarjeta <span class=\"required\">*<\/span><\/label>\n\t\t<input id=\"misha_ccNo\" type=\"text\" autocomplete=\"off\">\n\t\t<\/div>\n\t\t<div class=\"form-row form-row-first\">\n\t\t\t<label>Fecha de vencimiento <span class=\"required\">*<\/span><\/label>\n\t\t\t<input id=\"misha_expdate\" type=\"text\" autocomplete=\"off\" placeholder=\"MM \/ AA\">\n\t\t<\/div>\n\t\t<div class=\"form-row form-row-last\">\n\t\t\t<label>C\u00f3digo de tarjeta (CVC) <span class=\"required\">*<\/span><\/label>\n\t\t\t<input id=\"misha_cvv\" type=\"password\" autocomplete=\"off\" placeholder=\"CVC\">\n\t\t<\/div>\n\t\t<div class=\"clear\"><\/div>';\n \n\tdo_action( 'woocommerce_credit_card_form_end', $this->id );\n \n\techo '<div class=\"clear\"><\/div><\/fieldset>';\n \n}\n\n<\/code><\/pre>\n\n\n\npublic function validate_fields(){\n \n\tif( empty( $_POST[ 'billing_first_name' ]) ) {\n\t\twc_add_notice( '\u00a1Se requiere el nombre!', 'error' );\n\t\treturn false;\n\t}\n\treturn true;\n \n}\n<\/code><\/pre>\n\n\n\n\n
public function process_payment( $order_id ) {\n\n\tglobal $woocommerce;\n\n\t$order = wc_get_order( $order_id );\n\n\t\/\/ no dudes en agregar cualquier tipo de datos personalizados aqu\u00ed\n\t\/\/ no estoy seguro de cu\u00e1l es mejor - obtener el nombre desde el objeto de pedido o desde la matriz $_POST\n\t$customer_first_name = $_POST[ 'billing_first_name' ];\n\t$customer_country = $order->get_billing_country();\n\t$customer_address = $order->get_billing_address_1();\n\n\t\/\/ URL de la pasarela de pago (ejemplo)\n\t$url = 'https:\/\/example.com\/api\/charge';\n\n\t\/\/ Datos que enviaremos a la pasarela de pago\n\t$data = array(\n\t\t'customer_name' => $customer_first_name,\n\t\t'customer_country' => $customer_country,\n\t\t'customer_address' => $customer_address,\n\t\t'amount' => $order->get_total(),\n\t\t'token' => $_POST[ 'misha_token' ]\n\t);\n\n\t\/\/ Aqu\u00ed enviamos una solicitud a la pasarela de pago\n\t$response = wp_remote_post( $url, array(\n\t\t'method' => 'POST',\n\t\t'timeout' => 90,\n\t\t'sslverify' => true,\n\t\t'headers' => array(\n\t\t\t'Authorization' => 'Basic ' . base64_encode( $this->private_key . ':' ) \/\/ Otra opci\u00f3n: 'api_key' => $this->private_key,\n\t\t),\n\t\t'body' => $data\n\t) );\n\n\tif ( is_wp_error( $response ) ) {\n\t\tthrow new Exception( __( 'Hubo un error al procesar su pago. Int\u00e9ntelo de nuevo.', 'misha' ) );\n\t}\n\n\tif ( 200 != wp_remote_retrieve_response_code( $response ) ) {\n\t\tthrow new Exception( __( 'Hubo un error al procesar su pago. Int\u00e9ntelo de nuevo.', 'misha' ) );\n\t}\n\n\t$response = json_decode( wp_remote_retrieve_body( $response ) );\n\n\t\/\/ Si la respuesta de la pasarela de pago es correcta, actualizamos el estado del pedido a \"completado\"\n\tif ( 'succeeded' === $response->status ) {\n\n\t\t\/\/ pagar el pedido (aqu\u00ed y despu\u00e9s de actualizar el estado del pedido)\n\t\t$order->payment_complete();\n\n\t\t\/\/ a\u00f1adir nota\n\t\t$order->add_order_note(\n\t\t\t'\u00a1Gracias por su pago! Recibimos ' . $response->amount . ' ' . $response->currency . '. ID de transacci\u00f3n: ' . $response->id\n\t\t);\n\n\t\t\/\/ quitar carrito\n\t\t$woocommerce->cart->empty_cart();\n\n\t\t\/\/ redirigir a la p\u00e1gina de confirmaci\u00f3n del pedido\n\t\treturn array(\n\t\t\t'result' => 'success',\n\t\t\t'redirect' => $this->get_return_url( $order )\n\t\t);\n\n\t} else {\n\n\t\t\/\/ agregar una nota de error, esto no se muestra al cliente\n\t\t$order->add_order_note(\n\t\t\t'ERROR: transacci\u00f3n fallida con ID de transacci\u00f3n ' . $response->id\n\t\t);\n\n\t\t\/\/ devuelve un error si el pago no se pudo procesar\n\t\tthrow new Exception( __( 'Hubo un error al procesar su pago. Int\u00e9ntelo de nuevo.', 'misha' ) );\n\n\t}\n\n}\n<\/code><\/pre>\n\n\n\n