Creating a API plugin

Need help Plugins
1

Hey forum,

I am trying to create API to send a “lead” to my client.

This is what I have right now:
function(properties, context) {
Bubble.plugins.action(“send-lead-to-offerte-vergelijker”, {
run_client: function (actions, data) {
const apiUrl = ‘https://www.offertevergelijker.nl/api/create/’;

      const {
        guid,
        secret_key,
        customer_first_name,
        customer_last_name,
        customer_postal_code,
        customer_house_number,
        customer_street,
        customer_city,
        customer_email_address,
        customer_phone,
        product_id,
        type_request,
        owner_of_building,
        power_consumption,
        execution_date,
        extra_note,
      } = data;

      const leadData = {
        guid,
        secret_key,
        customer: {
          customer_first_name,
          customer_last_name,
          customer_postal_code,
          customer_house_number,
          customer_street,
          customer_city,
          customer_email_address,
          customer_phone,
        },
        product: {
          product_id,
          type_request,
          owner_of_building,
          power_consumption,
          execution_date,
          extra_note,
        },
      };

      if (data.type_roof) {
        leadData.product.type_roof = data.type_roof;
      }

      fetch(apiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(leadData),
      })
        .then(response => response.json())
        .then(data => {
          console.log('API Response:', data);
          actions.done();
        })
        .catch(error => {
          console.error('API Error:', error);
          actions.done({status: 'error', description: 'API-fout'});
        });
    },
  });
}

Schermafbeelding 2023-10-20 om 13.51.29
Schermafbeelding 2023-10-20 om 13.51.29872×552 67.2 KB

This is the error I receive. What can I do to fix this?

2

Hey @jona ,

Here are a few things I’m seeing

  1. I believe you don’t need run_client. Typically, you’d just select the action type for a plugin.
  2. I’m not sure Bubble.plugins.action is also necessary, when you’re in the action editor it should already be associated to the action and I don’t think you can link other actions to your action in the plugin editor
  3. If guid and customer_first_name are input fields, access them using properties.guid and properties.customer_first_name . Inputs are in the Bubble properties object.
  4. A screenshot of your complete plugin action setup would be really helpful!

Typically for an action with sending data your format would look something like

async function(properties, context) {
    // Retrieve the API Key from context
    var apiKey = context.keys["API Key"];

    try {
        // Define the API endpoint URL
        const url = 'api url';

        // Set up the POST request options
        const options = {
            uri: url,
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                Authorization: apiKey
            },
            body: JSON.stringify({
                property1: properties.property1, // Add properties as needed
                property2: properties.property2
            })
        };

        // Make the POST request
        const result = await context.v3.request(options);
        
        // Parse the returned JSON body
        var jsonbody = JSON.parse(result.body);

        // Return values as needed
        return {
            returnvalue1: jsonbody.property1,
            returnvalue2: jsonbody.property2
        };

    } catch (e) {
        // Handle the error (you can customize this as needed)
        console.error("An error occurred:", e);
        throw e;
    }
}
2 Likes