ourpayelements
JS/React library for MFE Demo widgets
Development
- Clone repository
- Install dependencies
cd mfe-demo-widget
npm install
- Start development bundler
npm run dev
- Start example web app
cd example/react OR cd example/js
npm i
npm run dev
Usage
Install as an NPM package (npm i @ourpay/donation) or import from CDN: https://www.unpkg.com/@ourpay/donation
NOTE: If you want to inject the bundle straight into the browser via script tags, make sure to import the browser bundle: https://www.unpkg.com/@ourpay/donation/dist/browser.js as it has all the React dependencies included
React
import {
DonationForm,
DonationTable,
DonationProvider,
} from "@ourpay/donation";
export default function App() {
return (
<DonationProvider
appId={123}
backgroundColor="#758BFD"
primaryTextColor="#F1F2F6"
>
<DonationForm defaultAmount={5} />
<DonationTable title="Donation Table" />
</DonationProvider>
);
}JS
Example:
// Initialize JS factory
const elements = OurpayDonation.Elements({
appId: 123,
backgroundColor: "#fff",
primaryTextColor: "#000",
}); // uses OurpayDonation global variable
elements.DonationForm.mount("#form-id", {
defaultAmount: 100,
});
elements.DonationTable.mount("#table-id", {
title: "Donation Table",
});