Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use paypal-js for loading the JS SDK #77

Closed
wants to merge 2 commits into from
Closed

Use paypal-js for loading the JS SDK #77

wants to merge 2 commits into from

Conversation

gregjopa
Copy link
Contributor

@gregjopa gregjopa commented Aug 25, 2023 •
edited
Loading

Looking for feedback and consensus before merging.

Problem

The PayPal JS SDK script is an API that returns JavaScript. It takes in query string parameters as input and uses those settings to return a JavaScript payload that's customized for the merchant.

 <!-- Use the query string for passing in settings -->
 <script src="https://www.paypal.com/sdk/js?client-id=test&components=buttons,messages,hosted-fields&currency=USD&enable-funding=venmo"></script>

Setting these query string parameters in HTML code using a <script> tag is difficult for developers. There are two possible solutions to make the HTML dynamic:

  1. Server-side rendering using a templating language like EJS
  2. Client-side script loading with appending a <script> tag to the DOM once the query string inputs are known.

Number 1 is currently taught in the Advanced Integration Guide and adds additional complexity. Number 2 works well but requires merchant developers to roll their own solution for dynamic script loading. It does require the merchant to think about script loading order too. The JS SDK script has to finish loading before any components can be used (ex: window.paypal.Buttons()). Also no JavaScript developer likes dealing with our kebab-case parameters.

Solution

Let's have paypal-js be the recommended way for merchant developers to load the JS SDK script. The paypal-js script loader can be used in two ways:

  1. Reference it from the https://www.paypalobjects.com CDN and import the loadScript function using JavaScript Module syntax.
  2. Install it from npm as a dependency for merchants that have their own JavaScript asset pipeline solution with webpack/esbuild/rollup.

The paypal-js library also supports passing in query string parameters in camelCase which is what JavaScript developers prefer.

Here's a code example of the new approach:

The HTML code does need to use the type=module setting on the script tag to support the import syntax.

<script type="module" src="app.js" defer></script>
import { loadScript } from "https://www.paypalobjects.com/paypal-js/esm/paypal.min.js";

loadScript({
  clientId: "test",
  currency: "USD",
}).then((paypal) => {
  paypal.Buttons().render('body');
});

Risks

It seems like every modern browser supports JavaScript modules but we should do more research to confirm. This will not work in IE11 but no one should really care about that anymore. If browser support is a major concern we can update our docs to teach two different options with paypal-js:

  1. JavaScript Modules for the cool kids as described above.
  2. Using the window.paypalLoadScript() option which does not use ES Modules:
<!doctype html>
<html lang="en">
    <head>
        <script src="https://www.paypalobjects.com/paypal-js/iife/paypal.min.js"></script>
    </head>
    <body>
        <div id="paypal-buttons"></div>
        <script>
            window.paypalLoadScript({ clientId: "test" }).then((paypal) => {
                paypal.Buttons().render("#paypal-buttons");
            });
        </script>
    </body>
</html>

ravishekhar
ravishekhar approved these changes Aug 25, 2023
View reviewed changes
Copy link

@ravishekhar ravishekhar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

jshawl
jshawl approved these changes Aug 25, 2023
View reviewed changes
Copy link
Contributor

@jshawl jshawl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

standard-integration/client/app.js
],
}),
});
import { loadScript } from "https://www.paypalobjects.com/paypal-js/esm/paypal.min.js";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL!!! 💯

@gregjopa
Copy link
Contributor Author

Closing this out unmerged. We do not have consensus that this is the best approach. It was a good learning exercise.

@gregjopa gregjopa closed this Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ravishekhar ravishekhar ravishekhar approved these changes

@jshawl jshawl jshawl approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@gregjopa @jshawl @ravishekhar