I have a form that I'd like to send a POST request to Swym to set up back in stock alerts. I'm using Shopify's Hydrogen framework, which is built with Remix. Right now I have an action that is calling my POST function, but I keep getting errors and the page stops working. Am I setting this up correctly?
Here is my action, form, and function to call API:
export const action = async ({request}: ActionArgs) => {
const formData = await request.formData();
const userEmail = formData.get('email');
const productId = formData.get('productId');
const productVariantId = formData.get('productVariantId');
const productUrl = formData.get('productUrl');
getSwym(userEmail, productId, productVariantId, productUrl);
return json({message: 'getSwym has run'}, {formData: formData});
};
export async function getSwym(
userEmail: string | null,
productVariantId: string | null,
productId: string | null,
productUrl: string | null,
) {
const endpoint = `https://swymstore-v3premium-01.swymrelay.com/storeadmin/bispa/subscriptions/create`;
const API_KEY = btoa(
'{API KEY}',
);
const PID = btoa('{API KEY}');
const requestOptions = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: `Basic ${API_KEY} : ${PID}`,
},
body: new URLSearchParams({
products: [
{
// 'PRODUCT VARIANT ID'
epi: productVariantId,
// 'PRODUCT ID/PRODUCT MASTER ID'
empi: productId,
// 'CANNONICAL URL OF THE PRODUCT'
du: `http://localhost:3000/products/${productUrl}`,
},
],
medium: 'email',
mediumvalue: `${userEmail}`,
topics: ['backinstock', 'comingsoon'],
addtomailinglist: '1',
prototype: null,
toString: () => {
throw new Error('Not yet implemented!');
},
}).toString(),
};
const response = await fetch(endpoint, requestOptions);
const data = await response.json();
return data;
}