We’ve migrated our documentation to a new site, which means some URLs have changed.
Subscriptions

How to rename or hide payment providers in My Account

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.

Hide-1.png

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:

  1. 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.

  2. 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">

  3. 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.

  4. 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:

Last updated: