When a user is managing payment methods in My Account, you might have noticed multiple dropdown options for each of the payment providers you have configured. This guide will help you understand how to rename or hide payment providers in the My Account Wallet Components template.
Understanding Dropdown Options
The dropdown options you see in the My Account Wallet Components template are pulled from the integrations you've configured. These options are designed to provide your users with a selection of payment methods to choose from when adding a new payment method. However, sometimes you might want to customize these options.
Hiding and Showing Payment Provider Configurations
You can control the visibility of payment provider configurations across all interfaces. When you hide a configuration, it will be removed from Checkout, My Account, Publisher Dashboard, and Apply Term Wizard.
How to Hide a Configuration
1. Navigate to Edit Business → Payment Provider
2. Locate the payment provider configuration you want to hide
3. Click the Hide from all interfaces button
4. Confirm the action when prompted
5. You'll see a confirmation message: "Configuration has been hidden from all interfaces."
How to Show a Hidden Configuration
1. Navigate to Edit Business → Payment Provider
2. Locate the hidden payment provider configuration
3. Click the Show in all interfaces button
4. Confirm the action when prompted
5. You'll see a confirmation message: "Configuration has been restored in all interfaces."
Using the API
You can also control configuration visibility programmatically using the /publisher/payment/provider/configuration/setVisibility API endpoint. Set the is_visible parameter to false to hide the configuration or true to show it.
Hiding a configuration affects all interfaces where users can select or manage payment methods. This includes customer-facing interfaces (Checkout, My Account) and internal tools (Publisher Dashboard, Apply Term Wizard).
System Templates and Customization
To modify the dropdown options for payment providers without utilizing the above setting, you may want to work with system templates. Specifically, you can update the My Account Wallet Components template to achieve the desired changes.
Here's a step-by-step guide:
-
Access the My Account Wallet Components template: Log in to your Piano dashboard and navigate to the template section. Look for the "My Account Wallet Components" template.
-
Find the HTML Code: Within the template, locate the HTML code that controls the appearance of the dropdown menu. You can find it under the following HTML tag:
<ul class="dropdown-menu manage-dropdown dropdown-menu-right">
-
Customize Dropdown Options: Inside the tag, you'll find the list of dropdown options that are displayed to your users. You can modify the text and order of these options to match your preferences.
-
Hiding Payment Providers: If you want to hide certain payment providers, you can do so by adding the following code:
&& metadataItem.id !==To the row containing:
ng-if="canAddPaymentInstrument(metadataItem)"Where you would replace the with the actual source ID number for the respective payment provider listed later in this article.*
Below is an example, of how the template's code would look if you'd like to hide (payment provider source 74) and rename (payment provider source 40) two payment providers while any other providers configured would retain the default naming.
<li ng-repeat="metadataItem in getPaymentInstrumentsMetadata()"
ng-if="canAddPaymentInstrument(metadataItem) && metadataItem.id !== 74"
ng-click="addPaymentInstrument(metadataItem)"
data-e2e="add-{{metadataItem.key}}">
<div ng-if="metadataItem.id === 40">
<t >Custom Provider Name</t>>
</div>
<div ng-if="metadataItem.id !== 40">
<t context="checkout.platform">{{getNewInstrumentButtonText(metadataItem)}}</t>
</div>
</li>
*Here is a list of the source IDs for each provider:
|
Payment Providers |
Piano Integrated Payment Methods |
Source no. |
|
Bancard |
Credit cards |
47 |
|
Braintree (PayPal Company) |
Credit cards |
4 |
|
Braintree (PayPal Company) |
PayPal |
11 |
|
Braintree (PayPal Company) |
Apple Pay |
25 |
|
CreditGuard |
Credit cards |
66 |
|
Chase Orbital |
Credit Cards |
73 |
|
Cybersource TMS |
Credit cards |
44 |
|
Cybersource |
Credit cards |
39 |
|
Datatrans |
Credit cards |
35 |
|
Datatrans |
Postfinance |
36 |
|
Datatrans |
Twint |
59 |
|
Datatrans |
Apple Pay |
61 |
|
Datatrans |
Google Pay |
60 |
|
Datatrans |
PayPal |
64 |
|
Volga |
Invoice |
63 |
|
Invoice Options 1 (inbaf) |
Invoice |
75 |
|
Invoice Options 2 (inbas) |
Invoice |
72 |
|
Easypay (Portugal) |
Credit cards |
26 |
|
Easypay (Portugal) |
Multibanco |
28 |
|
Easypay (Portugal) |
MBway |
29 |
|
Easypay (Portugal) |
Direct Debit |
30 |
|
Eigen |
Credit cards |
24 |
|
GMO |
Credit cards |
43 |
|
GMO |
Au |
68 |
|
GMO |
Docomo |
65 |
|
GMO |
SoftBank |
67 |
|
Gocardless (drop-in) |
Direct Debits |
69 |
|
Gocardless (legacy) |
Direct Debits |
50 |
|
Klarna |
Credit cards |
32 |
|
Klarna |
Direct Debit |
32 |
|
OBI |
Credit cards |
33 |
|
OBI |
PayPal |
34 |
|
Onet (RAS PL proprietary gateway) |
Credit cards |
37 |
|
Openpay via Spreedly (deprecated) |
Credit cards, Cash |
23 |
|
Paymentez |
Credit cards |
51 |
|
PayPal Express Checkout |
PayPal |
22 |
|
PayPal Commerce Platform |
PayPal |
79 |
|
PayU Argentina via PaymentsOS |
Credit cards |
56 |
|
PayU Brazil via PaymentsOS |
Credit cards |
53 |
|
PayU Chile via PaymentsOS |
Credit cards |
52 |
|
PayU Colombia via PaymentsOS |
Credit cards |
54 |
|
PayU Colombia via PaymentsOS |
PSE (doesn't support recurring payments) |
57 |
|
PayU India via PaymentsOS |
Credit cards |
46 |
|
PayU India via PaymentsOS |
Netbanking |
49 |
|
PayU India via PaymentsOS |
UPI (doesn't support recurring payments) |
48 |
|
PayU Peru via PaymentsOS |
Credit cards |
55 |
|
Payway |
Credit cards |
19 |
|
Payway |
Apple Pay |
42 |
|
Sony Payments |
Credit cards |
71 |
|
Stripe |
Credit cards |
40 |
|
Stripe |
Apple Pay |
41 |
|
Stripe Elements |
Cards |
74 |
|
Stripe Elements |
Google Pay/Link |
74 |
|
Stripe Elements |
Sepa |
74 |
|
Stripe Elements |
Bacs |
74 |
|
Stripe Elements |
Ideal |
74 |
|
Stripe Elements |
Bancontact |
74 |
|
Stripe Elements |
Sofort |
74 |
|
Stripe Elements |
ACH |
74 |
|
Vipps |
Mobile payment |
77 |
|
Zlick |
Mobile payment |
78 |
Additionally, we have an FAQ article that covers How to Add and Remove Payment Methods in My Account, which might provide further insights: