XF 2.2 Placing a user upgrade payment button in custom areas?


Well-known member
I want to make my own user upgrade page. Is it possible to add the same payment buttons from account_upgrades on a custom page?

Something simple like taking the default code but giving it specific upgrade IDs so I can reuse it for multiple buttons and place them where I want to in my HTML.

<xf:form action="{{ link('purchase', $upgrade, {'user_upgrade_id': $upgrade.user_upgrade_id_5}) }}" ajax="true" data-xf-init="payment-provider-container">
    <div class="inputGroup">
        <xf:if is="{{ count($upgrade.payment_profile_ids) > 1 }}">
            <xf:select name="payment_profile_id">
                <xf:option>{{ phrase('(choose_payment_method)') }}</xf:option>
                <xf:foreach loop="$upgrade.payment_profile_ids" value="$profileId">
                    <xf:if is="{$profiles.{$profileId}}">
                        <xf:option value="{$profileId}">{$profiles.{$profileId}}</xf:option>

            <span class="inputGroup-splitter"></span>

            <xf:button type="submit" icon="purchase" />
        <xf:else />
            <xf:button type="submit" icon="purchase" />

            <xf:hiddenval name="payment_profile_id">{$upgrade.payment_profile_ids|first}</xf:hiddenval>
    <div class="js-paymentProviderReply-user_upgrade{$upgrade.user_upgrade_id}"></div>