Chapter 3. Credit Card Flow
This guide will help you define a great workflow in your Developer Portal to ensure that developers submit their credit card details before they gain access to your paid API(s).
It’s increasingly common to see businesses charge for access to their APIs. Sometimes the entire business model of a company is built around paid APIs, while other times it’s an important revenue stream to cover costs or generate profits for the company.
3.1. Prerequisites
- 3scale finance module (billing and charging) activated and configured
- Paid plans defined (usually application plans)
After following the steps detailed below, all the existing developers who have paid plans but no credit card details entered, will be redirected to the credit card details form. They will not be allowed to access the portal until they have successfully entered their credit card details.
3.3. Step 2: Enable Feature
To enable this feature, you must enable the following 2 switches:
Switches can be found in Audience > Developer Portal > Feature Visibility.
- Finance
- Credit Card on Signup (only available if you are on an older 3scale account.)
3.4. Step 4: Ensure credit card is entered by developer when upgrading from a free to a paid plan
You may allow developers to select plans when changing plans. The ideal setting is Request credit card entry for paid plans. This will ensure that if a paid plan is selected, the plan change can only be done instantly if a credit card is stored. Otherwise a notification is displayed to point the developer to the location to enter their card details.
This setting is defined from the Admin Portal. Go to [your_API_name] > Integration > Settings > Application Plans. Here you can select the option Request credit card entry for paid plans in the section Application Plans of the settings form.
To enable this behavior, you will need to make changes to the following CMS pages:
- applications/show template
- applications/form partial
3.4.1. Editing applications/show Template
You will need to look for plan_widget
in the page code and change it to the following:
{% plan_widget application, wizard: true %}
If you have added the plan_widget
in any other pages, you will need to update those to match the above snippet.
3.4.2. Editing applications/form partial
Follow the same instructions above to change any instances of plan_widget
in the applications/form partial to conform to the new snippet.
And that’s it! You can now enforce the addition of credit card details before allowing usage of your API for paid plans.