Add Liberapay to PaymentMethod

components/soutyen/payment-method.js

@@ -4,10 +4,11 @@ import Tab from '@mui/material/Tab'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 
-import {Paypal} from '@icons-pack/react-simple-icons'
+import {Paypal, Liberapay} from '@icons-pack/react-simple-icons'
 import {Elements} from '@stripe/react-stripe-js'
 import {loadStripe} from '@stripe/stripe-js'
 
+import {Grid} from '@mui/material'
 import {appearance} from '../../lib/utils/stripe-style'
 
 import CheckoutForm from './checkout-form'
@@ -18,6 +19,7 @@ const stripePromise = loadStripe(
 )
 
 const PAYPAL_ID = process.env.NEXT_PUBLIC_PAYPAL_DONATE_ID
+const LIBERAPAY_DONATE = process.env.NEXT_PUBLIC_LIBERAPAY_DONATE
 
 function TabPanel(props) {
   const {children, value, index, ...other} = props
@@ -66,9 +68,9 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
     <Box sx={{width: '100%'}}>
       <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
         <Tabs scrollButtons allowScrollButtonsMobile value={paymentMethod} aria-label='basic tabs example' variant='fullWidth' onChange={handleChange}>
-          <Tab label='Don Carte bancaire' {...a11yProps(0)} />
-          <Tab label='Don PayPal' {...a11yProps(1)} />
-          <Tab label='Adhésion' {...a11yProps(2)} />
+          <Tab wrapped label='Carte bancaire' {...a11yProps(0)} />
+          <Tab wrapped label='PayPal / Liberapay' {...a11yProps(1)} />
+          <Tab wrapped label='Adhésion' {...a11yProps(2)} />
         </Tabs>
       </Box>
       <TabPanel value={paymentMethod} index={0}>
@@ -104,9 +106,18 @@ export default function PaymentMethod({isLoading, paymentMethod, setPaymentMetho
         )}
       </TabPanel>
       <TabPanel value={paymentMethod} index={1}>
-        <Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>
-          Cliquez ici pour faire un don via PayPal
-        </Button>
+        <Grid container rowSpacing={1}>
+          <Grid item md={6} xs={12}>
+            <Button variant='outlined' size='large' endIcon={<Paypal />} onClick={() => window.open(`https://www.paypal.com/donate/?hosted_button_id=${PAYPAL_ID}`, '_blank')}>
+              Faire un don via PayPal
+            </Button>
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <Button variant='outlined' size='large' endIcon={<Liberapay />} onClick={() => window.open(`https://liberapay.com/${LIBERAPAY_DONATE}/donate`, '_blank')}>
+              Faire un don via Liberapay
+            </Button>
+          </Grid>
+        </Grid>
       </TabPanel>
       <TabPanel value={paymentMethod} index={2}>
         <Button size='large' variant='outlined' onClick={() => window.open('https://www.helloasso.com/associations/organisation-ka-internationale/adhesions/adhesion-oki', '_blank')}>