I’ve been trying everything, with the template for an embed app that is in the shopify documentation I have generated a list of the products where you select the desired quantity and it is sent to a single payment for each of the products. I have not found a way to send to the url that the billing api returns to me without getting errors. What am I doing wrong? I have been trying for DAYS without luck.
import { useEffect } from “react”;
import { json } from “@remix-run/node”;
import { useFetcher } from “@remix-run/react”;
import { useLoaderData, Form, useNavigate } from “@remix-run/react”;
import {
Page,
Layout,
Text,
Card,
Button,
BlockStack,
Box,
List,
Link,
InlineStack,
ResourceList,
ResourceItem,
Thumbnail,
Checkbox,
} from “@shopify/polaris”;
import { TitleBar, useAppBridge } from “@shopify/app-bridge-react”;
import { authenticate } from “../shopify.server”;
import Products from “./Products”;
import { Redirect } from “@shopify/app-bridge/actions”;
export const loader = async ({ request }) => {
const { admin, redirect } = await authenticate.admin(request);
const response = await admin.graphql({ products(first: 250) { edges { node { id title description images(first: 1) { edges { node { originalSrc altText } } } } } } });
if (!response.ok) {
console.log(“Error en la respuesta de la API”, response);
throw new Response(“Error en la respuesta de la API”, {
status: response.status,
});
}
// Convertimos el ReadableStream a JSON
const result = await response.json(); // Esto asume que la respuesta es JSON
if (!result.data || !result.data.products) {
console.log(“No se encontraron productos”, result);
return json({});
}
const products = result.data.products.edges.map((edge) => ({
…edge.node,
thumbnail: edge.node.images.edges[0]?.node.originalSrc || “”,
altText: edge.node.images.edges[0]?.node.altText || “No image”,
}));
return json({ products });
};
export default function Index() {
const navigate = useNavigate();
const app = useAppBridge();
function redirectPaymentPage(data) {
const redirect = Redirect.create(app);
return redirect(Redirect.Action.REMOTE, data);
}
return (
<Layout.Section>
Tus productos
</Layout.Section>
);
}
this is the console error i get.
and i expect to be able to reach this page which is the url that i get from the billing api response
