After completing the payment, Paypal Express checkout causes the page to refresh

Question

After completing the payment, Paypal Express checkout causes the page to refresh

I have integrated an Express checkout button into my webpage and configured the server-side process with client code:

<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
    var CREATE_PAYMENT_URL = "<create_payment_url>";
    var EXECUTE_PAYMENT_URL = "<execute_payment_url>";

    paypal.Button.render({
        env: "sandbox",
        payment: function (resolve, reject) {
            return paypal.request.post(CREATE_PAYMENT_URL)
                .then(function (data) {
                    resolve(data.id);
                })
                .catch(function (err) {
                    reject(err);
                });
        },
        onAuthorize: function (data) {
            return paypal.request.post(EXECUTE_PAYMENT_URL, { paymentID: data.paymentID, payerID: data.payerID })
                .then(function (data) {
                    document.querySelector('#paypal-button').innerText = 'Payment Complete!';
                    console.log("Success", data);
                })
                .catch(function (err) {
                    console.log("Error", err);
                });
        }
    }, "#paypal-button");
</script>

Although I am using the server-side .NET SDK to facilitate payment creation and processing with generic handlers, I am facing an issue where the entire page reloads after the payment is executed.

My goal is to manage the results/errors through execution listeners using the callbacks defined with the .then() and .catch() methods in paypal.request.post(EXECUTE_PAYMENT_URL, ...).

In PayPal's interactive demo available at https://developer.paypal.com/demo/checkout/#/pattern/server, the listener functions as expected.

Any suggestions on how I can address this issue would be greatly appreciated.

javascript .net paypal

Answer 1

Answer №1

In my create payment handler (CREATE_PAYMENT_URL), I encountered an issue with the default redirect_urls. These URLs are not necessary for my use case as responses are handled by JavaScript listeners. Despite this, redirect_urls are a required parameter for the Payment object. Interestingly, it appears that the actual URLs provided don't need to be accurate, only the server port needs to respond.

The server-side code I am working with is as follows:

Dictionary<string, string> config = ConfigManager.Instance.GetProperties();
string accessToken = new OAuthTokenCredential(config).GetAccessToken();
APIContext apiContext = new APIContext(accessToken);
Payer payer = new Payer()
{
    payment_method = "paypal"
};
RedirectUrls redirUrls = new RedirectUrls()
{
    cancel_url = "http://localhost:<correct_port>/some_cancel.ashx",
    return_url = "http://localhost:<correct_port>/some_return.ashx"
};
ItemList itemList = new ItemList()
{
    items = new List<Item>() {
    // Some items
}
};
Amount amount = new Amount()
{
    currency = "EUR",
    total = "##.##",
};
List<Transaction> transList = new List<Transaction>()
{
    new Transaction() {
        amount=amount,
        description="Desc...",
        invoice_number="#####",
        item_list=itemList
    }
};
Payment payment = new Payment()
{
    intent = "sale",
    payer = payer,
    transactions = transList,
    redirect_urls = redirUrls
};
Payment createdPayment = payment.Create(apiContext);
context.Response.Write(/*<Serialized response>*/);

Additionally, I have a question regarding the sandbox buyer Paypal account. When logging in, I noticed that I am unable to change the payment method, with only the Paypal balance available. However, when I tested the demo at https://developer.paypal.com/demo/checkout/#/pattern/server, I was able to change the payment method to a Credit card linked to the same Paypal account. Both tests were conducted using the same sandbox account.

Thank you.

Answer 2

In my create payment handler (CREATE_PAYMENT_URL), I encountered an issue with the default redirect_urls. These URLs are not necessary for my use case as responses are handled by JavaScript listeners. Despite this, redirect_urls are a required parameter for the Payment object. Interestingly, it appears that the actual URLs provided don't need to be accurate, only the server port needs to respond.

The server-side code I am working with is as follows:

Dictionary<string, string> config = ConfigManager.Instance.GetProperties();
string accessToken = new OAuthTokenCredential(config).GetAccessToken();
APIContext apiContext = new APIContext(accessToken);
Payer payer = new Payer()
{
    payment_method = "paypal"
};
RedirectUrls redirUrls = new RedirectUrls()
{
    cancel_url = "http://localhost:<correct_port>/some_cancel.ashx",
    return_url = "http://localhost:<correct_port>/some_return.ashx"
};
ItemList itemList = new ItemList()
{
    items = new List<Item>() {
    // Some items
}
};
Amount amount = new Amount()
{
    currency = "EUR",
    total = "##.##",
};
List<Transaction> transList = new List<Transaction>()
{
    new Transaction() {
        amount=amount,
        description="Desc...",
        invoice_number="#####",
        item_list=itemList
    }
};
Payment payment = new Payment()
{
    intent = "sale",
    payer = payer,
    transactions = transList,
    redirect_urls = redirUrls
};
Payment createdPayment = payment.Create(apiContext);
context.Response.Write(/*<Serialized response>*/);

Additionally, I have a question regarding the sandbox buyer Paypal account. When logging in, I noticed that I am unable to change the payment method, with only the Paypal balance available. However, when I tested the demo at https://developer.paypal.com/demo/checkout/#/pattern/server, I was able to change the payment method to a Credit card linked to the same Paypal account. Both tests were conducted using the same sandbox account.

Thank you.

After completing the payment, Paypal Express checkout causes the page to refresh

Answer №1

Similar questions

Vuex is exclusively eliminating the initial element

Scroll a div using JavaScript/jQuery

Achieving compatibility with pseudo elements :before/:after in Internet Explorer 7

Ways to eliminate the white overlay that occurs on the page after clicking the scroll top button

The AJAX load event listener triggers prior to receiving a response from the server

I am currently experiencing some challenges with using jquery ajax post in conjunction with PHP

Keep moving forward in Sailsjs even after sending back a response with res.json();

Unveil the Expressjs middleware within the API Client

Vue-chartjs line chart not displaying data fetched from API

Generate a randomly structured 2D array called "Array" using JavaScript

Angular: Identifier for Dropdown with Multiple Selection

Issues with clearRect() function in HTML5 canvas

Develop a dynamic thunk and additional reducer to efficiently handle multiple API calls and retrieve data

Is there a way to modify the FixedTableHeader jQuery plugin to include a fixed first column in addition to the fixed header?

How do I make the YouTube Grid Gallery player show up in a pop-up window?

Sending data from PHP to JavaScript using AJAX

jQuery error: an unexpected token was encountered

Update the SQL database by transferring star ratings from a JSP file

Utilize Vue to access and read a file stored in the current directory

The React application is functioning properly; however, during compilation, it continually displays an error stating that the module cannot be found