Using the Awtomic API securely to customize your Customer Portal

It's important to to use the authentication token saved in local storage and NOT your private API key. Never expose the private API key you retrieve from your Awtomic dashboard in client-side code.

The Awtomic API is a powerful tool for developers to create customized customer portals for their clients. Here are the steps to use the Awtomic API securely from the front-end by grabbing the subscription ID, authentication token and customer ID from an object in local storage and a URL parameter:

Steps

1. Retrieve the Authentication Token and Customer ID from Local Storage
2. Get the Subscription ID from the URL Parameter
3. Use the Subscription ID, Authentication Token and Customer ID in API Requests

Step 1: Retrieve the Authentication Token and Customer ID from Local Storage

When a customer logs in to the Awtomic Customer Portal, their customer Id and a temporary authentication token are saved in local storage. To retrieve the authentication token and customer ID from local storage, you can use the following code:

const auth = JSON.parse(localStorage.getItem('awtomicApiAuth'));const authToken = auth.authToken; const customerId = auth.customerId;

This code retrieves the awtomicApiAuth object from local storage and extracts the authToken and customerId values.

Step 2: Get the Subscription ID from the URL Parameter

To get the subscription ID from the URL parameter, you can use the following code:

const urlParams = new URLSearchParams(window.location.search);const subscriptionId = urlParams.get('subscriptionId');

This code creates a URLSearchParams object from the window location search string and gets the subscriptionId parameter from it.

Step 3: Use the Subscription ID, Authentication Token and Customer ID in API Requests

Now that you have retrieved the subscription ID, authentication token and customer ID from local storage and the URL, you can use them in requests to the Awtomic API.

Here's an example of how to make a request to set the next billing date for a specific subscription:

const headers = { 'Content-Type': 'application/json',  'Authorization': authToken};var requestOptions = { method: 'POST', headers, body: JSON.stringify({nextBillingDate: '2023-10-22T12:00:00'})};fetch(`https://shapi.bundlepayments.com/customers/${customerId}/subscriptions/${subscriptionId}/next-billing-date`, requestOptions) .then(response => response.json())  .then(data => console.log(data))  .catch(error => console.error(error));

Replace https://shapi.bundlepayments.com/customers/${customerId}/subscriptions/${subscriptionId}/next-billing-date with the appropriate API endpoint for your use case. You can find all the API endpoints documented here.

This code creates a headers object with the Authorization header set to the authentication token. It then makes a POST request to the Awtomic API with these headers. It's important to note some differences between this code and instructions in the API documentation. The API documentation is written for server to server API requests. To use the temporary authentication token from local storage you'll need to use shapi.bundlepayments.com, as seen in the code above, instead of api.awtomic.com as seen in the API documentation.

By following the above steps, you can use the Awtomic API securely from the front-end and add your own custom functionality.