Vue Storefront 2 Reference

1. Install Magento 2 module as described in Magento Reference
2. Insert the following Nuxt's head() method to a page where you want to display the integratio (recommended - CartPreview.vue or Payment.vue)

head() {
    return {
      title: "Donmo Roundup", // Other meta information
      script: [
        {
          hid: "donmo",
          src: "https://static.donmo.org/integration.js",
          defer: true,
        },
      ],
    };
 }

3. Add DONMO_PUBLIC_KEY to process.env

4. Follow the next steps to initialize and build integration.

   Get the required VSF variables

   CartPreview.vue

   import cartGetters from '~/modules/checkout/getters/cartGetters'
   import {onMounted, useContext, watch} from "@nuxtjs/composition-api";
    
    setup {
        // ...
        const { cart, removeItem, updateItemQty, load } = useCart()
    
        const { mutate } = useApi()
        const {
            app: { i18n },
        } = useContext()
        // ...
    }

   Declare addDonationAction inside setup()

   CartPreview.vue

   // Add donation to the cart using GraphQl mutation from Donmo Magento module
   const addDonationAction = async ({ donationAmount }) => {
     const ADD_DONATION_MUTATION = `
              mutation ADD_DONATION_MUTATION($donationAmount: Float!, $cartId: String!) {
                addDonationToQuote(donationAmount: $donationAmount, cartId: $cartId){
                  message
                }
              }
            `
     await mutate(ADD_DONATION_MUTATION, {
       donationAmount,
       cartId: cart.value.id,
     })
    
     // refresh cart
     load()
   }

   Declare removeDonationAction inside setup()

   CartPreview.vue

   // Remove donation from the cart using GraphQl mutation from Donmo Magento module
   const removeDonationAction = async () => {
     const REMOVE_DONATION_MUTATION = `
              mutation REMOVE_DONATION_MUTATION($cartId: String!) {
                removeDonationFromQuote(cartId: $cartId) {
                  message
                }
              }
            `
     await mutate(REMOVE_DONATION_MUTATION, { cartId: cart.value.id })
    
     // refresh cart
     load()
   }

   Declare getExistingDonation and getGrandTotal inside setup()

   CartPreview.vue

   // Get current donation from the cart
   const getExistingDonation = () =>
     cart.value?.prices?.['donmo_donation']?.value
    
   // Get current cart grand total
   const getGrandTotal = () => cartGetters.getTotals(cart.value).total

   Call onMounted with initalization scripts inside setup()

   CartPreview.vue

   onMounted(async () => {
        await load();
    
        // All the details on possible parameters are given in the JavaScript integration docs
        const donmo = (window as any).DonmoRoundup({
        publicKey: process.env.DONMO_PUBLIC_KEY,
        isBackendBased: true,
        language: i18n.locale,
        orderId: cart.value.id,
        addDonationAction,
        removeDonationAction,
        getExistingDonation,
        getGrandTotal,
        });
    
        donmo.build();
    
        watch(
        () => cartGetters.getTotals(cart.value).total,
        () => load().then(() => donmo.refresh())
        );
    
    });