Customize the Button UI
Modify the payment button to match the style of your website
Customizing the button style is done differently depending on the JS framework you use.
theme
as light
. Default is dark
.Customizing the button UI in React
Add custom styles to the CrossmintPayButton
component using CSS. See the example of the React SDK below and note the className
attribute:
Changing the style
Changing the style
Customize the style by modifying the relevant css properties. For example:
Would modify the button’s background color as follows:
Changing the text
Changing the text
Customize the text on the button by adding the property getButtonText
and creating an inline function with the following two parameters:
-
connecting: specifies whether the component is loading its packages.
-
paymentMethod: returns the current payment method being used
This setup allows you to control the text depending on the state. For example, the following snippet…
… would result in the following button.
Customizing the button UI in React
Add custom styles to the CrossmintPayButton
component using CSS. See the example of the React SDK below and note the className
attribute:
Changing the style
Changing the style
Customize the style by modifying the relevant css properties. For example:
Would modify the button’s background color as follows:
Changing the text
Changing the text
Customize the text on the button by adding the property getButtonText
and creating an inline function with the following two parameters:
-
connecting: specifies whether the component is loading its packages.
-
paymentMethod: returns the current payment method being used
This setup allows you to control the text depending on the state. For example, the following snippet…
… would result in the following button.
Customizing the button UI in Vanilla JS
Add custom styles to the CrossmintPayButton
component using CSS. See the example of the Vanilla JS SDK below and note the class
attribute:
When specifying the style, you must use the pseudo-element ::part
, because the payment button is a webcomponent:
Changing the style
Changing the style
Customize the style by defining ::part(button)
. For example:
Which would result in the following:
Changing the text
Changing the text
Customize the text by defining ::part(contentParagraph)
. For example:
Which would result in the following: