How To Setup Shopify`s Billing API

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.

Use Shopify CLI to Add Billing Code Template

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.

Check and Modify Price

What file to modify depends on whether you chose Recurring Billing or One-Time Billing in the previous selection.

Recurring Billing

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:

Plan name (
```
line 5
```
)
Plan price (
```
line 12
```
)
Currency (
```
line 12
```
)
Trial Days (
```
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.

Is Test? (
```
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.

One-Time Billing

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:

Plan name (
```
line 5
```
)
Plan price (
```
line 6
```
)
Currency (
```
line 6
```
)
Is Test? (
```
line 8
```
)

Test if Billing Code Works

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:

Make sure that you created a public app when testing for billing code. Adding billing code to a custom app will throw you an error.
The
```
test
```
flag must be set to true to prevent unwanted charges to you.

Install the public app in a development store.

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.

Check if the billing confirmation page is working properly.

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/