Chapter 24. Credit card gateways for payments

1. Generating an access token with the Billing API scope in the 3scale Admin Portal.
2. Obtaining the keys and the webhook secret from Stripe.
3. Configuring charging in the 3scale Admin Portal.
4. Editing credit card details in the 3scale Developer Portal
5. Updating the text of unsuccessfully charged email response
6. Optional: Allowing payments of rejected invoices via the Developer Portal

Generating an access token with the Billing API scope in the 3scale Admin Portal

1. In the 3scale Admin Portal, go to Account Settings > Personal > Tokens.

2. Create a Read & Write token with the Billing API scope:

   1. Click Add Access Token.
   2. Specify a name for the token.
   3. Choose the scope: Billing API.
   4. Select the permission level: Read & Write.
   5. Click Create Access token.

   6. Copy the access token.

      • Ensure you copy the access token to a file text. The access token will not be displayed afterwards.
   7. To finish the token generation, click I have copied the token.

1. Open the Stripe dashboard.
2. Find your API keys by following the instructions in the Stripe documentation.
3. Copy the Secret Key, and the Publishable Key

1. Go to Developers > Webhooks.
2. Click Add endpoint

3. Fill in with the following endpoint URL:

   https://<Your-provider-admin-domain>/api/payment_callbacks/stripe_callbacks?access_token=<value-of-access-token>

4. In Events to send, add payment_intent.succeeded.
5. Click Add endpoint.
6. Click to reveal the signing secret of the webhook you just created and take note of this secret. This is the Webhook Signing Secret.

1. Go to Audience > Billing > Charging & Gateway.
2. Select Charging enabled and click Save.
3. In Credit card gateway > Gateway, select Stripe as the gateway.
4. Add the Secret Key, the Publishable Key and the Webhook Signing Secret you obtained from your Stripe account in Obtaining the keys and the webhook secret from Stripe.
5. Click Save.

Editing credit card details in the 3scale Developer Portal

1. Login to the 3scale Developer Portal with a developer account.
2. Go to Settings > Credit Card Details.
3. Add the following credit card details: credit card number, expiration date and CVC.
4. Click Save details.

1. In the 3scale Admin Portal, go to Audience > Messages > Email Templates.
2. Select Invoice charge failure for buyer with retry.
3. Click Override.

4. Update the template message: This is the complete text to be used in the unsuccessfully charged email response:

   Dear {{ account.name }},
   
   Thank you for using our service.
   
   We're sorry to inform you that your last payment was declined.
   This may have been caused by a few common reasons:
   
   - A new authentication policy enforced by your bank
   - An expired credit card
   - Insufficient funds on the account
   
   To continue using your service, verify the status of your credit card and update or re-enter the credit card details at {{payment_url}}.
   
   If you need help, don't hesitate to contact us at {{ provider.finance_support_email }}.
   
   Best regards,
   The {{ provider.name }} API Team

5. Click Create Email Template.

1. In the 3scale Admin Portal, go to Audience > Developer Portal > Content.
2. Edit Root > Invoices > Show template.

3. Replace these lines of code:

   <a href="{{ urls.invoices }}">
     <i class="fa fa-chevron-left"></i>
       Cancel
       </a>
       {{ invoice.period_begin | date: '%B, %Y' }} Invoice

   With this snippet:

   <div class="clearfix">
     <a href="{{ urls.invoices }}">
       <i class="fa fa-chevron-left"></i>
         Cancel
       </a>
       {{ invoice.period_begin | date: '%B, %Y' }} Invoice
       {% if invoice.pay_now? %}
         <a href="{{invoice.url}}/payment" class="pull-right btn btn-success pay-invoice-btn">Pay invoice</a>
       {% endif %}
   </div>