How to intergrate BEEM Sms API with React

Hello Devs,

After facing some challenges while integrating the BEEM SMS API with React.js, I finally succeeded and thought, why not share my experience to help others who might be attempting the same task?

In this article, I'll guide you through the process step-by-step to make your integration smooth and straightforward.

BEEM SMS API is a REST based API that supports sending sms as well as receiving delivery status reports. It currently only operates across Africa.

Getting Hands Dirty.

1. Visit the BEEM website, sign up, and if everything goes well, you will be redirected to the dashboard.

2. Once you have signed up, you automatically receive 10 SMS credits. If you need more (which you probably will), simply click on "Purchase SMS" in the sidebar.

3. Enter the desired quantity of messages in the "Purchase Quantity" field, then click the "Next" button. Select your preferred payment method, complete the payment process, and once the transaction is confirmed, you'll receive an email from BEEM. Your SMS credits will then be updated and displayed on the dashboard.

4. Generate your API key by clicking on "API Setup" in the sidebar. If you don't have an autogenerated key, click the "Create" button to generate one.

5. Scroll down the sidebar and click on "API Docs" to understand how things operate. In the documentation, scroll further down to "Sample Scripts" to find a POST script for sending SMS

6. Now that we are all setup, create a react project by running the command npx create-react-app my-app. Open App.js and on your component's return() paste this:
   

return (
   <div className="App">
     <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <button style={{width: 100, height: 50}} onClick= 
           {sendMessage}>Send Message</button>
      </header>
    </div>

   </div>
  );

1. When the button is clicked, it will trigger the sendMessage method. Paste the following code to implement the sendMessage method

const sendMessage = async () => {
    const API_KEYY = "your api key";
    const SECRET_KEY = "your secret key";
    const CONTENT_TYPE = "application/json";
    const SOURCE_ADDR ="INFO"; //This is a default SENDER ID you are 
    assigned to on signup , you can later change it
    const url = 'https://api.beem.africa/v1/send';

    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": CONTENT_TYPE,
        Authorization: "Basic " + btoa(API_KEYY + ":" + SECRET_KEY),
      },
      body: JSON.stringify({
        source_addr: SOURCE_ADDR,
        schedule_time: "",
        encoding: 0,
        message: "Hello World",
        recipients: [
          {
            recipient_id: 1,
            dest_addr: "25465943782",
          },

        ],
      }),
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.error(error));
  }

*What the code does *

This code defines a function sendMessage that sends an SMS message using the BEEM SMS API. It sets up the necessary parameters such as API_KEYY, SECRET_KEY, CONTENT_TYPE, and SOURCE_ADDR (which is a default sender ID assigned to you on signup but can be changed later).

Once the request is sent, it handles the response by converting it to JSON and logging the data to the console. Any errors that occur during the request are caught and logged to the console as well

1. On clicking Send Message, Voila your message is sent. The SMS will be sent from a default name(INFO), that you can change by simply going on the dashboard's sidebar and click "Sender Names" under the "Campaign" link. Apply for a sender name, after the application is approved you can now use that as your sender name/SOURCE_ADDR/SENDER ID

Note:If you are using the sender ID "INFO", please note that you can only send messages successfully to some limited mobile networks. The message will be sent, but it may not be delivered to the recipient. To ensure successful delivery, consider applying for a sender ID/sender name

That's it, adios !