Billing

In the billing area of the Settings tab, enable charging by checking the box and click save. You will see all the fields that you need to setup to create the link to your Adyen gateway. Remember to select Adyen from the gateway dropdown menu and save changes.

By default when credit card authorization requests are sent from 3scale to Adyen, the returned response does not include the unique identifier of the credit card. To ensure that the correct credit card reference is saved in 3scale and the correct card is charged, this additional data needs to be enabled. In order to do this, you should ask Adyen support to enable the "alias" additional data in the response for the authorization request.

Make sure you accelerate the test cycle by enabling Prepaid Mode to generate the charge within a day or so. Then choose an existing test account and create an invoice with a line item charge added. Charge the account immediately. This testing approach will incur some minor costs, but it is worth it for the peace of mind that everything works fine, before you have real paying developers using your API.

The payment gateway is now set up, but your users might not be able to use it yet since it is not configured in the CMS. Go to the developer portal tab, and find the template called Payment Gateway / Show on the left navigation pane.

If it’s not there already, add the following snippet after the block of code beginning with {% when "stripe" %}

{% when "adyen12" %}
{% if current_account.has_billing_address? %}
  {% adyen12_form %}
{% else %}
  <p><a href="{{ current_account.edit_adyen12_billing_address_url }}">First add a billing address</a></p>
{% endif %}

If your account is in sandbox mode and you encounter any problems, you’ll have to change it to production.

In order to map your data from Braintree with your data on 3scale, you can use the Braintree field called customer.id which is composed of 3scale-[PROVIDER_ID]-[DEVELOPER_ACCOUNT_ID]

In case your account is in the sandbox mode and you encounter any problems, you will have to change it to production.

You will need to replace the whole of the partial content with the below:

<ul class="nav nav-tabs">
   {% unless current_account.requires_credit_card_now? %}
     <li class="{% if urls.account_overview.active? %}active{% endif %}">
       <a href="{{ urls.account_overview }}">Account Details</a>
     </li>

     {% if provider.account_management_enabled? %}
       {% include 'menu_item' with urls.users %}

       {% if provider.multiple_users_allowed? %}
         {% include 'menu_item' with urls.invitations %}
       {% endif %}
     {% endif %}

     {% if provider.account_plans.size > 1 %}
       {% include 'menu_item' with urls.account_plans %}
     {% endif %}
   {%  endunless %}

   {% if provider.finance_allowed? %}
     {% unless current_account.requires_credit_card_now? %}
       {% include 'menu_item' with urls.invoices %}
     {% endunless %}

     {% if urls.payment_details %}
       {% include 'menu_item' with urls.payment_details %}
     {% endif %}
   {% endif %}
 </ul>

If you have customised this partial already, e.g by adding some css, modifying the HTML tags, etc…​ you should use the new liquid tag for this purpose accordingly:

current_account.requires_credit_card_now?

The developer gains access to their keys to start making calls on your API through the API credentials. The changes below ensure that you only display the links if the account does not require credit card details to be entered e.g because there are no paid plans or if the credit card is already available. If you wanted to be completely strict about this, you would edit the system page for displaying the keys to restrict the display – but this would be an advanced customization. You may also want to delete the snippet to display credentials directly on the home page after login.

You will need to replace the whole of the partial content with the below:

    {% if current_user %}
      {% unless current_account.requires_credit_card_now? %}
        <ul class="nav navbar-nav">

          {% if provider.multiple_applications_allowed? %}
            <li class="{% if urls.applications.active? %}active{% endif %}">
              <a href="{{ urls.applications }}">{{ urls.applications.title }}</a>
            </li>
            {% elsif current_account.applications.first == present%}
            {% assign app = current_account.applications.first %}
            <li class="{% if app.url.active? %}active{% endif %}">
              <a href="{{ app.url }}">API Credentials</a>
            </li>
            {% elsif current_user.can.create_application? %}
            <li class="{% if url.new_application.active? %}active{% endif %}">
              <a href="{{ urls.new_application }}">Get API Credentials</a>
            </li>
          {% else %}
            <!-- You don't have any application neither can create one. Bad luck. -->
          {% endif %}

          {% assign live_apps_present = current_account.applications | map: 'state' | any: 'live' %}
          {% if live_apps_present %}
            <li class="{% if urls.stats.active? %}active{% endif %}">
              <a href="{{ urls.stats }}">Statistics</a>
            </li>
          {% endif %}

          {% if provider.multiple_services_allowed? %}
            <li class="{% if urls.services.active? %}active{% endif %}">
              <a href="{{ urls.services }}">{{ urls.services.title }}</a>
            </li>
          {% endif %}

          <li><a class="{% if urls.docs.active? %}active{% endif %}" href="/docs">Documentation</a></li>

        </ul>
      {% endunless %}
      <ul id="user_widget" class="nav navbar-nav navbar-right">
        {% unless current_account.requires_credit_card_now? %}
          <li class="{% if urls.messages_inbox.active? %}active{% endif %}">
            <a href="{{ urls.messages_inbox }}">
              Messages
              {% if current_account.unread_messages.size > 0 %}
                {{ current_account.unread_messages.size }}
              {% endif %}
            </a>
          </li>
          <li class="{% if urls.account_overview.active? %}active{% endif %}">
            <a href="{{ urls.account_overview }}">

              Settings
            </a>
          </li>
        {% endunless %}
        <li>
          <a id="sign-out-button" class="pull-right sign-out" title="Logout {{ current_user.username }}" href="{{ urls.logout }}">

          </a>
        </li>
      </ul>

    {% else %}
      <ul class="nav navbar-nav">
        <li><a href="/docs">Documentation</a></li>
        <li><a href="/#plans">Plans</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="{{ urls.login }}">
            Sign in
          </a>
        </li>
      </ul>
    {% endif %}

Again, if you have customised this partial already, you will need to modify your version accordingly using the same new liquid tag: current_account.requires_credit_card_now?

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.

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.

In order to map your data from Stripe with your data on 3scale, you can use the Stripe field called metadata.3scale_account_reference which is composed of 3scale-[PROVIDER_ID]-[DEVELOPER_ACCOUNT_ID]