Integración PHP Venmo con Braintree

 En este artículo, aprendemos sobre la integración de Venmo con Braintree usando PHP para la implementación del lado del servidor.

Introducción

Venmo es un método de pago para dispositivos móviles compatible con dispositivos Android y iPhone. Pero puede integrar Venmo en la aplicación web que solo funciona cuando el sitio web está abierto en dispositivos móviles.

Esta guía trata sobre cómo funciona el pago de Venmo con sitios web o aplicaciones web con la API de Braintree usando PHP.

Aquí hay 3 pasos importantes para integrar Venmo en el sitio web usando la API de Braintree.

3 pasos importantes para la integración de Venmo con Braintree

• Configuración de API en el portal de Braintree.
• Implementación del lado del cliente usando JS
• Implementación del lado del servidor usando PHP

Paso 1: Configuración de API en Braintree

Para obtener claves de API de sandbox, primero tenemos que crear una cuenta de sandbox en Braintree Portal.

4 sencillos pasos para la configuración de la cuenta Braintree con API

Aquí la guía completa sobre cómo configurar la cuenta Braintree para obtener la clave API

Registro de Barintree Sandbox: https://www.braintreepayments.com/sandbox

Después de iniciar sesión en el portal, haga clic debajo del icono de engranaje y vaya a la opción de procesamiento .

En la página de procesamiento, verá la página como la siguiente, vaya a la opción y habilite venmo.

Después de habilitar Venmo, vaya a la opción API en el menú superior.

Puede ver esta página, en esta copia las claves de tokenización

Paso 2: Implementación del lado del cliente usando JS

Para implementar el lado del cliente de la aplicación web, usamos Braintree JavaScript V3 SDK, que admite Venmo como una opción de pago si el usuario tiene un sitio web móvil.

Instalación

Para configurar JavaScript SDK usamos el enlace CDN de SDK que tiene la versión 3.

Después del cliente JS, cargamos Venmo y su recopilador de datos JS SDK. Aquí explicamos cómo incluir esos JS SDK usando el enlace CDN.

1 2 3

<script src="https://js.braintreegateway.com/web/3.57.0/js/client.min.js"></script> <script src="https://js.braintreegateway.com/web/3.57.0/js/venmo.min.js"></script> <script src="https://js.braintreegateway.com/web/3.57.0/js/data-collector.min.js"></script>

En la parte superior, debe crear un botón HTML para hacer clic en JS Event.

1	<button type="button" id="venmo-button" style="background:white;border-bottom: none;"><img style="border-radius: 20px;" src="https://s2.r29static.com/bin/entry/1f8/0,0,2000,1050/x,80/1986150/image.jpg" height="50px" width="100px"></button>

Inicialización del cliente

Para inicializar el cliente usamos la clave de tokenización que tomamos del proceso anterior.

Usando eso creando un componente Venmo.

1 2 3 4 5 6 7 8 9 10 11 12

// Create a client. braintree.client.create({   authorization: 'sandbox_s9hw272b_dgg5x66vptdfnbtb' }, function (clientErr, clientInstance) {   // Stop if there was a problem creating the client.   // This could happen if there is a network error or if the authorization   // is invalid.   console.log("clientInstance:",clientInstance);   if (clientErr) {     console.error('Error creating client:', clientErr);     return;   }

Recopilar datos del dispositivo

Los datos del dispositivo son importantes y deben tenerlos para completar la transacción.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

braintree.dataCollector.create({         client: clientInstance,         paypal: true       }, function (dataCollectorErr, dataCollectorInstance) {         if (dataCollectorErr) {           // Handle error in creation of data collector.           console.log(dataCollectorErr);           return;         }              // At this point, you should access the deviceData value and provide it         // to your server, e.g. by injecting it into your form as a hidden input.         console.log('dataCollectorInstance:', dataCollectorInstance);         console.log('Got device data:', dataCollectorInstance.deviceData);              });

Después de que la creación del botón Venmo onClick funcionalidad .

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82

function displayVenmoButton(venmoInstance) {       // Assumes that venmoButton is initially display: none.       venmoButton.style.display = 'block';       venmoButton.addEventListener('click', function () {         venmoButton.disabled = true;                  venmoInstance.tokenize(function (tokenizeErr, payload) {           venmoButton.removeAttribute('disabled');                if (tokenizeErr) {             handleVenmoError(tokenizeErr);           } else {             handleVenmoSuccess(payload);           }         });       });     }          function handleVenmoError(err) {       if (err.code === 'VENMO_CANCELED') {         console.log('App is not available or user aborted payment flow');       } else if (err.code === 'VENMO_APP_CANCELED') {         console.log('User canceled payment flow');       } else {         console.error('An error occurred:', err.message);       }     }       braintree.venmo.create({         client: clientInstance,         // Add allowNewBrowserTab: false if your checkout page does not support         // relaunching in a new tab when returning from the Venmo app. This can         // be omitted otherwise.         allowNewBrowserTab: false       }, function (venmoErr, venmoInstance) {         if (venmoErr) {           console.error('Error creating Venmo:', venmoErr);           return;         }         console.log("venmoInstance:",venmoInstance);         // Verify browser support before proceeding.         if (!venmoInstance.isBrowserSupported()) {           console.log('Browser does not support Venmo');           return;         }         displayVenmoButton(venmoInstance);              // Check if tokenization results already exist. This occurs when your         // checkout page is relaunched in a new tab. This step can be omitted         // if allowNewBrowserTab is false.         if (venmoInstance.hasTokenizationResult()) {           venmoInstance.tokenize(function (tokenizeErr, payload) {             if (err) {               handleVenmoError(tokenizeErr);             } else {               handleVenmoSuccess(payload);             }           });           return;         }       });     });               function handleVenmoSuccess(payload) {       // Send the payment method nonce to your server, e.g. by injecting       // it into your form as a hidden input.       console.log('Got a payment method nonce:', payload.nonce);         // Display the Venmo username in your checkout UI.       console.log('Venmo user:', payload.details.username);         var amount = 1;           //test nonce for venmo         payload_nonce = "fake-venmo-account-nonce";           //uncomment this for live integration         var payerID = payload_nonce;//payload.nonce;         var deviceDataToken = '{"correlation_id":"bc850bc0840ab2d9e1d34842d0e3ffa5"}';         var deviceData = encodeURI(deviceDataToken);                  window.location = "/Directory_name/venmo_server.php/?payerID=" + payerID + "&deviceData=" + deviceData+ "&amount=" + amount;     }

Código fuente completo de la implementación de Venmo del lado del cliente

venmo_pay.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121

<button type="button" id="venmo-button" style="background:white;border-bottom: none;"><img style="border-radius: 20px;" src="https://s2.r29static.com/bin/entry/1f8/0,0,2000,1050/x,80/1986150/image.jpg" height="50px" width="100px"></button> <script src="https://js.braintreegateway.com/web/3.57.0/js/client.min.js"></script> <script src="https://js.braintreegateway.com/web/3.57.0/js/venmo.min.js"></script> <script src="https://js.braintreegateway.com/web/3.57.0/js/data-collector.min.js"></script> <script> var venmoButton = document.querySelector('#venmo-button');     // Create a client.     braintree.client.create({       authorization: 'sandbox_s9hw272b_dgg5x66vptdfnbtb'     }, function (clientErr, clientInstance) {       // Stop if there was a problem creating the client.       // This could happen if there is a network error or if the authorization       // is invalid.       console.log("clientInstance:",clientInstance);       if (clientErr) {         console.error('Error creating client:', clientErr);         return;       }            braintree.dataCollector.create({         client: clientInstance,         paypal: true       }, function (dataCollectorErr, dataCollectorInstance) {         if (dataCollectorErr) {           // Handle error in creation of data collector.           console.log(dataCollectorErr);           return;         }              // At this point, you should access the deviceData value and provide it         // to your server, e.g. by injecting it into your form as a hidden input.         console.log('dataCollectorInstance:', dataCollectorInstance);         console.log('Got device data:', dataCollectorInstance.deviceData);              });                     function displayVenmoButton(venmoInstance) {       // Assumes that venmoButton is initially display: none.       venmoButton.style.display = 'block';       venmoButton.addEventListener('click', function () {         venmoButton.disabled = true;                  venmoInstance.tokenize(function (tokenizeErr, payload) {           venmoButton.removeAttribute('disabled');                if (tokenizeErr) {             handleVenmoError(tokenizeErr);           } else {             handleVenmoSuccess(payload);           }         });       });     }          function handleVenmoError(err) {       if (err.code === 'VENMO_CANCELED') {         console.log('App is not available or user aborted payment flow');       } else if (err.code === 'VENMO_APP_CANCELED') {         console.log('User canceled payment flow');       } else {         console.error('An error occurred:', err.message);       }     }       braintree.venmo.create({         client: clientInstance,         // Add allowNewBrowserTab: false if your checkout page does not support         // relaunching in a new tab when returning from the Venmo app. This can         // be omitted otherwise.         allowNewBrowserTab: false       }, function (venmoErr, venmoInstance) {         if (venmoErr) {           console.error('Error creating Venmo:', venmoErr);           return;         }         console.log("venmoInstance:",venmoInstance);         // Verify browser support before proceeding.         if (!venmoInstance.isBrowserSupported()) {           console.log('Browser does not support Venmo');           return;         }         displayVenmoButton(venmoInstance);              // Check if tokenization results already exist. This occurs when your         // checkout page is relaunched in a new tab. This step can be omitted         // if allowNewBrowserTab is false.         if (venmoInstance.hasTokenizationResult()) {           venmoInstance.tokenize(function (tokenizeErr, payload) {             if (err) {               handleVenmoError(tokenizeErr);             } else {               handleVenmoSuccess(payload);             }           });           return;         }       });     });               function handleVenmoSuccess(payload) {       // Send the payment method nonce to your server, e.g. by injecting       // it into your form as a hidden input.       console.log('Got a payment method nonce:', payload.nonce);         // Display the Venmo username in your checkout UI.       console.log('Venmo user:', payload.details.username);         var amount = 1;           //test nonce for venmo         payload_nonce = "fake-venmo-account-nonce";           //uncomment this for live integration         var payerID = payload_nonce;//payload.nonce;         var deviceDataToken = '{"correlation_id":"bc850bc0840ab2d9e1d34842d0e3ffa5"}';         var deviceData = encodeURI(deviceDataToken);                  window.location = "/Directory_name/venmo_server.php/?payerID=" + payerID + "&deviceData=" + deviceData+ "&amount=" + amount;     }      </script>

Paso 3: Implementación del lado del servidor usando PHP

Primero incluimos la biblioteca PHP Braintree para implementar transacciones del lado del servidor.

Aquí está el enlace github del código completo con la biblioteca PHP de Braintree incluida.

https://github.com/bikashkrpanda/PHP-venmo-integration-with-braintree

Código fuente completo de la implementación del lado del servidor

venmo_server.php

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<?php require_once ('braintree-php-3.30.0/lib/Braintree.php');     $gateway = new Braintree_Gateway([   'environment' => 'sandbox',   'merchantId' => 'dgg5x66vptdfnbtb',   'publicKey' => 'kqx2gkjpwj59gdqz',   'privateKey' => '4ce889ab9cbd4e0f15b13fe6d22399f2'   ]);        $result_venmo = $gateway->transaction()->sale([     'amount' => $_GET['amount'],     'paymentMethodNonce' => $_GET['payerID'],     'options' => [         'submitForSettlement' => true,         'venmo' => [           'profileId' => ''         ]     ],     'deviceData' => urldecode($_GET['deviceData'])   ]);   echo "Transaction ID:".$paymentID = $result_venmo->transaction->id;   ?>

Aquí la solución completa de la integración de Venmo con PHP Braintree.

Si tiene algún problema, comente a continuación, intentaré resolver el problema.