Los lectores eligen cualquiera de las opciones anteriores, pero si quieren optar por PayPal, sigan leyendo. En este art\u00edculo, le muestro c\u00f3mo aceptar pagos con tarjeta de cr\u00e9dito mediante PayPal Payments Pro.<\/p>\n
PayPal Payments Pro acepta pagos con una soluci\u00f3n completamente personalizable. Significa que puede crear su propia forma de pago y cobrarle a su cliente. No lo redirige al sitio web de PayPal para completar la transacci\u00f3n.<\/p>\n
Tambi\u00e9n crearemos nuestro propio formulario donde un cliente ingresa los detalles de su tarjeta y puede pagar sin salir del sitio web. El usuario puede dise\u00f1ar su propia p\u00e1gina de pago y le permite ingresar los detalles de la tarjeta. As\u00ed que sin m\u00e1s demora, vamos a sumergirnos.<\/p>\n
Empezando<\/h3>\n
Antes de aceptar pagos en tiempo real, siempre se recomienda probarlo primero en el modo sandbox. Si todo funciona como se espera en la caja de arena, entonces deber\u00edamos ponerlo en marcha para evitar problemas con los pagos de los clientes. Para probar los pagos, debe tener una cuenta de zona de pruebas de PayPal. Cree su cuenta en PayPal Developer<\/a>. Despu\u00e9s de crear una cuenta, vaya a SANDBOX-> Cuentas<\/strong> en el men\u00fa del lado izquierdo y cree una cuenta comercial.<\/p>\n En el momento de redactar este art\u00edculo, PayPal Payments Pro est\u00e1 disponible en EE. UU., Reino Unido y Canad\u00e1. Significa que al crear una cuenta, debe seleccionar uno de estos pa\u00edses.<\/p>\n Una vez que tenga una cuenta comercial, debe actualizar su tipo de cuenta a ‘Business-Pro’. Debe tener su tipo de cuenta como ‘Business-Pro’ para aceptar pagos con tarjeta de cr\u00e9dito. Para actualizarlo, haga clic en el enlace ‘Actualizar a Pro’ y PayPal convertir\u00e1 su tipo de cuenta a ‘Business-Pro’.<\/p>\n A continuaci\u00f3n, haga clic en la pesta\u00f1a ‘Credenciales de API’ y obtenga sus credenciales. Necesitaremos estas credenciales en la siguiente parte de este tutorial.<\/p>\n Como dije, con PayPal Payments Pro puedes dise\u00f1ar tu propia forma de pago. Creemos un formulario de pago agradable donde el cliente ingrese sus detalles de pago. Usar\u00e9<\/a> un formulario de bonito dise\u00f1o en codepen<\/a> para este tutorial.<\/p>\n La estructura de carpetas final deber\u00eda ser la siguiente:<\/p>\n No pensar en Cree un Del mismo modo, nuestro Obtenga una copia de Ahora, cree un Dir\u00edgete al navegador y ejecuta el Ahora est\u00e1 listo con sus credenciales de API de PayPal y formulario HTML. Es hora de dinamizar las cosas. La integraci\u00f3n de una pasarela de pago no es una tarea del todo f\u00e1cil. Debe investigarlo y leer toda la documentaci\u00f3n proporcionada por el proveedor. A veces se vuelve tan confuso y, a pesar de dedicar muchas horas, no lograste tu objetivo. Lo hab\u00eda enfrentado muchas veces. Y cuando se trata de PayPal, la situaci\u00f3n se vuelve m\u00e1s compleja debido a la vasta documentaci\u00f3n de PayPal.<\/p>\n Este ya no es el caso. Omnipay<\/a> facilita la vida de nuestros desarrolladores en t\u00e9rminos de integraci\u00f3n de pasarelas de pago. Con esta biblioteca, no es necesario que lea la documentaci\u00f3n de la pasarela de pago. Solo obtenga sus credenciales de API, siga las instrucciones de Omnipay y listo. Consulte su p\u00e1gina de GitHub<\/a> para obtener m\u00e1s detalles.<\/p>\n Ejecute el siguiente comando para instalar Omnipay y la biblioteca de PayPal compatible.<\/p>\n Despu\u00e9s de instalar las bibliotecas anteriores, el siguiente c\u00f3digo ir\u00e1 dentro de su Aseg\u00farese de reemplazar PAYPAL_API_USERNAME, PAYPAL_API_PASSWORD, PAYPAL_API_SIGNATURE del marcador de posici\u00f3n con los valores reales. Ahora vaya a su navegador e intente realizar un pago con datos falsos de la tarjeta de cr\u00e9dito. Deber\u00eda recibir un mensaje de \u00e9xito junto con su ID de transacci\u00f3n. El usuario puede obtener tarjetas de cr\u00e9dito de prueba<\/a> proporcionadas por PayPal.<\/p>\n Una vez que haya completado las pruebas de la zona de pruebas, pase las credenciales activas para los marcadores de posici\u00f3n utilizados en un c\u00f3digo. Tambi\u00e9n debe pasar el valor ‘falso’ al Se trata de aceptar pagos con tarjeta de cr\u00e9dito mediante PayPal Payments Pro en PHP. Espero que le ayude a integrar una soluci\u00f3n de pago para su sitio web. Pruebe este tutorial y d\u00e9jeme saber sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n![\"Acepte](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20129-6081c034cf341.png\")
<\/a><\/p>\n![\"Acepte](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20129-6081c0355f78e.png\")
<\/a><\/p>\nFormulario de pago personalizable<\/h3>\n
<\/a><\/p>\nvendor<\/code>, charge.php<\/code>, composer.json<\/code>, composer.lock<\/code>por ahora. Lo crearemos en la parte posterior.<\/p>\ncss\/card.css<\/code>archivo y agregue el c\u00f3digo a continuaci\u00f3n como se proporciona en codepen<\/a>.<\/p>\n@import url(https:\/\/fonts.googleapis.com\/css?family=Roboto:400,900,700,500);\n\u00a0\nbody {\n\u00a0\u00a0padding: 60px 0;\n\u00a0\u00a0background-color: rgba(178,209,229,0.7);\n\u00a0\u00a0margin: 0 auto;\n\u00a0\u00a0width: 600px;\n}\n.body-text {\n\u00a0\u00a0padding: 0 20px 30px 20px;\n\u00a0\u00a0font-family: \"Roboto\";\n\u00a0\u00a0font-size: 1em;\n\u00a0\u00a0color: #333;\n\u00a0\u00a0text-align: center;\n\u00a0\u00a0line-height: 1.2em;\n}\n.form-container {\n\u00a0\u00a0flex-direction: column;\n\u00a0\u00a0justify-content: center;\n\u00a0\u00a0align-items: center;\n}\n.card-wrapper {\n\u00a0\u00a0background-color: #6FB7E9;\n\u00a0\u00a0width: 100%;\n\u00a0\u00a0display: flex;\n\u00a0\n}\n.personal-information {\n\u00a0\u00a0background-color: #3C8DC5;\n\u00a0\u00a0color: #fff;\n\u00a0\u00a0padding: 1px 0;\n\u00a0\u00a0text-align: center;\n}\nh1 {\n\u00a0\u00a0font-size: 1.3em;\n\u00a0\u00a0font-family: \"Roboto\"\n}\ninput {\n\u00a0\u00a0margin: 1px 0;\n\u00a0\u00a0padding-left: 3%;\n\u00a0\u00a0font-size: 14px;\n}\ninput[type=\"text\"]{\n\u00a0\u00a0display: block;\n\u00a0\u00a0height: 50px;\n\u00a0\u00a0width: 97%;\n\u00a0\u00a0border: none;\n}\ninput[type=\"email\"]{\n\u00a0\u00a0display: block;\n\u00a0\u00a0height: 50px;\n\u00a0\u00a0width: 97%;\n\u00a0\u00a0border: none;\n}\ninput[type=\"submit\"]{\n\u00a0\u00a0display: block;\n\u00a0\u00a0height: 60px;\n\u00a0\u00a0width: 100%;\n\u00a0\u00a0border: none;\n\u00a0\u00a0background-color: #3C8DC5;\n\u00a0\u00a0color: #fff;\n\u00a0\u00a0margin-top: 2px;\n\u00a0\u00a0curson: pointer;\n\u00a0\u00a0font-size: 0.9em;\n\u00a0\u00a0text-transform: uppercase;\n\u00a0\u00a0font-weight: bold;\n\u00a0\u00a0cursor: pointer;\n}\ninput[type=\"submit\"]:hover{\n\u00a0\u00a0background-color: #6FB7E9;\n\u00a0\u00a0transition: 0.3s ease;\n}\n#column-left {\n\u00a0\u00a0width: 46.5%;\n\u00a0\u00a0float: left;\n\u00a0\u00a0margin-bottom: 2px;\n}\n#column-right {\n\u00a0\u00a0width: 46.5%;\n\u00a0\u00a0float: right;\n}\n\u00a0\n@media only screen and (max-width: 480px){\n\u00a0\u00a0body {\n\u00a0\u00a0\u00a0\u00a0width: 100%;\n\u00a0\u00a0\u00a0\u00a0margin: 0 auto;\n\u00a0\u00a0}\n\u00a0\u00a0.form-container {\n\u00a0\u00a0\u00a0\u00a0margin: 0 2%;\n\u00a0\u00a0}\n\u00a0\u00a0input {\n\u00a0\u00a0\u00a0\u00a0font-size: 1em;\n\u00a0\u00a0}\n\u00a0\u00a0#input-button {\n\u00a0\u00a0\u00a0\u00a0width: 100%;\n\u00a0\u00a0}\n\u00a0\u00a0#input-field {\n\u00a0\u00a0\u00a0\u00a0width: 96.5%;\n\u00a0\u00a0}\n\u00a0\u00a0h1 {\n\u00a0\u00a0\u00a0\u00a0font-size: 1.2em;\n\u00a0\u00a0}\n\u00a0\u00a0input {\n\u00a0\u00a0\u00a0\u00a0margin: 2px 0;\n\u00a0\u00a0}\n\u00a0\u00a0input[type=\"submit\"]{\n\u00a0\u00a0\u00a0\u00a0height: 50px;\n\u00a0\u00a0}\n\u00a0\u00a0#column-left {\n\u00a0\u00a0\u00a0\u00a0width: 96.5%;\n\u00a0\u00a0\u00a0\u00a0display: block;\n\u00a0\u00a0\u00a0\u00a0float: none;\n\u00a0\u00a0}\n\u00a0\u00a0#column-right {\n\u00a0\u00a0\u00a0\u00a0width: 96.5%;\n\u00a0\u00a0\u00a0\u00a0display: block;\n\u00a0\u00a0\u00a0\u00a0float: none;\n\u00a0\u00a0}\n}<\/code><\/pre>\njs\/card.js<\/code>archivo tendr\u00e1 el siguiente c\u00f3digo.<\/p>\n\/* Card.js plugin by Jesse Pollak. https:\/\/github.com\/jessepollak\/card *\/\n\u00a0\n$('form').card({\n\u00a0\u00a0\u00a0\u00a0container: '.card-wrapper',\n\u00a0\u00a0\u00a0\u00a0width: 280,\n\u00a0\n\u00a0\u00a0\u00a0\u00a0formSelectors: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nameInput: 'input[name=\"first-name\"], input[name=\"last-name\"]'\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\njquery.card.js<\/code>este repositorio de GitHub<\/a>. Guarde este archivo en su directorio ‘js’.<\/p>\nindex.html<\/code>archivo. En este archivo agregaremos marcado HTML que muestra nuestro formulario de pago.<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Online Payments<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"css\/card.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<form method=\"POST\" action=\"charge.php\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"personal-information\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Payment Information<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div> <!-- end of personal-information -->\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-left\" type=\"text\" name=\"first-name\" placeholder=\"First Name\" required=\"required\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-right\" type=\"text\" name=\"last-name\" placeholder=\"Surname\" required=\"required\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-field\" type=\"text\" name=\"number\" placeholder=\"Card Number\" required=\"required\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-left\" type=\"text\" name=\"expiry\" placeholder=\"MM \/ YY\" required=\"required\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-right\" type=\"text\" name=\"cvc\" placeholder=\"CCV\" required=\"required\" \/>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-wrapper\"><\/div>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-field\" type=\"text\" name=\"streetaddress\" required=\"required\" autocomplete=\"on\" maxlength=\"45\" placeholder=\"Streed Address\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-left\" type=\"text\" name=\"city\" required=\"required\" autocomplete=\"on\" maxlength=\"20\" placeholder=\"City\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-right\" type=\"text\" name=\"zipcode\" required=\"required\" autocomplete=\"on\" pattern=\"[0-9]*\" maxlength=\"5\" placeholder=\"ZIP code\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-field\" type=\"email\" name=\"email\" required=\"required\" autocomplete=\"on\" maxlength=\"40\" placeholder=\"Email\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-field\" type=\"text\" name=\"amount\" required=\"required\" autocomplete=\"on\" maxlength=\"40\" placeholder=\"Amount\"\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"input-button\" name=\"submit\" type=\"submit\" value=\"Submit\"\/>\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"js\/jquery.card.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"js\/card.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\nindex.html<\/code>archivo. Ahora deber\u00eda ver un formulario de pago atractivo.<\/p>\nAcepte pagos con tarjeta de cr\u00e9dito mediante PayPal Payments Pro<\/h3>\n
composer require league\/omnipay:^3 omnipay\/paypal<\/code><\/pre>\ncharge.php<\/code>archivo.<\/p>\n<?php\nrequire_once \"vendor\/autoload.php\";\n\u00a0\u00a0\nuse OmnipayOmnipay;\n\u00a0\u00a0\n$gateway = Omnipay::create('PayPal_Pro');\n$gateway->setUsername(PAYPAL_API_USERNAME);\n$gateway->setPassword(PAYPAL_API_PASSWORD);\n$gateway->setSignature(PAYPAL_API_SIGNATURE);\n$gateway->setTestMode(true); \/\/ here 'true' is for sandbox. Pass 'false' when go live\n\u00a0\u00a0\nif (isset($_POST['submit'])) {\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0$arr_expiry = explode(\"\/\", $_POST['expiry']);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0$formData = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'firstName' => $_POST['first-name'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'lastName' => $_POST['last-name'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'number' => $_POST['number'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'expiryMonth' => trim($arr_expiry[0]),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'expiryYear' => trim($arr_expiry[1]),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'cvv' => $_POST['cvc']\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0try {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Send purchase request\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$response = $gateway->purchase([\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'amount' => $_POST['amount'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'currency' => 'USD',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'card' => $formData\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0])->send();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Process response\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($response->isSuccessful()) {\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Payment was successful\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Payment is successful. Your Transaction ID is: \". $response->getTransactionReference();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Payment failed\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Payment failed. \". $response->getMessage();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0} catch(Exception $e) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $e->getMessage();\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\nAcepte pagos en vivo con la pasarela de pago de PayPal Pro<\/h3>\n
setTestMode()<\/code>m\u00e9todo.<\/p>\n