Skip to main content
ArcBlock Community

How to integrate Donation with blocklet

Adewambe Daniel
Developers
buildersdocs

Good day, i wanted to ask if there's anyway i can create a donation checkout url from a nodejs backend

i want the price to be flexible and selectable by the user

thank you

3 replies

wangshijun23 months ago

Hi, Payment Kit supports a set of React Components for easier integration with other blocklets: https://www.npmjs.com/package/@blocklet/payment-react

And the following code is used in the Blocklet Store for donations:

javascriptCopy
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { CheckoutDonate, PaymentProvider } from '@blocklet/payment-react';
import { Coffee } from '@mui/icons-material';
import Box from '@mui/material/Box';
import PropTypes from 'prop-types';
import { useSessionContext } from '../../contexts/session';

export default function BlockletPayments({ blocklet }) {
  const { t } = useLocaleContext();
  const { session, connectApi } = useSessionContext();

  if (!blocklet.owner?.did) {
    return null;
  }

  return (
    <PaymentProvider session={session} connect={connectApi}>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: 4,
          mt: { xs: 1, sm: 3 },
        }}>
        <CheckoutDonate
          settings={{
            target: blocklet.did,
            title: `Support: ${blocklet.title}`,
            description: blocklet.description,
            reference: window.location.href,
            beneficiaries: [
              {
                address: blocklet.owner.did,
                share: '9',
              },
              {
                address: window.blocklet.appId,
                share: '1',
              },
            ],
            amount: {
              presets: ['0.99', '1.99', '2.99', '4.99', '9.99', '19.99'],
              preset: '1',
              minimum: '0.01',
              maximum: '100',
              custom: true,
            },
            appearance: {
              button: {
                id: 'blocklet-support-button',
                text: t('blocklet.support'),
                icon: <Coffee />,
                size: 'large',
                color: 'error',
                variant: 'outlined',
              },
              history: {
                variant: 'table',
              },
            },
          }}
        />
      </Box>
    </PaymentProvider>
  );
}

BlockletPayments.propTypes = {
  blocklet: PropTypes.object.isRequired,
};
Adewambe Daniel23 months ago

Thank you

But how do i call it in the app.tsx

doing it the regular way, i get a blank page with no error in the console

here is a snippet of the code

javascriptCopy
function App(){
  return (
    <div className="app">
      <Routes>
        <Route path="/" element=(<Home />)/>
        <Route path="*" element=(<Navigate to="/" />]/>
        <Route path="/google-login/success"
         element=(<GoogleAuthSuccess />]/>
        <Route path='/donate'element=(<BlockletPayments
        blocklet=[window?.blocklet)/>)/>
      </Routes>
    </div>
  )
}
wangshijun23 months ago

Any error in the dev tools console?

Reply