OpenPix React SDK
OpenPix React SDK Using the OpenPix Platform. OpenPix Developers
How to install
yarn install @openpix/react
Setup Polyfills
This plugin uses core-js to polyfill Promises
Install core-js
yarn install core-js
Add it to your App entrypoint
import 'core-js/stable';
Usage with React
import { useState } from 'react';
import { useOpenPix } from '@openpix/react';
import QRCode from 'qrcode.react';
const App = () => {
const [charge, setCharge] = useState(null);
const onPay = (charge) => {
// TODO do something
console.log('charge was paid');
}
const { chargeCreate } = useOpenPix({
appID: process.env.APP_ID,
onPay,
});
const newCharge = async () => {
const payload = {
correlationID: 'myCorrelationID',
value: 1, // one cent
comment: 'Donate',
}
const { charge, error } = await chargeCreate(payload);
if (error) {
setError(error);
return;
}
setCharge(charge);
}
if (charge) {
return (
<QRCode
size={200}
renderAs={'svg'}
value={brCode}
includeMargin={false}
/>
);
}
return (
<>
<button onClick={newCharge}>
Create New Charge
</button>
</>
)
}
Usage with React Native or Expo
import { useState } from 'react';
import { useOpenPix } from '@openpix/react';
import QRCode from 'react-native-qrcode-svg';
const App = () => {
const [charge, setCharge] = useState(null);
const onPay = (charge) => {
// TODO do something
console.log('charge was paid');
}
const { chargeCreate } = useOpenPix({
appID: process.env.APP_ID,
onPay,
});
const newCharge = async () => {
const payload = {
correlationID: 'myCorrelationID',
value: 1, // one cent
comment: 'Donate',
}
const { charge, error } = await chargeCreate(payload);
if (error) {
setError(error);
return;
}
setCharge(charge);
}
if (charge) {
return (
<QRCode
size={200}
value={brCode}
/>
);
}
return (
<>
<button onClick={newCharge}>
Create New Charge
</button>
</>
)
}