Hi
I’m creating an app which will allow merchants to add tree planting to their checkout process. To allow us to charge the merchants for planted trees, I am adding a usage based subscription to the app installation process. The grahql mutation works and I receive and successfully redirect to the confirmation url, however when I add a payment method and click the ‘Approve Subscription’ button a toast stating ‘The shop cannot accept the provided charge.’ pops up.
Now cards for adding payment methods have disappeared from the screen (see attached image).
I’ve only just requested subscription permissions for the app so that could be the issue but since the request could take 7 days to approve I’d like to know if there could be other issues before then.
This is the graphql mutation:
const MUTATE_APP_SUBSCRIPTION = gql`
mutation {
appSubscriptionCreate(
name: "SKOOT Tree Pricing Plan"
returnUrl: "http://tree-planting-by-skoot.shopifyapps.com"
lineItems: [
{
plan: {
appUsagePricingDetails: {
terms: "$0.15 for 1 tree"
cappedAmount: { amount: 500.00, currencyCode: USD }
}
}
}
]
) {
userErrors {
field
message
}
confirmationUrl
appSubscription {
id
lineItems {
id
plan {
pricingDetails {
__typename
}
}
}
}
}
}
`;
I am using the useMutation react-apollo hook to send the mutation and the app bridge action redirect to navigate to the confirmationUrl.
import { useMutation } from "react-apollo";
import { useAppBridge } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";
...
// Configure mutation
const [subscribe, { data, loading, error }] = useMutation(
MUTATE_APP_SUBSCRIPTION
);
console.log(loading, error, data);
// Configure redirect
const app = useAppBridge();
const redirect = Redirect.create(app);
if (data && data["appSubscriptionCreate"]) {
// Redirect to confirmation url
redirect.dispatch(
Redirect.Action.REMOTE,
data["appSubscriptionCreate"]["confirmationUrl"]
);
}
Any suggestions would be greatly appreciated. Thanks in advance.
