Stuart Palmer
Stuart Palmer

Reputation: 351

paypal standard checkout - position card entry

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

Answers (0)

Related Questions