Stripe Button Element

Last Update: March 21, 2024

The easy-to-use Stripe Button Element allows you to add a payment button to your site, without having to set up a full shop. This is very useful for the sale of simple products, taking payment with Stripe. Read below for an overview of the specific features of the Element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Stripe Button Element

The Stripe Button Element allows you to add a Stripe payment button anywhere on your site. There are two aspects to using this element. Connecting your Stripe account, and adding and customizing the button itself.

The General Tab is the place to set the links, button text, alignment, and other practical options. Here, for example, you can set the Payment Success URL and the Payment Cancel URL, as well as the Button text and alignment.

The next step is to set the Payment options for the Button, including setting the API Mode. See the Stripe Button global options to connect your Stripe account. On this tab, you can also set the product name, price, currency, shipping, tax rate etc.

The next step is to set the Design options for the Button, including the colors and style.

The Animations found in the Extras Tab can also be used to animate the entry of the button onto the page, with seven animations to choose from.

Read below for a description of all element options, and watch the video at the top for a visual overview of using the Stripe Button.

Element Options

Note: The Default setting will use the global settings assigned for this element at Avada > Options > Avada Builder Elements > Button. Also, please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, so the options screen may look somewhat different.

General

HeadingDescription
Button TextAdd the text that will display on button.
Button Target_self = open in same browser tab, _blank = open in new browser tab.
AlignmentSelect the button's alignment.
Payment Success URLThe URL the customer will be directed to after the payment is successful. ex: http://example.com.
Payment Cancel URLThe URL the customer will be directed to if they decide to cancel payment. ex: http://example.com.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Payment

HeadingDescription
API ModeBuild your integration in Test mode, and switch to Live mode when you are ready.
Collect Shipping AddressCollect customer shipping address.
Product NameAdd the product name that you sell.
CurrencySelect the currency.
Product PriceAdd the product price. Decimal numbers are supported by using the "." (period) delimiter.
QuantityAdd the product quantity.
Shipping PriceAdd the shipping price. Decimal numbers are supported by using the "." (period) delimiter.
Tax RateSelect the tax rate. These options can be manage on Stripe dashboard > Products > Tax Rates.

Design

HeadingDescription
Button StyleSelect the button's color. Select default to use Global Options values, or custom to use advanced color options below.
Button Gradient Start ColorControls the start color of the button background.
Button Gradient End ColorControls the end color of the button background.
Gradient Start PositionSelect start position for gradient.
Gradient End PositionSelect end position for gradient.
Gradient TypeControls gradient type.
Radial DirectionSelect direction for radial gradient.
Gradient AngleControls the gradient angle. In degrees.
Button Text ColorControls the color of the button text, divider and icon.
Button TypeControls the button type.
Button Bevel Color For 3D ModeControls the bevel color of the button when using 3D button type.
Button Border SizeControls the border size. In pixels or percentage, ex: 10px or 10%.
Button Border RadiusControls the border radius. Enter values including any valid CSS unit, ex: 10px.
Button Border ColorControls the border color of the button.
Button SizeControls the button size.
PaddingControls the padding for the button.
TypographyControls the button typography, if left empty will inherit from globals.
Button SpanControls if the button spans the full width of its container.
MarginEnter values including any valid CSS unit, ex: 4%.
IconClick an icon to select, click again to deselect.
Icon PositionChoose the position of the icon on the button.
Icon DividerChoose to display a divider between icon and text.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article