@rapdel/bizdelivery v0.0.8

Rapdel biz delivery react component

Rapdel is a delivery service, this library will allow developers to integrate the Rapdel biz to your website and create orders using this component.

• Obtain the Google Map API key and Rapdel API Key
• Just import and call components.
• Try to order and check on your biz account on rapdel.com.
• ✨See the Magic ✨

Installation

Install the Rapdel biz delivery module.

npm i @rapdel/bizdelivery --save

yarn add @rapdel/bizdelivery

import module in your project ...

import RapdelBizDelivery from '@rapdel/bizdelivery';

set basic values for testing...

  const setup = {
    googleApiKey: 'GOOGLE_MAP_API_KEY',
    rapdelApiKey: 'RAPDEL_BIZ_API_KEY_FOR_YOUR_ACCOUNT',
    sandbox: true, // for testing in sandbox remove this once ready for prod
  };
     const RapdelBizOrder = RapdelBizDelivery(setup,{});
# And call this wherever you like to show the component
<div>{RapdelBizOrder}</div>

Customization

Rapdel allows you to do full customization.

import module in your project ...

import { RapdelBizOrder } from '@rapdel/bizdelivery';

import css if needed

  import "@rapdel/bizdelivery/dist/index.css";

set basic values for testing...

Basic app setup

  const setup = {
    googleApiKey: 'GOOGLE_MAP_API_KEY',
    rapdelApiKey: 'RAPDEL_BIZ_API_KEY_FOR_YOUR_ACCOUNT',
    sandbox: true, // for testing in sandbox remove this once ready for prod
  };

User details to use in project setup

   const userDetails = {
    addressLine3: 'addressLine3',
    phone: 'phone number must be 10 digit',
    name: 'name',
    email: 'email@email.com',
    specialInstructions: 'special Instructions',
  };

customize using projectSetup props

  const projectSetup = {
    hideDeliveryCharges: false,
    showAddessOnly: false,
    userDetails, // this will auto-fill user details
    hideButton: false, // to hide submit button,
    onDelveryChargeChange: (deliveryCharge) => {
      console.log('onDelveryChargeChange delivery charges, deliveryCharge);
    },
    onSuccessfulOrder: (order) => {
      console.log('onSuccessfulOrder order', order);
    }
  };

To call delivery order from the button Define a ref

const rapdelOrderRef = useRef(null);

Now we can call add ref to component and call when we needed Call this wherever you like to show the component

<RapdelBizOrder setup={setup} projectSetup={projectSetup} ref={rapdelOrderRef} />

To see the result create a function on the button click

const requestDelivery = async () => {
    rapdelOrderRef.current && rapdelOrderRef.current.requestDelivery();
};

Use the HTML button example

   <button onClick={requestDelivery}>Request Delivery</button>

Props and options

if something is not right?

Write us: hello@rapdel.com

Visit: https://rapdel.com/