Remix Billing confirmationUrl: Too many redirects

fitzmode
Shopify Partner
2 0 0

I'm trying to setup recurring billing in the Remix Template. In my action I'm calling the `AppSubscriptionCreate` and get the `confirmationUrl` in the response. However, when I return a redirect to the confirmation url I get a browser error that there my store has redirected me too many times. What is the correct way to handle the redirect?


 

 

export async function action({ request }) {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
    mutation AppSubscriptionCreate($name: String!, $lineItems: [AppSubscriptionLineItemInput!]!, $returnUrl: URL!) {
  appSubscriptionCreate(name: $name, returnUrl: $returnUrl, lineItems: $lineItems, test: true) {
    userErrors {
      field
      message
    }
    appSubscription {
      id
    }
    confirmationUrl
  }
}`,
    {
      variables: {
        "name": "Super Duper Recurring Plan",
        "returnUrl": "http://google.com/",
        "test": true,
        "lineItems": [
          {
            "plan": {
              "appRecurringPricingDetails": {
                "price": {
                  "amount": 10,
                  "currencyCode": "USD"
                },
                "interval": "EVERY_30_DAYS"
              }
            }
          }
        ]
      }
      
,
    }
  );

  const responseJson = await response.json();
return redirect(responseJson.data.appSubscriptionCreate.confirmationUrl, 301)

}

 

 

 

 

fitzmode_0-1696024089515.png

 

Replies 8 (8)
alifaiz
Shopify Partner
1 0 0

Hy there, did you find any solution for this?

nick9090
Shopify Partner
4 0 1

Same error here 👋

I tried to use different redirect code and throw instead of return but it didn't worked

export const action = async ({ request }) => {
  const formData = await request.formData();
  const quantity = formData.get("quantity");
  console.log(quantity);
  // Query
  const { admin } = await authenticate.admin(request);
  let mutation = await admin.graphql(
      `#graphql
      mutation AppPurchaseOneTimeCreate($name: String!, $price: MoneyInput!, $returnUrl: URL!) {
        appPurchaseOneTimeCreate(name: $name, returnUrl: $returnUrl, price: $price) {
          userErrors {
            field
            message
          }
          appPurchaseOneTime {
            createdAt
            id
          }
          confirmationUrl
        }
      }
      `,
      {
        variables:
        {
          "name": "1000 imported orders.",
          "returnUrl": "http://super-duper.shopifyapps.com/",
          "price": {
            "amount": 10,
            "currencyCode": "USD"
          }
        }
      },
  );
  if (mutation != null){
    const muJson = await mutation.json();
    if (Array.isArray(muJson.data.appPurchaseOneTimeCreate.userErrors) && muJson.data.appPurchaseOneTimeCreate.userErrors.length >= 1){
      console.log("Error: ",muJson.data.appPurchaseOneTimeCreate.userErrors)
      return null;
    }
    // Redirect to checkout
    console.log("appPurchaseOneTime",muJson.data.appPurchaseOneTimeCreate.appPurchaseOneTime);
    console.log("ConfirmationUrl ", muJson.data.appPurchaseOneTimeCreate.confirmationUrl)
    throw redirect(muJson.data.appPurchaseOneTimeCreate.confirmationUrl, 303);
  }
  return null;
}

 

nick9090
Shopify Partner
4 0 1

The real fun part is that i can take the redirect url from the 302 header sent, copy it into the browser bar, and it works. But the remix redirect function does not work with this url

midl4nd
Shopify Partner
4 0 0

try 

redirect(confirmationUrl, { target: "_parent" })

nick9090
Shopify Partner
4 0 1

You made my day sir!

It's working finally

midl4nd
Shopify Partner
4 0 0

Same issue as well. Did you manage to find a fix or an alternative way to handle this?

Giltee
Shopify Partner
17 3 5

The only way that I have been able to come up with is to open in a separate window:

 

export async function action({ request, params }) {
  
    const { admin, session } = await authenticate.admin(request);
    const { shop } = session;
  
   let res = await createShopSubscription("Basic", admin.graphql);

   console.log(res.data.appSubscriptionCreate.confirmationUrl);
        
    // @TS-ignore
    return {confirmationUrl: res.data.appSubscriptionCreate.confirmationUrl};
  }

  
  export default function Billing() {

    const navigate = useNavigate();
    const submit = useSubmit();

    const data = useActionData();

    if(data.confirmationUrl){
        window.open(data.confirmationUrl, "_blank")
    }
// .........
midl4nd
Shopify Partner
4 0 0

Did you try the suggestion I posted above? Seems to work.