Perú

Lima,Perú

Agregue botones de pago inteligente de paypal a su sitio web

Fecha Publicación:       30 de Junio de 2019
Fecha Modificación:       12 de Febrero de 2021

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 client-id=sbcomo acceso directo.

disable-funding cardcreditbancontact 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/#

Leidas : 366 Veces
Compartir: