One of the most common mistakes of beginning Shopify app developers is to assume that the Shopify app store will handle pricing and billing for them. Learn how to add billing code to your app to prevent selling it for free.
If you published a public app without the appropriate billing code, your hard work would be distributed without any compensation (aka "moolah"). This will cause you lots of grief and heartache if the "giveaway" is not exactly intentional.
It is also rather impossible to contact and manually charge each merchant who downloaded your app. This is especially true if your app stirred demand from thousands of merchants.
Before submitting that app for review, you must double-check if you added the billing code.
Fortunately, Shopify CLI provides an effortless way to add billing code to our apps.
shopify generate billing
Typing the code above will add billing logic to the file
server/server.js
. For this example, we select Recurring Billing. You will want to pick this, too, if you're going to earn monthly recurring revenue from Shopify.
Your
server/server.js
would like similar to this before generating the billing code.server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET,
scopes: [SCOPES],
async afterAuth(ctx) {
//Auth token and shop available in session
//Redirect to shop upon auth
const { shop, accessToken } = ctx.session;
ctx.cookies.set("shopOrigin", shop, {
httpOnly: false,
secure: true,
sameSite: "none"
});
ctx.redirect("/");
}
})
);
After generating the billing code.
server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET,
scopes: [SCOPES],
async afterAuth(ctx) {
//Auth token and shop available in session
//Redirect to shop upon auth
const { shop, accessToken } = ctx.session;
ctx.cookies.set("shopOrigin", shop, {
httpOnly: false,
secure: true,
sameSite: "none"
});
server.context.client = await handlers.createClient(shop, accessToken);
await handlers.getSubscriptionUrl(ctx);
}
})
);
When that's done, let's adjust the price to be billed.
What file to modify depends on whether you chose Recurring Billing or One-Time Billing in the previous selection.
You will need to head to
server/handlers/mutations/get-subscription-url.js
. For now, you can simplify your plan by having one subscription plan.
export function RECURRING_CREATE(url) {
return gql`
mutation {
appSubscriptionCreate(
name: "Super Duper Plan"
returnUrl: "${url}"
test: true,
trialDays: 7,
lineItems: [
{
plan: {
appRecurringPricingDetails: {
price: { amount: 10, currencyCode: USD }
}
}
}
]
) {
userErrors {
field
message
}
confirmationUrl
appSubscription {
id
}
}
}`;
}
The most important things to consider are:
line 5
)line 12
)line 12
)line 8
)It is best to give customers a free trial to make them feel that they are not taking any risks when evaluating your app.
line 7
)You need to modify this logic to be
true
when using in development stores. Switch this to false
right before publishing to enable actual billing to production stores. Better yet, have an environmental flag to detect whether you intend to develop or deploy in production.This time, locate
servers/handlers/mutations/get-one-time-url.js
, and modify the plan name and price accordingly.export function ONETIME_CREATE(url) {
return gql`
mutation {
appPurchaseOneTimeCreate(
name: "test"
price: { amount: 10, currencyCode: USD }
returnUrl: '${url}'
test: true
) {
userErrors {
field
message
}
confirmationUrl
appPurchaseOneTime {
id
}
}
}
`;
}
Similar to the Recurring Billing above, you need to look out for the following:
line 5
)line 6
)line 6
)line 8
)When all is set and ready to rumble, launch your app, and visit your development store to see if the billing code kicked in.
Some things to consider when testing:
test
flag must be set to true to prevent unwanted charges to you.Head to the app dashboard, proceed to "Test your app," and select your development store.
Click the "Install App" button.
Click the "Install unlisted app" button.
If everything has been done correctly, you should see the above billing confirmation page. Double-check the plan name, price, and currency.
Don't forget to properly configure your Paypal account so that Shopify knows where to deposit the money when customers purchase your app.
Learned anything from this tutorial? Got further questions that haven't been answered yet? Comment your queries below, and I'll get back to you as soon as I can.
Previously published at https://blog.klaudsol.com/how-to-add-billing-code-to-your-shopify-app/