These guides cover:

• Features
• API Routes
• How to install and activate license WPCargo API Add on
• How to assign and reset API key to user
• How to use plugin API’s
• How to add shipment using API through AJAX
• How to update shipment using API through AJAX
• How to add address using API through AJAX

First, Create a form for update address.

Note: “address_id” form field is required and must exist in the form. “address_id” is the ID of the address that needs to update and Make sure the the field name exist in the address field list. to get the address available field list use this route mysite.com/wp-json/wpcargo/v1/api/api_key/address/fields/type.

<form id="update_address">
 	<input type="hidden" name="address_id" value="1">
    Receiver Name: <input type="text" name="wpcargo_receiver_name" value="">
	Phone Number: <input type="text" name="wpcargo_receiver_phone" value="">
	Address: <input type="text" name="wpcargo_receiver_address" value="">
	Email: <input type="text" name="wpcargo_receiver_email" value="">
	<input type="submit" value="Submit Shipment">
</form>

Second, Create a script that will handle the form submission.

jQuery(document).ready( function( $ ){
 $('form#update_address').on('submit', function( e ){
    e.preventDefault();
   var addressID = $( 'input[name="address_id"]' ).val();
    var wpcargo_receiver_name = $( 'input[name="wpcargo_receiver_name"]' ).val();
    var wpcargo_receiver_phone = $( 'input[name="wpcargo_receiver_phone"]' ).val();
    var wpcargo_receiver_address = $( 'input[name="wpcargo_receiver_address"]' ).val();
    var wpcargo_receiver_email = $( 'input[name="wpcargo_receiver_email"]' ).val();
  
    $.ajax({
      type:"POST",
      dataType:"JSON",
      data:{
         action:'update_address', 
         'address_id':'address_id',
         wpcargo_receiver_name:wpcargo_receiver_name,
         wpcargo_receiver_phone:wpcargo_receiver_phone,
         wpcargo_receiver_address:wpcargo_receiver_address,
         wpcargo_receiver_email:wpcargo_receiver_email
      },
      url : demoAjaxHandler.ajaxurl,
      beforeSend:function(){
        //** Proccessing
        console.log( 'loading...' );
      },
      success:function(response){
        //** Process Completed
        console.log( response )
      }
    });
  });
});

Third, Enqueue the script using “wp_enqueue_script” hook and localize the script for the AJAX handler using “wp_localize_script” hook

function demo_enqueue_style() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'demo-script', get_stylesheet_directory_uri().'/demo.js', false );
    $translation_array = array(
       'ajaxurl' => admin_url( 'admin-ajax.php' ),
    );
    wp_localize_script( 'demo-script', 'demoAjaxHandler', $translation_array );
}
add_action( 'wp_enqueue_scripts', 'demo_enqueue_style' );

Fourth, Create a hook “wp_ajax_” to handle AJAX action.

function update_address_ajax_callback() {
    $ch = curl_init();
 
    //  Add form data into array and build query parameter
    // note: Array key is the post meta and the array value with the post meta value
    $post = http_build_query( array(
       'shipment' => sanitize_text_field( $_POST['shipment'] ),
       'wpcargo_shipper_name' => sanitize_text_field( $_POST['shipperName'] ),
       'wpcargo_receiver_name' => sanitize_text_field( $_POST['receiveName'] ),
       'wpcargo_status' => sanitize_text_field( $_POST['status'] )
    ) );
 
    // Add the option URL with API key
    // "type" can be "shipper" or "receiver"
    curl_setopt($ch, CURLOPT_URL, 'http://mysite.com/wp-json/wpcargo/v1/api/my-api-key-here/address/type/update' );
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post );
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 
    $result = curl_exec ($ch);
    curl_close ($ch);
 
    // Return the response of the API
    echo json_encode( $result );
    wp_die();
}
add_action( 'wp_ajax_update_address', 'update_address_ajax_callback' );
add_action( 'wp_ajax_nopriv_update_address', 'update_shipment_ajax_callback' );