@paypal/sdk-client
Advanced tools
A shared client for PayPal/Braintree client sdk modules. Has both client-side and server-side bindings to help you build and integrate an sdk component.
Your client-side sdk component can take advantage of any common utilities or functionality exposed by this module. For example:
import { getClientID } from "@paypal/sdk-client/src";
fetch("https://api.paypal.com/v1/foo", {
headers: {
"client-id": getClientID(),
},
});
This module helps you load the payments sdk in a child window, matching the url from the parent.
<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID"></script> in the child frame or popup, because different query params could have been passed on the top level page, and to take advantage of any caching benefits you need to match the url exactly as it appeared in the parent./sdk/js, but that's a lot to keep track of, and you would need to update your code every time a new parameter is added.https://www.paypal.com/sdk/js?client-id=xyz&... url down from the parent to each new child; meaning we'll get an exact match each time, with exact the same version of the code, and any new url params will automatically be included without any more integration work.This module helps with that.
unpackSDKMeta:import { unpackSDKMeta } from "@paypal/sdk-client";
unpackSDKMeta with req.query.sdkMeta, passed from the client in the query string, and pass the script tag in the page render.// Listen for requests to your app
app.get("/my-app", (req, res) => {
// Unpack the sdk meta payload from the client
const { getSDKLoader } = unpackSDKMeta(req.query.sdkMeta);
// Call getSDKLoader to build a script tag, passing in csp nonce, if applicable
const sdkScriptTag = getSDKLoader({ nonce });
// Insert script tag into response
res.send(`
<body>
<h1>My App</h1>
${sdkScriptTag}
</body>
`);
});
sdkMeta payload is passed to the child window from the parent. If you are using zoid to construct your component, please add the following:import { getSdkMeta } from "@paypal/sdk-client/src";
let MyComponent = zoid.create({
tag: "my-component",
url: "https://www.paypal.com/my-component",
props: {
sdkMeta: {
type: "string",
value: getSdkMeta,
queryParam: true,
},
},
});
If you are not using zoid, please use getSdkMeta() to construct the sdkMeta payload, and pass it to your child-window or frame in a different way.
Notes:
<head> tag.window.xprops, containing the props used to receive data from the parent and used to send callbacks back to the parent window, will only be available after the script tag has completed loading on the client. If any other scripts require window.xprops immediately, please ensure the sdk script tag is placed before those scripts.unpackSDKMeta will throw an error if req.query.sdkMeta does not validate. This should be handled and translated into a 500 server error, indicating that the payload has been tampered with.unpackSDKMeta may be passed undefined if req.query.sdkMeta is not present. This is necessary for some legacy integrations where the sdk metadata is passed via window.name entirely on the client-side.npm install --save @paypal/sdk-client
npm run setup./src and writing tests in ./testsnpm run buildnpm run build
Edit tests in ./test/tests
Run the tests:
npm test
FAQs
Shared config between PayPal/Braintree.
The npm package @paypal/sdk-client receives a total of 1,414 weekly downloads. As such, @paypal/sdk-client popularity was classified as popular.
We found that @paypal/sdk-client demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.