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.

View Element Demo Page!

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

Heading		Description
Button Text		Add the text that will display on button.
Button Target		_self = open in same browser tab, _blank = open in new browser tab.
Alignment		Select the button's alignment.
Payment Success URL		The URL the customer will be directed to after the payment is successful. ex: http://example.com.
Payment Cancel URL		The URL the customer will be directed to if they decide to cancel payment. ex: http://example.com.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky Visibility		Choose 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 Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Payment

Heading		Description
API Mode		Build your integration in Test mode, and switch to Live mode when you are ready.
Collect Shipping Address		Collect customer shipping address.
Product Name		Add the product name that you sell.
Currency		Select the currency.
Product Price		Add the product price. Decimal numbers are supported by using the "." (period) delimiter.
Quantity		Add the product quantity.
Shipping Price		Add the shipping price. Decimal numbers are supported by using the "." (period) delimiter.
Tax Rate		Select the tax rate. These options can be manage on Stripe dashboard > Products > Tax Rates.

Design

Heading		Description
Button Style		Select the button's color. Select default to use Global Options values, or custom to use advanced color options below.
Button Gradient Start Color		Controls the start color of the button background.
Button Gradient End Color		Controls the end color of the button background.
Gradient Start Position		Select start position for gradient.
Gradient End Position		Select end position for gradient.
Gradient Type		Controls gradient type.
Radial Direction		Select direction for radial gradient.
Gradient Angle		Controls the gradient angle. In degrees.
Button Text Color		Controls the color of the button text, divider and icon.
Button Type		Controls the button type.
Button Bevel Color For 3D Mode		Controls the bevel color of the button when using 3D button type.
Button Border Size		Controls the border size. In pixels or percentage, ex: 10px or 10%.
Button Border Radius		Controls the border radius. Enter values including any valid CSS unit, ex: 10px.
Button Border Color		Controls the border color of the button.
Button Size		Controls the button size.
Padding		Controls the padding for the button.
Typography		Controls the button typography, if left empty will inherit from globals.
Button Span		Controls if the button spans the full width of its container.
Margin		Enter values including any valid CSS unit, ex: 4%.
Icon		Click an icon to select, click again to deselect.
Icon Position		Choose the position of the icon on the button.
Icon Divider		Choose to display a divider between icon and text.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

How To Use The Stripe Button Element
Element Options