{"id":28617,"date":"2021-05-29T13:43:00","date_gmt":"2021-05-29T10:43:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28617"},"modified":"2021-10-17T16:37:23","modified_gmt":"2021-10-17T13:37:23","slug":"integracion-de-paypal-payments-pro-en-laravel","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/integracion-de-paypal-payments-pro-en-laravel\/","title":{"rendered":"Integraci\u00f3n de PayPal Payments Pro en Laravel"},"content":{"rendered":"

He escrito un art\u00edculo que acepta pagos con tarjeta de cr\u00e9dito mediante PayPal Payments Pro en PHP<\/a>. Uno de los lectores me pregunt\u00f3 c\u00f3mo hacer la misma integraci\u00f3n en Laravel. Aunque Laravel est\u00e1 escrito en PHP mientras se escribe c\u00f3digo para Laravel, debes seguir sus est\u00e1ndares. A los principiantes a menudo les resulta dif\u00edcil convertir c\u00f3digo PHP simple en Laravel.<\/p>\n

En este art\u00edculo, estudiamos c\u00f3mo integrar PayPal Payments Pro y aceptar pagos con tarjeta de cr\u00e9dito en Laravel.<\/p>\n

Si est\u00e1 ejecutando una tienda en l\u00ednea, un sitio de membres\u00eda u otra cosa en la que desea cobrar pagos en l\u00ednea, PayPal es la opci\u00f3n segura. Con PayPal Payments Pro puede aceptar pagos con tarjeta de cr\u00e9dito en l\u00ednea que van directamente a su cuenta PayPal.<\/p>\n

Al momento de escribir este art\u00edculo, tenga en cuenta que PayPal Payments Pro est\u00e1 disponible para los comerciantes de EE. UU., Reino Unido y Canad\u00e1.<\/p>\n

Empezando<\/h3>\n

Para comenzar, debe obtener las credenciales de la API de PayPal. Siempre es una buena pr\u00e1ctica probar los pagos en modo sandbox. Si todo funciona como se esperaba, realice el pago.<\/p>\n

Obtenga sus credenciales de sandbox iniciando sesi\u00f3n en la cuenta de desarrollador de PayPal<\/a>. Despu\u00e9s de iniciar sesi\u00f3n, vaya a SANDBOX-> Cuentas<\/strong> en el men\u00fa del lado izquierdo y cree una cuenta comercial.<\/p>\n

Una vez que tenga la cuenta comercial, actualice su tipo de cuenta a ‘Business-Pro’. La integraci\u00f3n de PayPal Payments Pro requiere un tipo de cuenta "Business-Pro". Haga clic en el enlace ‘Actualizar a Pro’ y PayPal convertir\u00e1 su tipo de cuenta a ‘Business-Pro’.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

A continuaci\u00f3n, haga clic en la pesta\u00f1a ‘Credenciales de API’ y copie sus credenciales.<\/p>\n

\"Integraci\u00f3n<\/a><\/p>\n

Abra el .env<\/code>de su proyecto de Laravel y agregue las credenciales copiadas en \u00e9l.<\/p>\n

PAYPAL_API_USERNAME=\nPAYPAL_API_PASSWORD=\nPAYPAL_API_SIGNATURE=<\/code><\/pre>\n
Agregue la ruta para el controlador en el web.php<\/code>archivo. En mi caso, mi ruta es la siguiente.<\/p>\n
Route::resource('payment', 'PaymentController');<\/code><\/pre>\n
Voy a utilizar la biblioteca de Omnipay<\/a>, que proporciona una forma sencilla de integrar pasarelas de pago. Ejecute el siguiente comando que instala la biblioteca Omnipay.<\/p>\n
composer require league\/omnipay:^3 omnipay\/paypal<\/code><\/pre>\n
Crear un formulario de pago<\/h3>\n
Al aceptar un pago con tarjeta de cr\u00e9dito, debe proporcionar a los usuarios un formulario donde puedan ingresar los detalles de su tarjeta. Dise\u00f1emos la<\/a> forma de pago usando este ejemplo de codepen<\/a>.<\/p>\n
Cree una carpeta ‘css’ y ‘js’ dentro del directorio ‘p\u00fablico’ del proyecto Laravel. Copie el c\u00f3digo CSS de codepen y agr\u00e9guelo css\/card.css<\/code>.<\/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.8%;\n\u00a0\u00a0float: left;\n\u00a0\u00a0margin-bottom: 2px;\n}\n#column-right {\n\u00a0\u00a0width: 46.8%;\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>\n
De manera similar, agregue c\u00f3digo JavaScript desde codepen en el js\/card.js<\/code>archivo.<\/p>\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>\n
Obtenga una copia de jquery.card.js<\/code>este repositorio de GitHub<\/a>. Guarde este archivo en su directorio ‘js’.<\/p>\n
Finalmente, en el archivo blade agregue el siguiente c\u00f3digo.<\/p>\n
<link rel=\"stylesheet\" href=\"{{ asset('css\/card.css') }}\">\n\u00a0\n<form method=\"POST\" action=\"{{ url('ROUTE_HERE') }}\">\n\u00a0\u00a0\u00a0\u00a0{{ csrf_field() }}\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-container\">\n\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<h1>Payment Information<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div> <!-- end of personal-information -->\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\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<input id=\"column-right\" type=\"text\" name=\"last-name\" placeholder=\"Surname\" required=\"required\" \/>\n\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<input id=\"column-left\" type=\"text\" name=\"expiry\" placeholder=\"MM \/ YY\" required=\"required\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input id=\"column-right\" type=\"text\" name=\"cvc\" placeholder=\"CCV\" required=\"required\" \/>\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"card-wrapper\"><\/div>\n\u00a0\n\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<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<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<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<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<input id=\"input-button\" name=\"submit\" type=\"submit\" value=\"Submit\"\/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"><\/script>\n<script src=\"{{ asset('js\/jquery.card.js') }}\"><\/script>\n<script src=\"{{ asset('js\/card.js') }}\"><\/script><\/code><\/pre>\n
En el c\u00f3digo anterior, inclu\u00ed CSS, JS del directorio respectivo. Tienes que dar tu URL de ruta a la acci\u00f3n del formulario.<\/p>\n
Integraci\u00f3n de PayPal Payments Pro en Laravel<\/h3>\n
Hemos terminado con la configuraci\u00f3n requerida para aceptar pagos con tarjeta de cr\u00e9dito. Ahora, en el controlador, tenemos que escribir el c\u00f3digo seg\u00fan las instrucciones de Omnipay. Omnipay facilita la vida del desarrollador. Tenemos que seguir sus instrucciones y ellos hacen todo el trabajo de capturar el pago y devolver una respuesta final.<\/p>\n
PaymentController.php<\/strong><\/p>\n
<?php\n\u00a0\nnamespace AppHttpControllers;\n\u00a0\nuse IlluminateHttpRequest;\nuse OmnipayOmnipay;\n\u00a0\nclass PaymentController extends Controller\n{\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public $gateway;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function __construct()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->gateway = Omnipay::create('PayPal_Pro');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->gateway->setUsername(env('PAYPAL_API_USERNAME'));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->gateway->setPassword(env('PAYPAL_API_PASSWORD'));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->gateway->setSignature(env('PAYPAL_API_SIGNATURE'));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->gateway->setTestMode(true); \/\/ here 'true' is for sandbox. Pass 'false' when go live\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function index()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return view('payment');\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public function store(Request $request)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_expiry = explode(\"\/\", $request->input('expiry'));\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$formData = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'firstName' => $request->input('first-name'),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'lastName' => $request->input('last-name'),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'number' => $request->input('number'),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'expiryMonth' => trim($arr_expiry[0]),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'expiryYear' => trim($arr_expiry[1]),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'cvv' => $request->input('cvc')\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0try {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Send purchase request\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$response = $this->gateway->purchase([\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'amount' => $request->input('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\u00a0\u00a0\u00a0\u00a0])->send();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Process response\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($response->isSuccessful()) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0$arr_body = $response->getData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$amount = $arr_body['AMT'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$currency = $arr_body['CURRENCYCODE'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$transaction_id = $arr_body['TRANSACTIONID'];\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Payment of $amount $currency is successful. Your Transaction ID is: $transaction_id\";\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0echo \"Payment failed. \". $response->getMessage();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} catch(Exception $e) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $e->getMessage();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n
Aqu\u00ed en el constructor construimos un objeto y le pasamos las credenciales. Cuando un usuario env\u00eda un formulario, el control pasa al m\u00e9todo ‘almacenar’. En este m\u00e9todo, Omnipay llama a la API de PayPal en segundo plano, procesa el pago y da una respuesta final.<\/p>\n
Adelante, pru\u00e9balo. Como estamos probando el pago en modo sandbox, necesitar\u00e1 tarjetas de prueba. Haga clic aqu\u00ed<\/a> para obtener detalles falsos de la tarjeta de cr\u00e9dito. Despu\u00e9s de enviar un formulario, deber\u00eda ver el mensaje de \u00e9xito junto con su ID de transacci\u00f3n.<\/p>\n
Acepte pagos en vivo con PayPal Payments Pro<\/h3>\n
Una vez que sus pagos funcionen correctamente en el modo de zona de pruebas, puede pasar al modo en vivo. Para ello, debe reemplazar las credenciales de la zona de pruebas con los detalles en vivo en el .env<\/code>archivo. Adem\u00e1s, pase un valor ‘falso’ al m\u00e9todo setTestMode() en el constructor. Desactivar\u00e1 el modo sandbox y activar\u00e1 el modo en vivo.<\/p>\n
Se trata de aceptar pagos con tarjeta de cr\u00e9dito con PayPal Payments Pro en Laravel. Me gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n