Reputation: 351
I'm implementing Paypal Standard checkout. When selecting to pay by card, the card entry fields appear below the button. I'd like to put it into a modal dialog. I can't see any thing in the documentation that does this, but I'm also wondering if this is a limitation to this version. I've looked briefly at Advanced, but it only seem to let you style the box, not define it's position (or put in a modal).
Has anyone done this or something similar that would allow this? Can someone point me in the right direction? The drop down card fields looks pretty nasty on my page (under the basket) once they pop up - looks like an afterthought.
window.paypal
.Buttons({
onInit: function (data, actions) {
// Disable the buttons
actions.disable();
$('[id$=chkTerms]').on('change', function (event) {
// Enable or disable the button when it is checked or unchecked
if (event.target.checked) {
actions.enable();
} else {
actions.disable();
}
});
},
onClick: function () {
// Show a validation error if the checkbox is not checked
//if (!event.target.checked) {
if (!$('[id$=chkTerms]').is(':checked')) {
actions.disable();
$("#termsPopup").modal(
{
width: "auto", // overcomes width:"auto" and maxWidth bug
maxWidth: 600,
height: "auto",
modal: false,
fluid: true, //new option
resizable: true
});
}
},
style: {
shape: "rect",
layout: "vertical",
color: "gold",
label: "paypal",
},
message: {
amount: 100,
},
async createOrder() {
debugger;
try {
var dataIn =
{
actions: { "payPalStandardBuildOrder": {} }
};
const response = await fetch("/Handlers/ProcessBasket", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
// use the "body" param to optionally pass additional order information
// like product ids and quantities
body: JSON.stringify(dataIn),
});
const orderData = await response.json();
debugger;
if (orderData.payPalOrderId) {
return orderData.payPalOrderId;
}
const errorDetail = orderData?.details?.[0];
const errorMessage = errorDetail
? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
: JSON.stringify(orderData);
throw new Error(errorMessage);
} catch (error) {
console.error(error);
resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
}
},
async onApprove(data, actions) {
try {
var dataIn =
{
actions:
{
"payPalSmartPayAuthorised":
{
payPalOrderId: data.orderID
}
}
};
const response = await fetch('/Handlers/ProcessBasket', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
const orderData = await response.json();
// Three cases to handle:
// (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
// (2) Other non-recoverable errors -> Show a failure message
// (3) Successful transaction -> Show confirmation or thank you message
const errorDetail = orderData?.details?.[0];
if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
// (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
// recoverable state, per
// https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
return actions.restart();
} else if (errorDetail) {
// (2) Other non-recoverable errors -> Show a failure message
throw new Error(`${errorDetail.description} (${orderData.debug_id})`);
} else if (!orderData.purchase_units) {
throw new Error(JSON.stringify(orderData));
} else {
// (3) Successful transaction -> Show confirmation or thank you message
// Or go to another URL: actions.redirect('thank_you.html');
const transaction =
orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
resultMessage(
`Transaction ${transaction.status}: ${transaction.id}<br>
<br>See console for all available details`
);
console.log(
"Capture result",
orderData,
JSON.stringify(orderData, null, 2)
);
}
} catch (error) {
console.error(error);
resultMessage(
`Sorry, your transaction could not be processed...<br><br>${error}`
);
}
},
})
.render("#paypal-button-container");
When the debit card entry opens, it opens the entry field below the buttons - I'd like to be able to position them into a modal dialog so it looks nicer. It might not even be possible, hence why I didn't provide code originally.
Upvotes: 0
Views: 35