3scale with Stripe make it explicit to edit Credit Card details

Paid APIs with 3scale and Stripe.md

• 3scale API Management includes an easy integration with Strip to monetize your API
• Default Developer Portal templates cover most needs
• See general tips to configure a credit card workflow in your Developer portal
• If you want to further customize the integration this is easy. For example to make it a separate explicit step to edit the credit card details from other payment information such as the invoice address:

1. Add a new page for the intermediate step to only edit invoice address:

• Create a new page in the CMS e.g. /account/edit-payment-address
• In advanced options enable Liquid.
• Paste in the file from A) below

2. Modify the existing edit payment details page (optional if you want to remove the address edit form or the previous stored credit card details)

• In the Portal preview mode navigate to the old Credit Card Details page
• In the right sides bar for quick links to the CMS select "Builtin page Payment Gateway - show"
• Make any changes you desire but take care to leave the key line {% stripe_form "Edit Credit Card Details" %}

3. Update the menu bar for the menu item "Credit Card Details" to link to the page created in Step 1

• In the CMS search for "users_menu"
• Make the change commented in file B below

This is just a start. Share any further customization that you think will be useful!

A_edit-payment-address.html

<table class="list" id="billing_address">
  <tr>
    <th>Billing address</th>
    <td>{{ current_account.billing_address.address }}</td>
  </tr>

  <tr>
    <th>City</th>
    <td>{{ current_account.billing_address.city }}</td>
  </tr>

  <tr>
    <th>Zip</th>
    <td>{{ current_account.billing_address.zip }}</td>
  </tr>

  <tr>
    <th>State</th>
    <td>{{ current_account.billing_address.state }}</td>
  </tr>

  <tr>
    <th>Country</th>
    <td>{{ current_account.billing_address.country }}</td>
  </tr>

  <tr>
    <th>Phone</th>
    <td>{{ current_account.billing_address.phone }}</td>
  </tr>
</table>

{% if current_account.credit_card_stored? %}

  <table class="list" id="credit_card">
    <tr>
      <th>Credit card number</th>
      <td>{{ current_account.credit_card_display_number }}</td>
    </tr>

    <tr>
      <th>Expiration date</th>
      <td>{{ current_account.credit_card_expiration_date }}<td>
    </tr>
  </table>
{% endif %}

<p><a href="{{ current_account.edit_stripe_billing_address_url }}">Edit billing address</a></p>

<p><a href="{{ urls.payment_details }}">Edit Credit Card details</a></p>

<p>By <strong>Entering Credit Card details</strong> you agree to the <a href="{{ urls.credit_card_terms }}" id="terms-link">Terms of Service</a>, <a href="{{ urls.credit_card_privacy }}" id="privacy-link">Privacy</a> and <a href="{{ urls.credit_card_refunds }}" id="refunds-link">Refund</a>.</p>

B_users_menu.html

<ul class="nav nav-tabs">

  <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 %}

  {% if provider.finance_allowed? %}
    {% include 'menu_item' with urls.invoices %}

    {% if urls.payment_details %}
      {% include 'menu_item' with urls.payment_details %}
      
      <!-- REPLACE THE PREVIOUS LINE WITH THIS
      <li class="">
        <a href="/account/edit-payment-address">Credit Card Details</a>
      </li> -->
      
    {% endif %}
  {% endif %}

</ul>