Commented inside code.
I've attempted both .then() and even used the param from the function data and actions neither return a value. I'm assuming the call needs to be made AFTER the payment is created. But "how?" when the transaction is being created on a return script.

<script>
/*
    // Render the PayPal button

    paypal.Button.render({

        // Set your environment

        env: 'sandbox', // sandbox | production

        // Specify the style of the button

        style: {
            label: 'checkout',
            size:  'small',    // small | medium | large | responsive
            shape: 'pill',     // pill | rect
            color: 'gold'      // gold | blue | silver | black
        },

        // PayPal Client IDs - replace with your own
        // Create a PayPal app: https://developer.paypal.com/developer/applications/create

        client: {
            sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
            production: '<insert production client id>'
        },*/

        payment: function(data, actions) { 
            return actions.payment.create({ //<- specifically over here
                payment: {
                    transactions: [
                        {
                            amount: { total: '0.01', currency: 'USD' }
                        }
                    ]
                }
            }).then(function(payment){
                window.alert(payment.id);  // i desire the payment id. but it keeps returning undefined no matter what i do.
            });
        },
/*
        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function() {
                window.alert('Payment Complete!');
            });
        }

    }, '#paypal-button-container');
*/
</script>

I noticed the closing </html> tag is missing in one of the code snippets. There are probably other minor issues. Use the feedback from the w3c validator to ensure the code snippets are valid html.

For example, here's a screenshot of the validation errors for the client-side code snippet:

The server-side REST demo on https://developer.paypal.com/demo/checkout/#/pattern/server is throwing an error in the in-context window of 'Transaction is Invalid. Here is the image. Also the url fallback is https://www.paypal.com/webapps/hermes/fallback?product=ec&fallback=1&token=PAY-2RG33944AJ083411YLIQFA4A

We also have a merchant reporting the exact same issue.

Shouldn't this be id and not paymentID

{"id":"PAY-5T1130394T551090NLGRLACY"} ?

It took me 30 minutes to figure that out.

we should have the server just respond with the entire payment object and change the client side to return res.id in the payment callbacks. I think it will cause less confusion.

This affects both this demo and the developer documentation examples in the PayPal Developer Portal.

Steps:

• Follow demo links in the public docs at developer.paypal.com
  OR
• clone project
• replace clientIDs and secrets with working APP in sandbox
• Update callbacks in client portion of demo
• run via Docker per Readme
  ± |master ?:1 ✗| → docker-compose up Starting paypalcheckoutdemo_web_1 Attaching to paypalcheckoutdemo_web_1 web_1 | Server started at http://localhost:8002/demo/checkout

The Button never renders. Basically nothing happens. It did work a few weeks ago. There are no errors in the browser or on the demo server. The only output in the client is the following:

util.js:64 XHR failed loading: POST "https://www.sandbox.paypal.com/webapps/hermes/api/logger". 09:50:56.072 util.js:64 XHR finished loading: POST "https://www.paypal.com/webapps/hermes/api/logger".

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency lint-staged to v14
• chore(deps): update dependency nodemon to v3
• chore(deps): update dependency prettier to v3
• chore(deps): update node.js to v20
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency angular.js to v1.8.3
• chore(deps): update babel packages (babel-core, babel-loader)
• chore(deps): update dependency concurrently to v8
• chore(deps): update dependency husky to v8
• chore(deps): update dependency webpack to v5
• chore(deps): update dependency webpack-cli to v5
• chore(deps): update dependency webpack-dev-server to v4
• chore(deps): update eslint packages (eslint, eslint-config-prettier, eslint-plugin-prettier)
• fix(deps): update react monorepo to v18 (react, react-dom)
• fix(deps): update react-router monorepo to v6 (react-router, react-router-dom)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

When checking out the repo and running docker-compose up the container is successfully built but then throws 'Error: Cannot find module 'express'' when the server is attempted to be started. Perhaps a node path issue?

Add a meta description tag to help improve SEO. Bonus points for updating the <title> and <meta name="description" with client-side routing changes.

Here's a screenshot of how this app can look in google search results:

when I click the button in context pops up briefly but closes immediately.
tried Firefox and Chrome
works in live

inContext works in other places so it seems related to the demopage