XF 2.1 Change payment profile drop down to buttons like XF

[Ferdinand]

How is it possible for me to change the dropdown options for payment profile on the account upgrades page to a button option like XF?

From:


To:

 

[Chris D]

There isn't a default way of doing it. We hard coded the payment options in a specific way because that's what we needed and we had additional logic to cater for.

Essentially they are submit buttons that submit the form and pass through the relevant payment profile ID. Sort of like this:

<xf:button type="submit" fa="fa-credit-card" class="button--primary button--normal" name="payment_profile_id" value="123">
   Credit / debit card
</xf:button>

<span class="u-muted" style="margin: 0 5px;">or</span>

<xf:button type="submit" fa="fab fa-cc-paypal" class="button--primary button--normal" name="payment_profile_id" value="1234">
   PayPal
</xf:button>

 

[DragonByte Tech]

I'm working on implementing this as an add-on, which will be available for free (with no branding). It'll support User Upgrades and DragonByte eCommerce by default. Unfortunately, it's not possible to automatically support all add-ons that use payment profiles, since I have to modify all templates specifically.

Back-end (Stripe payment profile):


Front-end (from eCommerce):


Adding FontAwesome support meant needing to query all payment profiles again, but it's only one tiny wee query so it won't cause any performance issues

 

[DragonByte Tech]

This has now been released: https://xenforo.com/community/resources/dbtech-payment-ui.7834/