Integración con PayPal - Checkout con Smart Payment Buttons
Una de las formas más sencillas de recibir pagos a través de tu página web es realizar una integración de pagos con PayPal. La integración que vamos a ver en este post corresponde al Checkout con Smart Payment Buttons.
Antes de continuar con la lectura de este post te invito a revisar nuestros artículos
- Creación de una cuenta en PayPal y Tipos de Cuentas
- Tipos de Integración con Paypal
Paso 1 - Crea tu cuenta Sandbox
Lo primero que debes hacer es iniciar sesión con tu cuenta PayPal e ingresar a Sandbox Test Accounts. Allí encontrarás dos cuentas que PayPal creará de forma automática con la siguiente estructura.
sb-howkt1878317@business.example.com
sb-48ffa4865961@personal.example.com
Al dar clic en la opción View/Edit Account podrás ver el password generado para cada cuenta. Estas cuentas las utilizarás en el paso 6. Ten en mente que la cuenta @business será la cuenta del vendedor y la cuenta @personal será la cuenta del comprador.
Paso 2 - Obtén tus credenciales API
Lo siguiente que debes hacer es ingreasar a Applications y seleccionar Sanbox. Allí debes encontrar una aplicación llamada Default Aplication de tipo REST. Si no encuentras ninguna aplicación debes crearla. Al dar clic en el nombre de tu aplicación es importante que anotes el Client ID.
Paso 3 - Agrega el SDK
Debes agregar el siguiente código HTML dentro de la etiqueta head de tu página y reemplazar CLIENT_ID por el del paso anterior.
<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID"></script>
Paso 4 - Agrega el botón de pagos
Seguido a esto debes agregar en una zona dentro de la etiqueta body el siguiente código que renderizará el botón de pagos inteligente.
<div id="paypal-button-container"></div>
<script>paypal.Buttons().render('#paypal-button-container');</script>
En este punto puedes ver en el navegador cómo se renderiza tu botón de pagos.
Paso 5 - Configura el pago y la respuesta
El última paso será configurar algunos datos como por ejemplo el monto de la transacción y la acción que se ejecutará una vez el pago esté realizado. Elimina el contenido del script del paso anterior y agrega en su lugar el siguiente.
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
currency_code: 'USD',
value: '5.00'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Thanks ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container');
En el anterior código la función createOrder realizará la configuración del pago. En este caso el pago será de 5 USD. Puedes encontrar una lista completa de los parámetros de este método en el siguiente enlace: CreateOrder V2.
Por otro lado, la función onApprove configura el comportamiento una vez el usuario termina la realización del pago. En este caso, simplemente se mostrará una ventana (alert) con el texto Thanks USER. El texto USER será reemplazado con el nombre del pagador.
Paso 6 - Testea tu integración
Con la cuenta del comprador obtenida en el paso 1 realiza un pago de prueba. Seguidamente ingresa al Sandbox de PayPal con la cuenta del vendedor y verifica que el depósito se realizó. También puedes ingresar con la cuenta del comprador y verificar que se envió el dinero.
Paso 7 - Producción
El último paso es salir a producción. Para esto deberás ingresar a Paypal con tu cuenta Business. Si no tienes una cuenta Business debes crearla. Después de esto debes crear una App Live la cual te dará acceso a tu CLIENT_ID el cuál deberás reemplazar según el paso 3.