Custom Payment Gateway Icon

[ptachege]

we are creating a custom payment gateway to integrate with givewp. now am wondering how I can define a custom icon for this new custom payment method since at the moment it's defaulting to "fas fa-hand-holding-heart". is there a hook to modify this or I have to use Js/jQuery? and if that's the case, if I Enque the scripts, how do I setup it up such that the manipulation is executed when the payment gateways are already loaded?

[jonwaldstein]

Hey @ptachege,

Great question!

First, are you following the docs with our gateway api?

Second, are you testing with a (v3) form that uses the visual donation form builder introduced in GiveWP 3.0 or the option based forms in previous versions?

Adding custom gateway icons is something we have briefly talked about, but is not straight forward at the moment. We do have plans to make this easier in the near future.

For the time being, I would recommend using css to change the icon for your gateway.

In v3 forms you can target the label icon and change the unicode in the pseudo before element:

// replace onsite-example-test-gateway with your gateway name

.givewp-fields-gateways__gateway--onsite-example-test-gateway .givewp-fields-gateways__gateway__icon::before {
	content: '\f09d';
}

The unicodes here currently coincide with font-awesome:

https://fontawesome.com/icons/credit-card?f=classic&s=solid

If you need something outside of font-awesome, you could try something like this:

// replace onsite-example-test-gateway with your gateway name

.givewp-fields-gateways__gateway--onsite-example-test-gateway .givewp-fields-gateways__gateway__icon::before {
	content: '';
	background: url(http://placekitten.com/25/25);
	width: 25px;
	height: 25px;
}