Default is 0
Sets the minimum that your customer can set the quantity value.
For example: 10 users.
Use case: you do not want someone to set it to 0 or -1 or you have a minimum signup quantity.
| | max | number | no | Stripe Max Limit |Sets the maximum that your customer can set the quantity value.
For example 100 users.
| | step | number | no | 1 |Default is 1
If set to 10, the plus and minus buttons will increase or decrease the quantity by 10 when clicked.
| ```javascript "options":{ "behavior":{ "quantityManagement":{ "unit":{ "email":{ "min":10, "max":5000, "step":50 } } } } } ``` # Enterprise Sales Flow There are a handful of ways to handle enterprise or one-off sales with Stripe and Billflow. They allow you to create client-specific payment amounts, send them invoices payable by card, ACH, or SEPA, and also be able to view those invoices from the Billflow customer portal. Here we will go through the most common process. If this is does not fit your processes, let us know and we can offer other options. ### Step 1: Create a Customer The first step after determining price point is to create a customer in Stripe. Log into your Stripe dashboard and select Customers and New. (This step can also be done via the Stripe API if you want a user to signup from your app first)  Fill out the details you have about the customer. If you have their payment information, you can add it directly when creating the customer. No problem if not, we can collect it later. ### Step 2: Create a subscription or one-time invoice Next you will create a subscription or invoice for the customer. The only difference being is that subscriptions are for recurring payments whether that be monthly, annual or something in between, and invoices are just for a one-time payment. #### Subscription Select the customer you created and choose "Create Subscription"  To create a subscription you must have a Product to define its price. Create a new product or use an existing one.  #### Invoice Select the customer you created and choose "Create Invoice" If you are creating the same price point many times, we recommend creating a Product in Stripe for that price. Or you can continue to create one-off amounts every-time. ### Step 3: Send Invoice Now you once again have the option to add a payment method or for Stripe to email them with a hosted payment form. You can turn on CC, ACH, and SEPA if it's available for your account.  Select Start Subscription or Create Invoice ### Payment from Stripe hosted email Stripe will now email your client with a hosted payment page that looks like the following  The customer can now select "Pay this invoice" which will take them to the Stripe hosted payment page  It gives them the option to pay via CC, ACH, and other payment methods if enabled.  ### Payment from Billflow Customer Portal The subscription and invoice will also appear in the customer portal if you have it installed in your website or app. They can add CC information or click the 'Pay Now' button to be directed to the same hosted Stripe payment page that is sent in the email.   From this point, the customer and subscription can be managed from the Stripe dashboard by you, or the customer can self-service their subscription management from the Billflow customer portal. As an admin you are able to add additional charges, update the subscription or invoice amount, perform refunds, and cancel subscriptions. # Cancellations/Payment Failures How to handle cancelations and payment failures Churn has a massive impact on subscription businesses, many times reducing churn is the single best thing a business can focus on to increase revenue. Billflow, together with Stripe, has some great features to help you reduce churn. {% content-ref url="/pages/-MGp0BuN2FwXvm8gxM\_-" %} [Set up Cancellation Feedback](/how-to/cancellations-payment-failures/set-up-cancellation-feedback) {% endcontent-ref %} {% content-ref url="/pages/-MGp0ImlngVX1h5ChEBL" %} [Configure Dunning Emails](/how-to/cancellations-payment-failures/configure-dunning-emails) {% endcontent-ref %} # Set up Cancellation Feedback How to gather cancellation feedback A great way to improve your product and service is to figure out why customers leave. Billflow makes it super easy to get feedback when a customer chooses to cancel their subscription. ## Enable Cancellation Feedback Here's how to enable that on the Customer Portal: Make sure you have turned on **Enable cancellation** and **Ask for cancellation reason** from the billing page editor.  With these enabled, when your customers select the cancel action, they will see the following pop-up.  ## Show a custom survey on cancellation Using the handleResponse option and the Typeform modal embed, you can show a survey to users on cancellation to learn more about why the cancelled. Check out the example! {% embed url="The resource object with key value pairs to provide a translation string to the language and namespace defined, where value is the translated string.
You can find the appropriate keys by looking through one of the English JSON files.
| | i18n.backend | object | no | You can use a backend, a file system of your own such as AWS s3 or Google cloud storage to provide translation files. | | i18n.local\_storage\_caching | boolean | no | To disable use of browser local storage for caching i18n files, set this property to `false`, the default is true. Use this option if your application runs in an environment where local storage is not permitted. | ### Backend usage You can provide a backend URL to the configuration, our embed will automatically fetch each file at render time. {% hint style="info" %} **Important!** Make sure CORS is enabled for dashboard.billflow\.io and your website/webapp's domain on your server. Translation files are cached for 3 hours in browser, when implementing a custom language file, please use a fresh Incognito window to see the changes. {% endhint %} Example: Using google cloud storage 1. Create a bucket named your-i18n-custom 2. Create a folder structure and files as follows (we are using French as an example) 1. fr 1. common.json 2. portal.json 3. pricing.json 4. custom.json 3. In each file, you can copy the [English JSON files](/how-to/internationalization/support-multiple-languages#translation-files) contents and do your translation. {% hint style="info" %} You can even use this way to define your own custom English version, if for any reason you would like to change how your embed text is rendered in English. For example, if you want to change the Pricing page heading to say "Welcome, please pick a plan to start!" instead of the default text "Pricing", you can do that this way. {% endhint %} ### Example configuration ```javascript // Example i18n configuration "options": { "i18n":{ "defaultLng":"zh", "resources":[ { "lng":"zh", "ns":"custom", "resource":{ "SectionTitle_Pricing":"欢迎，请选择一个计划开始！" } } ], "backend":{ "loadPath":"https://storage.googleapis.com/your-i18n-custom/{{lng}}/{{ns}}.json" } } } ``` ### Translation files These are the default English text that we are using in our embeds, you can download them and translation / change them the way you like it, then use your version in the embed! 1.Test Signing Key to verify that the events were sent by Stripe.
Go here and select the Webhook you configured for this integration.
See how:
Test Signing Key to verify that the events were sent by Stripe.
Go here and select the Webhook you configured for this integration.
See how:
Example:
With a single allowed role
| `[billflow billing_page_id="9c7ECmmhey47zZsmEtWC" gated="subscriber"]` | |Example:
With a list of allowed
| `[billflow billing_page_id="9c7ECmmhey47zZsmEtWC" gated="basic_user, premium_user"]` | | `logged_out_only` | | | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | Value | true \| a redirect url relative | | Description | Makes the page a logged out only page, if a user is logged in, they will be sent to the home page if it is set to true. Or you can specify a redirect url. | |Example:
Redirect user to your home page
Example:
Redirect user to and custom page
Example:
Redirect user to standard login page
| `[billflow billing_page_id="9c7ECmmhey47zZsmEtWC" loggin_in_only="true"]` | |Example:
Redirect user to a custom page
| `[billflow billing_page_id="9c7ECmmhey47zZsmEtWC" loggin_in_only="/my-login-page"]` | | `upgrade` | | | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | | Example Value | "/a-relative-url-to-your-domain" | | Value Type | String | | Description | If the current user does not have the role specified by the `gated` parameter, it will send the user to this upgrade page.Example | |Example:
Redirect user to an upgrade page
| `[billflow billing_page_id="9c7ECmmhey47zZsmEtWC" gated="subscriber" upgrade="/upgrade-checkout-page"]` | ## Next: Advanced Usage Click next to see how you can add custom frontend logics # Advanced Usage ## APIs ### Add Custom Frontend logics Implement this function allows you to implement frontend logics that will run after after subscription creation. #### How? Define the following function in any of your js files, such as in your custom theme files, and implement any logic you’d like within the body. ```javascript window.billflow_wp_handle_response = function myHandleResponseFunction({event, response, extras}){ // your custom handling logic goes here console.log('called servicebot_wp_handle_response', response) console.log('event:' event) } ``` | Param | Description | | ----------------- | ---------------------------------------------------------------------------------- | | event (string) | 'create\_subscription' | | response (object) | The Stripe [subscription object](https://stripe.com/docs/api/subscriptions/object) | | extras (object) | Contains extra information from the Billflow frontend | # Useful Plugins Useful plugins that often used when implementing Billflow on WordPress ## Restrict User Access This plugin can help you gate some pages such as the Subscription Portal page to logged in WordPress users only. If someone is not logged in, you can redirect them to the login page. You can also use this plugin to create custom WP roles, and use that along with our Plugin's Role => Sb\_Tier mapping. {% embed url="Use to dynamically disable certain tiers for a customer when selecting a plan. Add an array of tiers (corresponds to metadata tag sb\_tier) to disable users from being able to change to those specific plans.
Eg: \['Tier 1', 'Tier 2']
| ```javascript { options: { disableTiers: ['Tier 1', 'Tier 2'] } } ``` ### options.quantity | Type | Required | Description | | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Object | No |Use to set the quantity of a subscription during creation. Can pass in an integer or an object of key-value pairs. The unit\_label is defined on the Stripe product and used to define which quantity is being set. If an integer is passed, it will apply the quantity to all products on the tier, if an object is passed with the unit\_labels as keys, it will assign that quantity to the respective unit\_label.
Eg: 5
OR
Eg: {product\_unit\_label1 : 10, unit\_label2: 20}
| ```javascript { options: { quantity: { super_user: 3, user: 5, }, } } ``` # Checkout Form Configs Checkout Form Configuration Options ## Required Configs ### email | Type | Required | Description | | ------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | Yes OR customer\_id | The customer's email address. This will automatically populate checkout, or be used to identify current subscribers. Can alternatively use customer\_id. | ```javascript { email: "example@google.com" } ``` ### customer\_id | Type | Required | Description | | ------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | Yes OR email | The customer's Stripe Customer ID. This will be used to identify existing subscribers or subscribe new customers. You must have already created the Stripe Customer object to use this. | ```javascript { customer_id: "cus_FtWXI6U0YxebLd" } ``` ### hash | Type | Required | Description | | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | Yes | An HMAC string used for authenticating the user loading the embed more securely. This is **required in order to go to 'Live Mode'** in Billflow (connected to 'Live Mode' in Stripe). The hash is generated with your Billflow ID and the customer's email or Stripe Customer ID, whichever you are using to identify users. | ```javascript { hash: "0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045" } ``` ## Available Configs ### theme**.stripeElement** | Type | Required | Description | | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | Object | No | Add custom Stripe Element Styles. Inside the stripeElement object, it is exactly the same as how [Stripe works](https://stripe.com/docs/js/appendix/style) | ```javascript { "billing_page_id":"YOUR_BILLING_PAGE_ID", ... ... "theme":{ "stripeElement":{ "style":{ "base":{ "fontSize":"14px", "lineHeight":"40px", "color":"white", "fontFamily":"-apple-system", "borderRadius":"4px", "::placeholder":{ "color":"white" } } } } } } ``` ### handleResponse | Type | Required | Description | | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Function | No | Function that is called when users signup, change plan (upgrade/downgrade), resubscribe, or update Credit Card. Used to update user data, do redirects, or provide notifications. Payload contains an event name and a response object. [Learn More](/developers/handling-embed-events). | ```javascript { handleResponse: async function(payload) { console.log("Event ", payload.event); console.log("Response Object ", payload.response); } } ``` ### coupon | Type | Required | Description | | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------- | | String | No | Stripe coupon **ID**. Pass in to have a coupon automatically applied to all prices on the page. Also works with Stripe Promo Codes. | ```javascript { coupon: "coupon_id" } ``` ### service | Type | Required | Description | | ------ | -------- | -------------------------------------------------------------------------------------------- | | String | No | The Billflow service. Use this to dynamically pass in different service to the billing page. | ```javascript { service: "Your Service" } ``` ### tier | Type | Required | Description | | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------- | | String | No | Tier name as defined by the sb\_tier metadata tag. Pass in tier & interval to dynamically show specific checkout forms. | ```javascript { tier: "Basic" } ``` ### interval | Type | Required | Description | | ------ | -------- | ---------------------------------------------------------- | | String | No | Interval string for the desired tier. Eg: day, month, year | ```javascript { interval: "month" } ``` ### interval\_count | Type | Required | Description | | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | Integer | No | This is only required if you are using a custom interval like 'every 6 months' or 'every 2 weeks'. It will be the number for the custom interval. | ```javascript { interval_count: 6 } ``` ## Options ### options**.metadata** | Type | Required | Description | | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | | Object | No | An object of key-value pairs. They will be added to the metadata of the Customer and Subscription in Stripe when they are created. | ```javascript { options: { metadata: { key1: "Value 1", key2: "Value 2" } } } ``` ### options**.default\_tax\_rates** | Type | Required | Description | | ----- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Array | No | An array of Stripe [tax rate IDs](https://stripe.com/docs/api/subscriptions/create#create_subscription-default_tax_rates) to be applied to a subscription on creation. You can learn more about Stripe tax rates [here](https://stripe.com/docs/billing/subscriptions/taxes#static-configuration). The tax rate will be applied on subscription creation. | ```javascript { options: { default_tax_rates: [ "txr_1HZfxhEGJvDU3rtbcukgdicw" ] } } ``` ### options.quantity | Type | Required | Description | | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Object | No |Use to set the quantity of a subscription during creation. Can pass in an integer or an object of key-value pairs. The unit\_label is defined on the Stripe product and used to define which quantity is being set. If an integer is passed, it will apply the quantity to all products on the tier, if an object is passed with the unit\_labels as keys, it will assign that quantity to the respective unit\_label.
Eg: 5
OR
Eg: {product\_unit\_label1 : 10, unit\_label2: 20}
| ```javascript { options: { quantity: { super_user: 3, user: 5, }, } } ``` # Customer Portal Configs Customer Portal Configuration Options ## Required Configs ### email | Type | Required | Description | | ------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | Yes OR customer\_id | The customer's email address. This will automatically populate checkout, or be used to identify current subscribers. Can alternatively use customer\_id. | ```javascript { email: "example@google.com" } ``` ### customer\_id | Type | Required | Description | | ------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | Yes OR email | The customer's Stripe Customer ID. This will be used to identify existing subscribers or subscribe new customers. You must have already created the Stripe Customer object to use this. | ```javascript { customer_id: "cus_FtWXI6U0YxebLd" } ``` ### hash | Type | Required | Description | | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | Yes | An HMAC string used for authenticating the user loading the embed more securely. This is **required in order to go to 'Live Mode'** in Billflow (connected to 'Live Mode' in Stripe). The hash is generated with your Billflow Secret and the customer's email or Stripe Customer ID, whichever you are using to identify users. | ```javascript { hash: "0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045" } ``` ## Available Configs ### subscription\_id | Type | Required | Description | | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | No | The Stripe subscription ID. Pass if you want a user to only see and manage a single subscription. Used if your customers have multiple subscriptions and you only want them to view one. | ```javascript { subscription_id: "sub_I9cJJypSQHOfzl" } ``` ### service | Type | Required | Description | | ------ | -------- | -------------------------------------------------------------------------------------------- | | String | No | The Billflow service. Use this to dynamically pass in different service to the billing page. | ```javascript { service: "Your Service" } ``` ### handleResponse | Type | Required | Description | | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Function | No | Function that is called when users signup, change plan (upgrade/downgrade), resubscribe, or update Credit Card. Used to update user data, do redirects, or provide notifications. Payload contains an event name and a response object. [Learn More](/developers/handling-embed-events). | ```javascript { handleResponse: async function(payload) { console.log("Event ", payload.event); console.log("Response Object ", payload.response); } } ``` ### options.quantity | Type | Required | Description | | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Object | No |Use to set the quantity of a subscription during creation. Can pass in an integer or an object of key-value pairs. The unit\_label is defined on the Stripe product and used to define which quantity is being set. If an integer is passed, it will apply the quantity to all products on the tier, if an object is passed with the unit\_labels as keys, it will assign that quantity to the respective unit\_label.
Eg: 5
OR
Eg: {product\_unit\_label1 : 10, unit\_label2: 20}
| ```javascript { options: { quantity: { super_user: 3, user: 5, }, } } ``` # Pricing Page Configs Pricing Page Configuration Options ## Available Configs ### email | Type | Required | Description | | ------ | -------- | ------------------------------------------------------------------------------------------------------ | | String | No | The customer's email address. Pass this in so customers do not need to enter in their email on signup. | ```javascript { email: "example@google.com" } ``` ### service | Type | Required | Description | | ------ | -------- | -------------------------------------------------------------------------------------------- | | String | No | The Billflow service. Use this to dynamically pass in different service to the billing page. | ```javascript { service: "Your Service" } ``` ### customer\_id | Type | Required | Description | | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | No | The customer's Stripe Customer ID. Pass this in to checkout an existing customer. You must have already created the Stripe Customer object to use this. | ```javascript { customer_id: "cus_FtWXI6U0YxebLd" } ``` ### handleResponse | Type | Required | Description | | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Function | No | Function that is called when users signup, change plan (upgrade/downgrade), resubscribe, or update Credit Card. Used to update user data, do redirects, or provide notifications. Payload contains an event name and a response object. [Learn More](/developers/handling-embed-events). | ```javascript { handleResponse: async function(payload) { console.log("Event ", payload.event); console.log("Response Object ", payload.response); } } ``` ### options.**disableTiers** | Type | Required | Description | | ----- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Array | No |Use to dynamically disable certain tiers for a customer when selecting a plan. Add an array of tiers (corresponds to metadata tag sb\_tier) to disable users from being able to change to those specific plans.
Eg: \['Tier 1', 'Tier 2']
| ```javascript { options: { disableTiers: ['Tier 1', 'Tier 2'] } } ``` ### options.quantity | Type | Required | Description | | ------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Object | No |Use to set the quantity of a subscription during creation. Can pass in an integer or an object of key-value pairs. The unit\_label is defined on the Stripe product and used to define which quantity is being set. If an integer is passed, it will apply the quantity to all products on the tier, if an object is passed with the unit\_labels as keys, it will assign that quantity to the respective unit\_label.
Eg: 5
OR
Eg: {product\_unit\_label1 : 10, unit\_label2: 20}
| ```javascript { options: { quantity: { super_user: 3, user: 5, }, } } ``` # Invoice Portal Configs Invoice Portal Configuration Options ## Required Configs ### email | Type | Required | Description | | ------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | Yes OR customer\_id | The customer's email address. This will automatically populate checkout, or be used to identify current subscribers. Can alternatively use customer\_id. | ```javascript { email: "example@google.com" } ``` ### customer\_id | Type | Required | Description | | ------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | Yes OR email | The customer's Stripe Customer ID. This will be used to identify existing subscribers or subscribe new customers. You must have already created the Stripe Customer object to use this. | ```javascript { customer_id: "cus_FtWXI6U0YxebLd" } ``` ### hash | Type | Required | Description | | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | Yes | An HMAC string used for authenticating the user loading the embed more securely. This is **required in order to go to 'Live Mode'** in Billflow (connected to 'Live Mode' in Stripe). The hash is generated with your Billflow Secret and the customer's email or Stripe Customer ID, whichever you are using to identify users. | ```javascript { hash: "0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045" } ``` ## Available Configs ### subscription\_id | Type | Required | Description | | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | No | The Stripe subscription ID. Pass if you want a user to only see and manage a single subscription. Used if your customers have multiple subscriptions and you only want them to view one. | ```javascript { subscription_id: "sub_I9cJJypSQHOfzl" } ``` ### handleResponse | Type | Required | Description | | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Function | No | Function that is called when users signup, change plan (upgrade/downgrade), resubscribe, or update Credit Card. Used to update user data, do redirects, or provide notifications. Payload contains an event name and a response object. [Learn More](/developers/handling-embed-events). | ```javascript { handleResponse: async function(payload) { console.log("Event ", payload.event); console.log("Response Object ", payload.response); } } ``` ### options.quantity | Type | Required | Description | | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Object | No |Use to set the quantity of a subscription during creation. Can get an integer or an object of key-value pairs. The quantity will apply to products with the unit\_label defined. If an integer is passed, it will apply the quantity to all products on the tier, if an object is passed with the unit\_labels as keys, it will assign that quantity to the respective unit\_label.
Eg: 5
OR
Eg: {product\_unit\_label1 : 10, unit\_label2: 20}
| ```javascript { options: { quantity: { super_user: 3, user: 5, }, } ``` # Handling Events Handling actions & events in a billing page ## Handling actions The handleResponse function can be used to update user information in your database regarding the customers subscription information, to do redirects on signup, or present notifications. ### Parameters handleResponse will pass a variable which contains the following properties | Variable Name | Description | | ------------- | ---------------------------------------- | | **event** | The name of the event that occurred | | **response** | The response object returned from Stripe | ### Events | Event Name | Description | Response Object | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | **pre\_load** | First thing run after the embed javascript loads, before any API calls have been made. Use to inject React components or tell when the embed has loaded. | Embed Configuration | | **post\_load** |billingData: null — means the subscription portal is not loaded yet
billingData: {no\_user: true} — means the current email is not a customer
productData: null — means pricing (products) are not loaded yet
productData: \[ … ] — means the pricing (products) are loaded
|billingData
currentConfig
productData
| | **pre\_subscribe** |This event allows you to do some actions before creating a subscription. For example, you can use it for checking if a user exists in your system.
Throwing an error here will prevent Billflow from creating a subscription.
|service
tier
| | **create\_subscription** | Triggered when a subscription is created from a billing page. Use this event to update your user system with the Stripe subscription ID and tier. Learn more on the install guide. | [Subscription](https://stripe.com/docs/api/subscriptions/object) | | **pre\_change\_plan** | Triggered before when a user clicks on the confirm button, but before the API call is made to change plan. |service
tier
| | **change\_plan** | Triggered when a user upgrades or downgrades using the Plan Picker. You can use this to update their tier information or create notifications. | [Subscription](https://stripe.com/docs/api/subscriptions/object) | | **select\_plan** | Triggered when a user selects a plan from the pricing page or plan picker. Use this to redirect to other pages or forms to create custom on-boarding flows. | Tier name & [Plan](https://stripe.com/docs/api/plans/object) | | **pre\_resubscribe** | Triggered when a customer clicks on the resubscribe button, but before the API call is made to resubscribe. |service
subscription\_id
| | **resubscribe** | Triggered when a customer resubscribes from the portal. This occurs when a customer was cancelled, they come back to the portal and choose to resubscribe to a plan. Use this event to update your user system with the Stripe subscription ID and tier. | [Subscription](https://stripe.com/docs/api/subscriptions/object) | | **pre\_cancel** | Triggered when a customer clicks on the cancellation button. Use this to create a custom cancellation flow. | | | **cancel\_subscription** | Triggered when a customer requests a cancellation. Use this event to update subscription status for a user. | [Subscription](https://stripe.com/docs/api/subscriptions/object) | | **pre\_change\_card** | Triggered when a customer clicks on change card button, but before the API call is made to change card. |service
subscription\_id
| | **update\_card** | Triggered when a customer updates their Credit Card information or enters it for the first time. Use for presenting notifications to the user. | [Customer](https://stripe.com/docs/api/customers/object) | | **request\_error** | Triggered when any of our API requests failed. User for custom handling of any request failures. | The Request Error | | **pre\_update\_quantity** | Triggered before quantity is updated on a subscription from the customer portal |Price
quantity
subscription\_id
| | **update\_quantity** | Triggered after a quantity has been updated from the customer portal | [Subscription](https://stripe.com/docs/api/subscriptions/object) | | **add\_coupon** | Triggered after a coupon has been added. Can be used to create custom coupon restriction logic. | [Coupon](https://stripe.com/docs/api/coupons/object) | ## Sample Redirect on Subscribe Redirect to a URL after subscription ```markup ``` ## Sample Redirect based on Tier Subscribed {% embed url="a render function that will return the custom content as a string, basic html tags are will work.
Stripe price object is passed to this function from Billflow, you can use the values to create the custom element.
| Then you can pass the `CustomBasicPrice` to the config options. ```javascript /** Add the custom pricing item element to Billflow Config options like this. */ { billing_page_id: "5GNX3vmderQxoquHKUPe", options: { elements: { pricing: { tiers: [ { name: "Basic", prices: [ CustomBasicPrice ] } ] } } } } ``` [Checkout the full example code here.](https://codepen.io/kslung/pen/wvdPyWj) ### Pricing: Select Plan Button This section describes how you can customize the **Select Plan Button** like the following example. {% embed url="