Search code examples
jqueryformspaypalhttp-postform-post

How to post form on successful paypal payment?


I have a form on my HTML page containing paypal button and paypal credit card button. This is a simple HTML, JS site, not a webstore. How can I post the form programatically after successful payment? My onApprove part is not working below. *Only paypal sandbox account is set at the moment.

paypal.Buttons({
            style: {
                layout: 'vertical',
                color: 'black',
                shape: 'rect',
                label: 'paypal',
                height: 45
            },
            createOrder: function (data, actions) {
                // This function sets up the details of the transaction, including the amount and line item details.
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: total
                        }
                    }]
                });
            },
            onApprove: function (data, actions) {
                // This function captures the funds from the transaction.
                return actions.order.capture().then(function (details) {
                    // This function shows a transaction success message to your buyer.
                    $('#orderForm').submit();
                });
            }
            //fundingSource: paypal.FUNDING.PAYPAL
        }).render('#paypal-button-container');

Solution

  • After a client-side actions.order.capture(), you should NOT post a form nor write to a database, or anything of this nature. Client-side integrations are not for that use case. If you need to send or store data on a server as part of a PayPal transaction, you ought to use a server-side integration:


    Make two routes on your server, one for 'Create Order' and one for 'Capture Order', documented here. These routes should return only JSON data (no HTML or text). The latter one should (on success) store the payment details in your database before it does the return (particularly purchase_units[0].payments.captures[0].id, the PayPal transaction ID)

    Pair those two routes with the following approval flow: https://developer.paypal.com/demo/checkout/#/pattern/server

    If you need to transmit data to the server, add a request body to the fetch; don't use a form post.