react-payline
Advanced tools
This is an unofficial repository
This package provides a small layer between Payline and your React application. It removes the need of including js and css files, the use of window.Payline to access the API and the burden of declaring/removing global functions to use the event handlers.
And if you're a TypeScript user: this package is written in TypeScript and bundles type definitions 😘.
Required: before using Payline you will need to put the PaylineProvider somewhere high in your component tree. Follow this guide
Integrates the Payline widget
import { PaylineWidget } from 'react-payline';
function Payment(props) {
return (
<PaylineWidget
token="the token obtained in doWebPayment Response"
template="column"
embeddedRedirectionAllowed={false}
onFinalStateHasBeenReached={({ state }) => {
if (state === 'PAYMENT_SUCCESS') {
props.onSuccess();
return true;
}
}}
/>
);
}
The parameter props follow the documentation, except they are camelCased and don't include the data- prefix. You can also use any callback but the naming is also changed, for example: data-event-didshowstate will be onDidShowState.
If you need more info, please refer to the documentation (FR): https://docs.payline.com/pages/viewpage.action?pageId=747145714
Integrates the Payline API
import { useEffect } from 'react';
import { usePayline } from 'react-payline';
import Payment from './Payment';
function PaymentWrapper(props) {
const paylineApi = usePayline();
useEffect(() => {
if (props.show) {
paylineApi.show();
} else {
paylineApi.hide();
}
}, [show]);
return <Payment onSuccess={() => console.log('celebrate!')} />;
}
Every documented functions is available using the hook.
If you need more info, please refer to the documentation (FR): https://docs.payline.com/display/DT/API+JavaScript
The package depends on React >16.8 because it uses hooks and context. There are two ways you can embed the Payline lib
Wrap your application with the PaylineProvider component. If you omit the production prop, you will use the "homologation" environment.
import { PaylineProvider } from 'react-payline';
ReactDOM.render(
<PaylineProvider production>
<App />
</PaylineProvider>,
document.getElementById('#root')
);
You can also use a HOC to wrap your application. The first argument of the function is the production flag.
import { withPayline } from 'react-payline';
const EnhancedApp = withPayline(true)(App);
ReactDOM.render(<EnhancedApp />, document.getElementById('#root'));
Under the hood it uses react-helmet to add the script and stylesheet to the document.head.
If you're using SSR (with Next.JS or Remix for example) you probably want to handle document.head yourself.
Use PaylineHead component to render only the JS and CSS needed.
import { PaylineProvider } from 'react-payline';
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<PaylineHead production />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
FAQs
_This is an unofficial repository_
The npm package react-payline receives a total of 416 weekly downloads. As such, react-payline popularity was classified as not popular.
We found that react-payline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.