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",
});