Paypal Checkout client integration - Problem with returning order id promise

Question

i have a problem integrating paypals payment gateway. I am using javascript for the client, python for the backend and the checkouts v2 api.

Creating a order on the backend works without trouble, but while waiting for my servers response the createOrder function raises a error:

unhandled_error 
Object { err: "Expected an order id to be passed\nLe/</<@https://www.sandbox.paypal.com/smart/buttons?style.layout=vertical&style.color=blue&style.shape=rect&style.tagline=false&components.0=buttons&locale.country=NO&locale.lang=no&sdkMeta=eyJ1cmwiOiJodHRwczovL3d3dy5wYXlwYWwuY29tL3Nkay9qcz9jbGllbnQtaWQ9QWJmSjNNSG5oMkFIU1ZwdXl4eW5lLXBCbHdJZkNsLXpyVXc1dzFiX29TVUloZU01LXNMaDNfSWhuTnZkNUhYSW5wcXVFdm5MZG1LN0xOZ1gmZGlzYWJsZS1mdW5kaW5nPWNyZWRpdCxjYXJkIiwiYXR0cnMiOnt9fQ&clientID=AbfJ3MHnh2AHSVpuyxyne-pBlwIfCl-zrUw5w1b_oSUIheM5-sLh3_IhnNvd5HXInpquEvnLdmK7LNgX&sessionID=e2ea737589_mtc6mtu6mdi&buttonSessionID=de4bfb3626_mtc6mjm6mtk&env=sandbox&fundingEligibility=eyJwYXlwYWwiOnsiZWxpZ2libGUiOnRydWV9LCJjYXJkIjp7ImVsaWdpYmxlIjpmYWxzZSwiYnJhbmRlZCI6dHJ1ZSwidmVuZG9ycyI6eyJ2aXNhIjp7ImVsaWdpYmxlIjp0cnVlfSwibWFzdGVyY2FyZCI6eyJlbGlnaWJsZSI6dHJ1ZX0sImFtZXgiOnsiZWxpZ2libGUiOnRydWV9LCJkaXNjb3ZlciI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJoaXBlciI6eyJlbGlnaWJsZSI6ZmFsc2V9LCJlbG8iOnsiZWxpZ2libGUiOmZhbHNlfSwiamNiIjp7ImVsaWdpYmxlIjpmYWxzZX19…", timestamp: "1593537805136", referer: "www.sandbox.paypal.com", sessionID: "e2ea737589_mtc6mtu6mdi", env: "sandbox", buttonSessionID: "de4bfb3626_mtc6mjm6mtk" }
Error: Expected an order id to be passed 
Error: Expected an order id to be passed 
12V21085461823829  // ticks in a few seconds later

Console screenshot

The problem seems to be that createOrder does not wait for the promise before raising the error, or that the promise is not given in the correct way. Something like that. Anyways here is the client side code:

paypal.Buttons({
    
    // button styling removed for clarity

    createOrder: function() {
        // purchase information 
        var data =  {
            'track_id': vm.selectedTrack.id,
            'lease_id': vm.selectedLease.id,
        }
        
        // post req to api with lease and track ids 
        // create payment on server side
        fetch('http://localhost:5000/api/paypal/create-purchase', {
            method: 'post',
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify(data),
        }).then(function(res) {
            return res.json();
        }).then(function(data) {
            console.log(data.order_id)
            return data.order_id
        })
    }
// conatiner element to render buttons in
}).render('#paypal-button');

And the server side:

@app.route('/api/paypal/create-purchase', methods=['POST'])
def paypal_create_purchase():

    # cart validation removed for clarity

    # create paypal purchase

    environment = SandboxEnvironment(client_id=app.config['PAYPAL_PUBLIC'], client_secret=app.config['PAYPAL_PRIVATE'])
    client = PayPalHttpClient(environment)

    paypal_request = OrdersCreateRequest()
    paypal_request.prefer('return=representation')
    paypal_request.request_body (
        {
            "intent": "CAPTURE",
            "purchase_units": [
                {
                    "amount": {
                        "currency_code": "USD",
                        "value": lease.price
                    }
                }
            ]
        }
    )
    try:
        # Call API with your client and get a response for your call
        response = client.execute(paypal_request)
        order = response.result
        print(order.id)

    except IOError as ioe:
        print (ioe)
        if isinstance(ioe, HttpError):
            # Something went wrong server-side
            print(ioe.status_code)

    # note that it is the same key as on the client
    return jsonify(success=True,order_id=order.id)
    

I found this similar thread, but i dont consider the origin of the error to be the same as in that thread (incorrect json key on client)

Also see this relevant page in the docs which supplies this code:

createOrder: function() {
    return fetch('/my-server/create-paypal-transaction', {
        method: 'post',
        headers: {
            'content-type': 'application/json'
        }
    }).then(function(res) {
        return res.json();
    }).then(function(data) {
        return data.orderID; // Use the same key name for order ID on the client and server
    });
}

Answer 1

Damn, just as i was typing out the last part of the post i noticed the error. A missing return before my fetch call. Will leave this up for other people with the same mistake.