
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.
¿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.
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
});
});
}