Help Center
Current article

Recommendations for designing a billing interface

A token is an encrypted representation of a customer’s payment card stored in the payment system. The customer enters their card details once, after which they are saved as a token.

Your system can then use this token to process future charges without requiring the customer to enter their card details again. The amount of each charge may vary.

For SaaS services, Allpay’s token API endpoints provide more flexible billing management than the Subscriptions API. Once a card token has been obtained, your system can submit it via the API for each new payment while independently determining the amount, date, and conditions of the charge. This allows you to change pricing plans and implement custom recurring payment scenarios that match your product’s business model.

Therefore, we recommend using the token API endpoints when building billing for SaaS products.

The recommendations below will help you create a simple and intuitive billing management interface.

Consent to future charges

Before the card is saved, the customer must understand the terms of future charges.

Show the price, payment frequency, date of the first charge, and subscription cancellation terms. If the amount may vary, explain how it is calculated.

The customer must explicitly consent to future automatic charges.

Automatic payment retries

If a payment fails, for example due to insufficient funds, set up automatic retry attempts.

We recommend making 5–7 attempts and gradually increasing the interval between them.

Notify the customer about the failed payment and allow them to add funds or update their card before the next attempt.

Manual payment retry

Add a “Retry payment” button so the customer can initiate another charge after resolving the issue.

The button should remain available until the payment is completed successfully or canceled.

Card management

Allow the customer to add a new card, select a primary card, and delete a saved card.

Display only the card brand and the last four digits in the interface.

Attempt to charge the primary card first. If the payment fails, try the backup card. This reduces the risk of service interruption.

Transaction history

Show all successful and failed charges, as well as refunds, in the transaction history.

For each transaction, display the amount, date, and status. For a refund, also show the related original transaction.

Easy subscription cancellation

The subscription cancellation button should be clearly visible and easy to access.

Stop all future charges after cancellation. Do not automatically delete the saved card unless the customer requests it. Provide a separate option to delete the card.

Clear plan information

Show the customer:

  • plan name;
  • subscription price;
  • taxes and fees;
  • payment frequency;
  • date of the next charge;
  • total amount.

The customer should understand what they are paying for, how much they will be charged, and when.

Notifications

Notify the customer about important events:

  • an upcoming charge if the amount has changed;
  • a successful renewal;
  • a failed payment;
  • a price change;
  • a refund;
  • subscription cancellation.

Notifications can be sent by email or through other available channels and can also be displayed in the interface.

Best practices for designing a user-friendly billing interface to charge payments using tokens: enhance usability, automate error handling, ensure transparency, and improve customer satisfaction.
Related articles
Article categories
API
Updates
Track major updates on the Allpay Telegram channel (ad-free).
Subscribe

FAQ

Can Allpay be integrated into a website created with AI?

Yes. Just as you used AI to build your website, you can ask AI to integrate payments via Allpay. See the recommendations and example prompts.

Do you have webhooks?

Yes, Allpay can send a webhook for a successful payment. Learn more.

Does your API support hosted fields?

Yes. Card input fields can be embedded into your website or app, fully adapting their design. Learn more about Hosted Fields.