Hello and thanks for reading :)
This is what I'm trying to achive:

I have a searchbox 

<!--Search Box -->
        <lightning:input type="search" label="Enter character ID" aura:id="characterID" onchange="{!c.APICallout}"/>

that expects a number (this would be an integer ID for a star wars character). When the user inputs this number, the searchbox (onChange) makes a call to the API and returns a valid json (star wars character), looks something like this  

{
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "https://swapi.dev/api/planets/1/",
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-20T21:17:56.891000Z",
    "url": "https://swapi.dev/api/people/1/"
}

that fills up the form that is beyond the searchbox (can you see both in the component ? ) with the attributes of the character returned from the API callout.

This part is working fine !! (needs fixes, but works)

Second part would be to Save the character by clicking a button in the form.

<lightning:button label="Create Star Wars Character" 
     class="slds-m-top--medium"
      variant="brand"
      onclick="{!c.clickCreate}"/>

this is not working and needs help.

------------------

This is the component

<aura:component controller="starWarsCallout">

    <aura:attribute name="characters" type="SWCharacter__c[]"/>

    <aura:attribute name="newSWCharacter" type="SWCharacter__c"
         default="{ 'sobjectType': 'SWCharacter__c',
                        'Name': '',
                        'Height__c': 0,
                        'SkinColor__c': '',
                        'Gender__c': '',
                        'Planet__c': ''}"/>

    <aura:attribute name="response" type="Map"/>

    <aura:attribute name="CharacterName" type="String"/>
    <aura:attribute name="CharacterHeight" type="Integer"/>
    <aura:attribute name="CharacterSkinColor" type="String"/>
    <aura:attribute name="CharacterPlanet" type="String"/>
    <aura:attribute name="CharacterGender" type="String"/>   

    <aura:attribute name="ListOfFilms" type="String[]"/>
    <aura:attribute name="ListOfSpecies" type="String[]"/>
    <aura:attribute name="ListOfVehicles" type="String[]"/>
    <aura:attribute name="ListOfStarships" type="String[]"/>

    <!--Header -->
    <div class="slds-m-around--medium">
        <!--Search Box -->
        <lightning:input type="search" label="Enter character ID" aura:id="characterID" onchange="{!c.APICallout}"/>

        <!--iterate the list of Films-->    
         <h3 class="slds-section-title--divider">List Of Films</h3>
        <ul class="slds-list--dotted">
            <aura:iteration items="{!v.ListOfFilms}" var="film">
                <li>{!film}</li>
            </aura:iteration>
        </ul>

        <!--iterate the list of Species-->    
        <h3 class="slds-section-title--divider">List Of Species</h3>
        <ul class="slds-list--dotted">
            <aura:iteration items="{!v.ListOfSpecies}" var="specie">
                <li>{!specie}</li>
            </aura:iteration>
        </ul>

        <!--iterate the list of Vehicles-->
        <h3 class="slds-section-title--divider">List Of Vehicles</h3>
        <ul class="slds-list--dotted">
            <aura:iteration items="{!v.ListOfVehicles}" var="vehicle">
                <li>{!vehicle}</li>
            </aura:iteration>
        </ul>

        <!--iterate the list of StarShips-->
        <h3 class="slds-section-title--divider">List Of StarShips</h3>
        <ul class="slds-list--dotted">
            <aura:iteration items="{!v.ListOfStarships}" var="starship">
                <li>{!starship}</li>
            </aura:iteration>
        </ul>
    </div>


    <!-- BOXED AREA -->
        <fieldset class="slds-box slds-theme--default slds-container--small">
        <legend id="characterform" class="slds-text-heading--small 
          slds-p-vertical--medium">
          Add Character
        </legend>
            <!-- CREATE NEW CHARACTER FORM -->
            <form class="slds-form--stacked">          
                <lightning:input type="text" aura:id="peopleform" label="Character Name"
                name="characterName"
               value="{!v.CharacterName}"
                required="true"/> 
                <lightning:input type="number" aura:id="peopleform" label="Height"
                                 name="characterHeight"
      value="{!v.CharacterHeight}"/>
      <lightning:input type="text" aura:id="peopleform" label="Gender"
                                 name="characterGender"
       value="{!v.CharacterGender}"/>
       <lightning:input type="text" aura:id="characterform" label="Planet"            name="characterPlanet"
      value="{!v.CharacterPlanet}"/>
       <lightning:input type="text" aura:id="characterform" label="Skin Color"               name="characterSkincolor"
        value="{!v.CharacterSkinColor}"/>
       <lightning:button label="Create Star Wars Character" 
     class="slds-m-top--medium"
      variant="brand"
      onclick="{!c.clickCreate}"/>
            </form>
        </fieldset>
</aura:component>

This is the c.clickCreate() function
 

clickCreate: function(component, event, helper) {
        var validSWCharacter = component.find('peopleform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validSWCharacter){

            // Create the new character
            var newSWCharacter = component.get("v.newSWCharacter");
            newSWCharacter.Name = component.get('v.CharacterName');
            newSWCharacter.Height__c = component.get('v.CharacterHeight');
            newSWCharacter.SkinColor__c = component.get('v.CharacterSkinColor');
            newSWCharacter.Planet__c = component.get('v.CharacterPlanet');
            newSWCharacter.Gender__c = component.get('v.CharacterGender');
            console.log("Create Character: " + JSON.stringify(newSWCharacter));
            helper.createSWCharacter(component, newSWCharacter);
        }
    }

this is the createSWCharacter() function
 

createSWCharacter: function(component, character) {
        var action = component.get("c.saveCharacter");
        action.setParams({
            "character": character
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var characters = component.get("v.characters");
                characters.push(character);
                component.set("v.characters", characters);
            } else{
                console.log('errorrrr2');
            }
        });

        $A.enqueueAction(action);
    }

and finally this is the saveCharacter() method in the APEX controller:
 

@AuraEnabled
public static SWCharacter__c saveCharacter(SWCharacter__c character) {
    // Perform isUpdateable() checking first, then
    insert character;
    return character;
}

So if you read up to hear and understod the code, the problem is here in the "insert character" in the APEX controller that is not working, not saving the character to the data base BUT it is returning the valid character which is weird because it's not saving it properly first :/