So I have been trying to figure this out for weeks now, but Shopify's documentation is outdated and not specific towards utilizing external APIs for sending information to an external API.
So simply I want to know, if you were to make a form for a user to fill out and wish to send that submitted data to the external API what is the proper way to do this?
I have attempted to leverage my proxy app, which has only been successful in fetching information from my external API and posting it into Shopify's client-side. The other way around has been resulting in 400 "Bad Request" Errors.
I have also attempted to make the ajax call in a theme-app-extension - I assumed maybe this would work but I still received the same error.
To provide more details, I am leveraging a .NET Razorpage application, where the frontend displayed by my proxy app is written in the razor view, and the handler methods my ajax calls hit are in the code-behind file. I configured my proxy url path as apps/member. The following ajax call is meant to take submitted form data by the user and pass it to my backend file. The ajax call that works locally and through ngrok's url:
$.ajax({
type: 'POST',
url: '/apps/member?handler=MethodName',
contentType: 'application/json',
data: JSON.stringify(formData),
headers: {
'RequestVerificationToken': antiForgeryToken,
'Content-Type': 'application/json'
},
dataType: 'json',
beforeSend: function (jqXHR, settings) {
console.log('Request URL:', settings.url);
console.log('Request Type:', settings.type);
},
xhrFields: {
withCredentials: true
},
success: function (response) {
if (response.success) {
$('#UserFeedbackMessage').text(response.message).css('color', 'green').show();
} else {
$('#UserFeedbackMessage').text(response.message).css('color', 'red').show();
}
},
error: function (xhr, status, error) {
console.error("Error updating collector info:", error);
console.log("XHR:", xhr);
console.log("Status:", status);
console.log("Response Text:", xhr.responseText);
$('#UserFeedbackMessage').text("An error occurred while updating your profile.").css('color', 'red').show();
},
complete: function (jqXHR, status) {
console.log('Complete Response Headers:', jqXHR.getAllResponseHeaders());
}
});
Just to be clear, formData is being extracted from a form submission upon button click:
$('#saveButton').click(function () {
var formData = {
CollectorId: $('#CollectorId').val(),
FirstName: $('#FirstName').val(),
LastName: $('#LastName').val(),
EmailAddress: $('#EmailAddress').val(),
PhoneNumber: $('#PhoneNumber').val(),
Address1: $('#address1').val(),
Address2: $('#Address2').val(),
City: $('#city').val(),
StateRegionProvince: $('#stateRegionProvince').val(),
PostalCode: $('#postalCode').val()
};
Can anyone please provide a solution to achieve this? I am willing to leverage app proxy, theme-app-extensions, webhooks, etc.. as long as it allows me to make POST requests to an external API.
