Build a full, working subscription integration using Fanspay Checkout

Build a full, working subscription integration using Fanspay Checkout. The Fanspay APIs let you create and manage subscriptions and recurring payments. Checkout provides the prebuilt, secure, Fanspay-hosted UI for collecting payment details.

First, we recommend that you learn how Fanspay checkout works.

In the downloaded sample app, the client- and server-side code redirects customers from your site to a prebuilt payment page hosted on Fanspay. The builder injects data, such as your pricing model, into the sample code as you follow the steps.

Build your subscription page

Add a pricing preview page

Add a page to your site to display your product and offer your customers an option to subscribe to it. When they click the checkout button, they’re redirected to a Fanspay-hosted Checkout page. The order is finalized when your customer redirects to the Checkout page — they can’t modify it after that point.

Add a checkout button

Add a button to your order preview page. Clicking this button redirects your customer to the Fanspay-hosted Checkout page. To get the redirect link, you need to send a request to the Fanspay API.

Create and redirect to the checkout session

A Checkout Session controls what your customer sees in the Fanspay-hosted payment page such as line items, the order amount and currency, and acceptable payment methods.

Define the line items

Always keep sensitive information about your product inventory, such as price and availability, on your server to prevent customer manipulation from the client.

Choose the mode

Use subscription mode to set a subscription. To use it, you must add the subscription parameter to the product price and it must be greater than or equal to 1. This number is the period in days of the future subscription.

Setup the delay

You can set a delay (trial period) for a subscription. The customer will start paying at the end of this period. This number is the period in days of the trial period.

Supply success and cancel URLs

Specify URLs for success and cancel pages — make sure they’re publicly accessible so Fanspay can redirect customers to them. You can also handle both the success and canceled states with the same URL.

Redirect to Checkout

After creating the session, redirect your customer to the URL returned in the response.

Provide your service and control access

You have a Checkout integration working. Now you need to set up a webhook to fulfill orders after a subscibing. Webhooks are the most reliable way to handle business-critical events.

You can use this tutorial for working with webhooks for prove successfully subscription. You need to handle checkout.session.transaction_confirmed event from Fanspay.

Control access to your service

In addition to checkout.session.transaction_confirmed event, you need to handle subscription events.

subscription.activeSubscriptionOccurs when a Subscription has been successfully charge and active now.
subscription.canceledSubscriptionOccurs when a Subscription has been canceled by the customer.
subscription.failedSubscriptionOccurs when a Subscription has been canceled by Fanspay for lack of customer funds.
subscription.waitingSubscriptionOccurs when a Subscription has been successfully activated but not paid (trial period).

Fanspay also will notice you about all customer charges. You can handle charge.succeeded and charge.failed if you want.