What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Remix Billing confirmationUrl: Too many redirects

Remix Billing confirmationUrl: Too many redirects

fitzmode
Shopify Partner
2 0 2

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 12 (12)

alifaiz
Shopify Partner
2 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 4

try 

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

nick9090
Shopify Partner
4 0 1

You made my day sir!

It's working finally

bdozonos
Shopify Partner
10 1 5

Not working for me, I get 


Object literal may only specify known properties, and 'target' does not exist in type 'ResponseInit'.
ts(2353)

I'm using redirect from remix-node:
import {redirect} from "@remix-run/node";

Is there a different import I should be using?


update:

of course I get it working right after posting lol

If anyone else hits this particular issue, don't use the redirect import from remix-run/node.
Instead, do authenticate and get the redirect object from that, e.g:

 

 

export async function action({ request }) {
    const {session, admin, redirect} = await authenticate.admin(request);

    // code for billing/subscription

    return redirect(response.confirmationUrl, { target: "_parent" });
}

 

memoryshop
Shopify Partner
1 0 0

sadly, still not work to me. it redirect me to a blank page. does anyone have same issues?

kimieann
Shopify Partner
8 0 3

This worked for me! Thanks!

RuentDev
Shopify Partner
3 0 0

this not works on me, 

RuentDev_0-1717418447567.png

I dont have a choice but to return the confirmationUrl to client then is the window is available I can use window.open() in new page,

I cant use redirect to fully redirect the page in confirmationUrl.

 

is there anyone found a solution for this issue?

 

midl4nd
Shopify Partner
4 0 4

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

Giltee
Shopify Partner
17 3 6

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 4

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