Payments Overview

VpAdmin's payment management module allows you to seamlessly integrate with creator-friendly platforms like Ko-fi, enabling you to manage payments and enhance the user experience on your website. This module provides tools to configure payment settings, manage orders, and streamline the process of selling digital content or subscriptions.

Supported Platforms

Currently, the payment management module primarily supports Ko-fi, a platform popular among creators for receiving donations and selling digital products. Support for other platforms may be added in future releases.

Key Features

1. Payment Configuration: Add and manage payment configurations for your website, enabling your site to integrate with Ko-fi's payment capabilities, complete order management, and handle automatic/manual replies.
2. Enhanced Support Buttons: Add payment buttons to your website that trigger Ko-fi payment flows. You can place any number of payment buttons in any location within your website content.
3. Automatic Email Replies: Configure automatic email replies to users upon successful payment.
4. Order Management: View and manage payment orders associated with your website. For more details, please see Orders.

Setting up Payment Configurations

Follow these steps to configure payment options for your website:

1. Enter Configuration Details: Fill in the required information, including:

   

   • Site Name: Select the site for which this payment configuration will apply.

   • Payment Name: Enter a descriptive name for this payment configuration. Payment names must be unique within the same site.

   • Payment Platform: Select "ko-fi" as the payment platform.

   • Verification Token: This token will be used for Ko-fi webhook verification. Get the Verification Token from your Ko-fi account under API -> Advanced as shown in the screenshot below.

     Ko-fi verification token

     

   • Payment Type: Select the payment type. Options are Onetime, Membership, MembershipWithTier, and shop (currently corresponding to the payment types available on Ko-fi).

   • User Level: If the payment type is MembershipWithTier, set the Tier name to match the one configured in Ko-fi.

   • Auto Reply: Enable or disable automatic email replies upon successful payment. Your reply information will also be displayed in the order details for users on your site.

   • Subject: The subject line for the automatic email.

   • Content: The content of the automatic email. You can provide a publicly available link to the content you are selling, e.g., a PDF document.

     NOTE

     VpAdmin is not responsible for storing any of your protected content. Please do not put any protected digital content, license keys, etc., directly in the email content.

2. Save Configuration: Once you have entered all the necessary information, click "Confirm" to save the new payment configuration.

To learn more about order management and the principles behind automatic/manual replies, please refer to Orders Management.

Adding Enhanced Support Buttons

After setting up payment configurations, you can add enhanced support buttons to your website content. Follow the code examples below based on your chosen Static Site Generator (SSG) framework:

VitePress Theme

<SupportButton
platform="ko-fi"
paymentType="donation"
text="Support me"
url="https://ko-fi.com/vpadmin/?hidefeed=true&widget=true&embed=true&preview=true"
name="Premium Subscription"
:needLogin="true"
size="default"/>

Hugo Theme

{{< support-button
platform="ko-fi"
paymentType="donation"
text="Support Me Demo Button"
url="https://ko-fi.com/vpadmin/?hidefeed=true&widget=true&embed=true&preview=true"
name="Premium Subscription"
needLogin="true"
size="default" >}}

Jekyll Theme

{% include support-button.html
platform="ko-fi"
paymentType="donation"
text="Support Me Demo Button"
url="https://ko-fi.com/vpadmin/?hidefeed=true&widget=true&embed=true&preview=true"
name="Premium Subscription"
needLogin="true"
size="default" %}

Code Parameter Explanation:

• platform: The payment platform, currently only supports "ko-fi".
• paymentType: The payment type, currently only supports "donation" (corresponding to "Onetime" in the configuration) or "subscription" (corresponding to "Membership" and "MembershipWithTier" in the configuration).
• text: The text displayed on the support button.
• url: The URL of your Ko-fi profile. Simply replace "https://ko-fi.com/vpadmin/" in the URL with your Ko-fi page address.
• name: The name of the payment configuration.
• needLogin: Whether a user needs to log in before making a payment.

  NOTE

  To automatically associate Ko-fi orders with users on your website, please set this to true.

• size: The size of the button ("small", "default").

See the payment button demo below:

<SupportButton
platform="ko-fi"
paymentType="donation"
text="Support me"
url="https://ko-fi.com/vpadmin/?hidefeed=true&widget=true&embed=true&preview=true"
name="Premium Subscription"
:needLogin="false"
size="default"/>

Managing Payment Orders

VpAdmin provides a dashboard to view and manage payment orders. You can see all orders associated with your website, view order details, and track payments. In addition to this, VpAdmin also supports automatic/manual replies according to your configuration. For more details, please see Orders.

Conclusion

With VpAdmin's payment management module, you can easily integrate payment functionality into your website, enabling you to monetize your content and grow your online presence. By leveraging the power of Ko-fi and our enhanced support buttons, you can provide a seamless and professional payment experience for your users.