Hi there,
After an extensive search without results, I decided to ask the community for help.
I need to send customer registration data to an external REST API by the time the customer is created in Shopify.
I have created an custom app according to the tutorials out there using Remix framework, however, I am just not able to find where and how to add an external API call.
How I created an app: npm init @Shopify_77 [email removed]
Existing commercial apps like APIEase, etc I am not interested, thanks.
Any help much appreciated.
Hello @EAugusto
You can utilize the Customer creation webhook. When a customer registers, the webhook triggers, allowing you to execute your external API call. In your Remix app, navigate to the webhook.jsx file and insert your code there.
import { authenticate } from "../shopify.server";
import db from "../db.server";
export const action = async ({ request }) => {
const { topic, shop, session, admin } = await authenticate.webhook(request);
if (!admin) {
// The admin context isn't returned if the webhook fired after a shop was uninstalled.
throw new Response();
}
switch (topic) {
case "APP_UNINSTALLED":
if (session) {
await db.session.deleteMany({ where: { shop } });
}
break;
case "CUSTOMERS_DATA_REQUEST":
case "CUSTOMERS_REDACT":
case "SHOP_REDACT":
case "CUSTOMERS_CREATE":
// MAKE YOUR API CALL
default:
throw new Response("Unhandled webhook topic", { status: 404 });
}
throw new Response();
};
If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.
Hi @Huptech-Web
Thanks very much for your help, however, I still got problems.
I have added the code you suggested:
switch (topic) {
case "APP_UNINSTALLED":
if (session) {
await db.session.deleteMany({ where: { shop } });
}
break;
case "CUSTOMERS_DATA_REQUEST":
case "CUSTOMERS_REDACT":
case "SHOP_REDACT":
case "CUSTOMERS_CREATE":
console.log("created");
break;
default:
throw new Response("Unhandled webhook topic", { status: 404 });
}
I have just added a simple console.log(“created”) and it does not show on my console.
Also, I added the followinf coding into my shopify.server.js:
CUSTOMERS_CREATE: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: "/webhooks",
callback: async (topic, shop, body, webhookId) => {
console.log('--- customer created ---');
const payload = JSON.parse(body);
console.log(payload);
}
}
Also I have re-run the application using
npm run shopify app dev -- --reset
None of these makes any difference. It seems the changes are just being ignored.
Happy to point your answer as correct, I just need a bit of more help. Thanks very much.
Hello @EAugusto
Webhooks are registered only during the app installation process. Please try uninstalling and then reinstalling the app. If this does not resolve the issue, please inform me
Hi @Huptech-Web
Thanks very much for still helping me.
I managed to register the webhook.
The only thing missing, which I am sure you would answer that in one line, how can I get the payload of the newly created customer, like firstName, lastLame, telephone, etc… in webhooks.jsx:
case "CUSTOMERS_CREATE":
console.log(topic, "customer created *****************************");
console.log(customer.firstName);
break;
The console.logs I have in shopify.server.js seems to be ignored, nothing comes back:
CUSTOMERS_CREATE: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: "/webhooks",
callback: async (topic, shop, body, webhookId) => {
console.log('--- Customer create ---');
const payload = JSON.parse(body);
console.log(payload);
console.log('--- /Customer create ---');
}
},
Thanks once again.
Hello @EAugusto
If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.
I hope I can help others with my findings!
I was looking for the payload inside the webhooks.jsx file and I had to add the payload object in the resulting objects like that:
const { topic, shop, session, admin, payload } = await authenticate.webhook(request)
const { topic, shop, session, admin, payload } = await authenticate.webhook(request);
Inside this file, make sure you handle your conding inside the webhook you have. For example, I am doing a SOAP request for testing.
case "CUSTOMERS_UPDATE":
console.log("customer updated *****************************");
const url = "http://www.dataaccess.com/webservicesserver/numberconversion.wso?WSDL";
var args = {ubiNum: '1'};
soap.createClient(url, {}, function(err, client) {
client.NumberToWords(args, function(err, result) {
console.log(result);
//the payload object is available to you here!
});
});
break;
Did I help you? So, buy me a coffee: https://buymeacoffee.com/eamello Thanks!
Is there a way to make external api calls without relying on shopify webhooks? For example, I have a form in my remix application and I wish to post that data to my external api.
