PLEASE HELP! i don't know how to redirect to a onecharge page from my app

PLEASE HELP! i don't know how to redirect to a onecharge page from my app

massiv
Shopify Partner
7 0 3

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 (
    <Page>
      <TitleBar title="massvi" />
      <BlockStack gap="500">
        <Layout>
          <Layout.Section>
            <Card>
              <BlockStack gap="500">
                <BlockStack gap="200">
                  <Text as="h3" variant="headingMd">
                    Tus productos
                  </Text>
                  <Products onResult={redirectPaymentPage} />
                </BlockStack>
              </BlockStack>
            </Card>
          </Layout.Section>
        </Layout>
      </BlockStack>
    </Page>
  );
}
 
massiv_0-1725985484531.png

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

massiv_1-1725985531819.png

 

Reply 1 (1)

massiv
Shopify Partner
7 0 3