¿Quién puede ayudarme a crear un método de pago con tarjeta PayPal? Aqui esta el codigo ⬇️⬇️🙏👋

  • Autor Autor Mr_J21
  • Fecha de inicio Fecha de inicio
Mr_J21

Mr_J21

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
¿Quién puede ayudarme a crear un método de pago con tarjeta PayPal?

¿Alguien podría ayudarme a implementar un método de pago utilizando tarjetas a través de PayPal? Estoy revisando la documentación oficial y quiero integrarlo correctamente en mi proyecto. Aquí dejo el enlace: https://developer.paypal.com/sdk/js/reference

Es un método de pago muy atractivo, ya que permite realizar pagos con tarjeta de manera rápida, sencilla y sin complicar al usuario con formularios extensos.


maxresdefault (1).jpg


HTML:
<div id="checkout-form">
  <div id="card-name-field-container"></div>
  <div id="card-number-field-container"></div>
  <div id="card-expiry-field-container"></div>
  <div id="card-cvv-field-container"></div>
  <button id="multi-card-field-button" type="button">Pay now with Card Fields</button>
</div>
 
<script src="https://www.paypal.com/sdk/js?client-id=<your-client-id>&components=card-fields"></script>

JavaScript:
// Custom styles object (optional)
        const styleObject = {
            input: {
                "font-size": "16 px",
                "font-family": "monospace",
                "font-weight": "lighter",
                color: "blue",
            },
            ".invalid": {
            color: "purple",
            },
            ":hover": {
                color: "orange",
            },
            ".purple": {
                color: "purple",
            },
        };
        // Create the card fields component and define callbacks
        const cardField = paypal.CardFields({
            style: styleObject,
            createOrder: function (data, actions) {
                return fetch("/api/paypal/order/create/", {
                method: "post",
                })
                .then((res) => {
                    return res.json();
                })
                .then((orderData) => {
                    return orderData.id;
                });
            },
            onApprove: function (data, actions) {
                const { orderID } = data;
                return fetch('/api/paypal/orders/${orderID}/capture/', {
                method: "post",
                })
                .then((res) => {
                    return res.json();
                })
                .then((orderData) => {
                    // Redirect to success page
                });
            },
            inputEvents: {
                onChange: function (data) {
                    // Handle a change event in any of the fields
                },
                onFocus: function(data) {
                    // Handle a focus event in any of the fields
                },
                onBlur: function(data) {
                    // Handle a blur event in any of the fields
                },
                onInputSubmitRequest: function(data) {
                    // Handle an attempt to submit the entire card form
                    // while focusing any of the fields
                }
            },
        });
        // Define the container for each field and the submit button
        const cardNameContainer = document.getElementById("card-name-field-container"); // Optional field
        const cardNumberContainer = document.getElementById("card-number-field-container");
        const cardCvvContainer = document.getElementById("card-cvv-field-container");
        const cardExpiryContainer = document.getElementById("card-expiry-field-container");
        const multiCardFieldButton = document.getElementById("multi-card-field-button");
        // Render each field after checking for eligibility
        if (cardField.isEligible()) {
            const nameField = cardField.NameField();
            nameField.render(cardNameContainer);
            const numberField = cardField.NumberField();
            numberField.render(cardNumberContainer);
            const cvvField = cardField.CVVField();
            cvvField.render(cardCvvContainer);
            const expiryField = cardField.ExpiryField();
            expiryField.render(cardExpiryContainer);
            // Add click listener to the submit button and call the submit function on the CardField component
            multiCardFieldButton.addEventListener("click", () => {
                cardField
                .submit()
                .then(() => {
                    // Handle a successful payment
                })
                .catch((err) => {
                    // Handle an unsuccessful payment
                });
            });
        }
 
creo que para eso necesitas una pasarela de pago amigo
 
creo que para eso necesitas una pasarela de pago amigo
Captura de pantalla.png


Es una API de PayPal que permite integrar pagos en tu sitio web, pero su implementación es un dolor de cabeza, ya que requiere usar Node.js
 
Yo hice un módulo para pago con Paypal usando HTML y JavaScript (además de CSS aquí y allá) y luce así, tal vez lo puedas adaptar:
1738598936769.webp


Código:

Insertar CODE, HTML o PHP:
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" height="1%" class="document" style="padding-left: 4px; padding-right: 4px;">

<h1 style='margin: 0px; relleno: 0px; padding-bottom: 8px;'>Instrucciones:</h1><font style='font-size: 15px;'>Instrucciones de uso</font><hr>
<form name='frmdata' style='display: inline;'>
<font style='font-size: 15px;'>Su ID de usuario:</font><br>
<input type='text' name='userid' value='rodrigo' style='width: 100%; max-width: 350px;' readonly>
<br><br><font style='font-size: 15px;'>Total a pagar:</font><br>
<input type='text' name='amount' value='500.73' style='width: 100%; max-width: 350px;' readonly>
<br><br><font style='font-size: 15px;'>Moneda:</font><br>
<input type='text' name='coin' value='MXN' style='width: 100%; max-width: 350px;' readonly>
</form><br><br>

<div style='width: 100%; max-width: 350px;'>

<script src='https://www.paypal.com/sdk/js?client-id=xxxx&currency=MXN'></script>
<div id='paypal-button-10' style='width: 70%; margin: auto; padding: auto;'></div>

<script>

paypal.Buttons({

  style: {
    layout: 'vertical', // 'horizontal'
    color:  'gold', // 'gold, blue, silver, black, white'
    shape:  'pill', //'rect, pill'
    height:  45, // 25 - 55
    label:  'pay' //'paypal, checkout, buynow, pay, installment'
  },
  createOrder: function(data, actions) {
    return actions.order.create({
      purchase_units: [
      {
        amount: {
          currency_code: 'MXN',
          value: '500.73'
        }
      }
      ]
    });
  },
  onApprove: function(data, actions) {
    return actions.order.capture().then(function(details) {

         try
         {
           //hacer algo al detectar el pago
         }
         catch(e) {}

        });
      },
  onCancel: function (data) {
    alert('Pago cancelado');
  },
  onError: function (err) {
    alert(err);
  }
}).render('#paypal-button-10');
</script>

</div>

</td>
</tr>
<tr>
<td valign="top" height="99%" style="padding: 4px;"></td>
</tr>
</table>

<script language="JavaScript">

window.addEventListener("load", sendpayment);

function sendpayment()
{

  var mode = "sandbox";
 
  if(mode == "sandbox")
    alert("ADVERTENCIA: Esta trabajando en modo de prueba, no se realizara el pago realmente a Paypal, solo a la cuenta de prueba del mismo.");

}

</script>

</body>
</html>
 
Yo hice un módulo para pago con Paypal usando HTML y JavaScript (además de CSS aquí y allá) y luce así, tal vez lo puedas adaptar:
Ver el archivo adjunto 1409711

Código:

Insertar CODE, HTML o PHP:
<table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" height="1%" class="document" style="padding-left: 4px; padding-right: 4px;">

<h1 style='margin: 0px; relleno: 0px; padding-bottom: 8px;'>Instrucciones:</h1><font style='font-size: 15px;'>Instrucciones de uso</font><hr>
<form name='frmdata' style='display: inline;'>
<font style='font-size: 15px;'>Su ID de usuario:</font><br>
<input type='text' name='userid' value='rodrigo' style='width: 100%; max-width: 350px;' readonly>
<br><br><font style='font-size: 15px;'>Total a pagar:</font><br>
<input type='text' name='amount' value='500.73' style='width: 100%; max-width: 350px;' readonly>
<br><br><font style='font-size: 15px;'>Moneda:</font><br>
<input type='text' name='coin' value='MXN' style='width: 100%; max-width: 350px;' readonly>
</form><br><br>

<div style='width: 100%; max-width: 350px;'>

<script src='https://www.paypal.com/sdk/js?client-id=xxxx&currency=MXN'></script>
<div id='paypal-button-10' style='width: 70%; margin: auto; padding: auto;'></div>

<script>

paypal.Buttons({

  style: {
    layout: 'vertical', // 'horizontal'
    color:  'gold', // 'gold, blue, silver, black, white'
    shape:  'pill', //'rect, pill'
    height:  45, // 25 - 55
    label:  'pay' //'paypal, checkout, buynow, pay, installment'
  },
  createOrder: function(data, actions) {
    return actions.order.create({
      purchase_units: [
      {
        amount: {
          currency_code: 'MXN',
          value: '500.73'
        }
      }
      ]
    });
  },
  onApprove: function(data, actions) {
    return actions.order.capture().then(function(details) {

         try
         {
           //hacer algo al detectar el pago
         }
         catch(e) {}

        });
      },
  onCancel: function (data) {
    alert('Pago cancelado');
  },
  onError: function (err) {
    alert(err);
  }
}).render('#paypal-button-10');
</script>

</div>

</td>
</tr>
<tr>
<td valign="top" height="99%" style="padding: 4px;"></td>
</tr>
</table>

<script language="JavaScript">

window.addEventListener("load", sendpayment);

function sendpayment()
{

  var mode = "sandbox";
 
  if(mode == "sandbox")
    alert("ADVERTENCIA: Esta trabajando en modo de prueba, no se realizara el pago realmente a Paypal, solo a la cuenta de prueba del mismo.");

}

</script>

</body>
</html>
Esta super bien gracias brother. Estoy implementando un método de pago utilizando tarjetas a través de PayPal? Estoy revisando la documentación oficial y quiero integrarlo correctamente en mi proyecto pero en mi pais no esta disponible esa opcion.
 
Atrás
Arriba