Agregue botones de pago inteligente de paypal a su sitio web
Añadir los botones de pago inteligente con el SDK de JavaScript de paypal a su sitio web.
Nota: Página Oficial Integración básica botones con SDK de JavaScript https://developer.paypal.com/docs/checkout/integrate/
Ejemplo integración SDK de JavaScript de PayPal mayor información https://www.evmconstruction.co.nz/
Si está buscando la antigua integración de Paypal que es checkout.js, consulte la guía de integración de Checkout archivada.
Configure su entorno de desarrollo.
Antes de poder integrar Checkout, debe configurar su entorno de desarrollo. Después de obtener un token que le permite acceder a los recursos de la API REST protegidos, crea cuentas de sandbox para probar sus aplicaciones web y móviles. Para más detalles, Implementacion de pago con paypal en un sitio web.
Luego, vuelve a esta página para integrar Checkout.
Agregue el script de PayPal a su página web.
Agregue el script de PayPal a su página web, luego agregue su sandbox client-id a la etiqueta del script:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
</script>
</body>Renderizar los botones de pago inteligente
A continuación, represente los botones de pago inteligente de PayPal a un elemento contenedor en su página:
<body>
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
</script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons().render('#paypal-button-container');
</script>
</body>Configure la transacción
Implemente la createOrder función, que se llama cuando el comprador hace clic en el botón PayPal. Este paso:
- Llama a PayPal
actions.order.create()para configurar los detalles de una transacción única, incluido el monto, los detalles de la línea de pedido y más. - Inicia la ventana de Pago de PayPal para que el comprador pueda iniciar sesión y aprobar la transacción en paypal.com.
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
</script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
// Esta función configura los detalles de la transacción,
//incluidos el importe y los detalles de la línea de pedido.
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
}
}).render('#paypal-button-container');
</script>
En mi caso como trabajo con PHP para configurar la transacción lo implemente de esta manera:
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
</script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
// Esta función configura los detalles de la transacción,
//incluidos el importe y los detalles de la línea de pedido.
var pagototal = '<?php echo $_SESSION['Pago_total_dolares'] ;?>';
return actions.order.create({
purchase_units: [{
amount: {
value: pagototal,
currency: 'USD'
}
}]
});
},
}).render('#paypal-button-container');
</script>Para ver la lista de parámetros a los que puede pasar actions.order.create() para configurar la transacción, y ejemplos de respuestas, vea Crear orden en la referencia API de pedidos.
Nota: También puede llamar desde su servidor para configurar una transacción.
Capture la transacción
Implemente la onApprovefunción, que se llama después de que el comprador aprueba la transacción en paypal.com. Esta función:
- Llama a PayPal
actions.order.capture()para capturar los fondos de la transacción. - Muestra un mensaje al comprador para informarle que la transacción fue exitosa.
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
</script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
// Esta función configura los detalles de la transacción,
// incluidos el importe y los detalles de la línea de pedido.
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01'
}
}]
});
},
onApprove: function(data, actions) {
// Esta función captura los fondos de la transacción.
return actions.order.capture().then(function(details) {
// Esta función muestra un mensaje de transacción
//exitosa a su comprador.
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container');
// Esta función muestra los botones de pago
//inteligente en su página web.
</script>
En mi caso como trabajo con PHP para capturar la transacción lo implemente de esta manera:
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
</script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
// Esta función configura los detalles de la transacción,
//incluidos el importe y los detalles de la línea de pedido.
var pagototal = '<?php echo $_SESSION['Pago_total_dolares'] ;?>';
return actions.order.create({
purchase_units: [{
amount: {
value: pagototal,
currency: 'USD'
}
}]
});
},
onApprove: function(data, actions) {
// Esta función captura los fondos de la transacción.
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name);
// Llame a su servidor para guardar la transacción
return fetch('/paypal-transaction-complete', {
// Esta función muestra un mensaje de transacción
//exitosa a su comprador.
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
});
});
}
}).render('#paypal-button-container');
// Esta función muestra los botones de pago
//inteligente en su página web.
</script>
Personalice la secuencia de comandos SDK de JavaScript de PayPal
Fuente: https://developer.paypal.com/docs/checkout/reference/customize-sdk/#query-parameters
Puede personalizar la integración pasando parámetros de consulta y parámetros de secuencia de comandos en la etiqueta de secuencia de comandos SDK. Estos parámetros ayudan a PayPal a decidir las fuentes de financiación y los botones óptimos para mostrar a sus compradores
Parámetros de consulta
Pase estos parámetros a la URL del script SDK como parámetros de consulta. Por ejemplo:
<script src="https://paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
Si no pasa estos parámetros al SDK, el SDK de JavaScript de PayPal utiliza el valor predeterminado de la lista.
| Opción | Valor de ejemplo | Defecto | Descripción |
|---|---|---|---|
| client-id | sb | n/a |
Required. Su ID de cliente REST de PayPal. Esto identifica su cuenta de PayPal y determina dónde se pagan las transacciones. Mientras realiza las pruebas en sandbox, puede usarlas |
| disable-funding | card, credit, bancontact |
none | Fuentes de financiación para no mostrar en los botones de pago inteligente. Ejemplo desabilita <script src="https://www.paypal.com/sdk/js?client-id=xx&disable-funding=credit,card"> </script> |
Mas Información:
https://developer.paypal.com/docs/checkout/#
Agrega Botones
https://developer.paypal.com/docs/checkout/integrate/#1-set-up-your-development-environment
Personaliza el Script JavaScript SDK de PayPal (personaliza botones)
https://developer.paypal.com/docs/checkout/reference/customize-sdk/#