Stripe Button Element

09/01/2023

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.

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.

Step 1. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Stripe Button from the Elements List.

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

Step 5. 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.

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

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

Step 8. Click Save when you are finished customizing your Button.

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.

869,306 Businesses Trust Avada

Get Avada

869,306 Businesses Trust Avada

Get Avada

869,306 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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, and so the options screen may look somewhat different.

General Tab

Button Text – Add the text that will display on the button.
Button Target – Use this setting to choose how the Button target URL is opened. Options are _self, and _blank. _self means it opens in the same browser tab, while _blank means it opens in a new browser tab.
Alignment – This setting controls the button’s alignment in the container it is in. Choose from Text Flow, Left, Right, or Center. This is now part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.
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 – Allows you to control the Element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
Element Sticky Visibility – (Only visible if parent Container is set to Sticky). 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 – Allows you to add a class for the Element.
CSS ID – Allows you to add an ID for the Element.

View The Options Screen

Payment Tab

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.

View The Options Screen

Design Tab

Button Style – Select the button’s color. Select Default for Global Options, or Custom to use advanced color options as below.

>> denotes dependant options
Button Gradient Start Color – Controls the start color of the button background. Leave empty for the default value.
Button Gradient End Color – Controls the end color of the button background. Leave empty for the default value.
Button Gradient Start Hover Color – Controls the start hover color of the button background. Leave empty for the default value.
Button Gradient End Hover Color – Controls the end hover color of the button background. Leave empty for the default value.
Gradient Start Position – Select start position for gradient.
Gradient End Position – Select end position for gradient.
Gradient Type – Controls gradient type. Choose from Default, Linear, or Radial.
Radial Direction – Select direction for radial gradient.
Gradient Angle – Controls the gradient angle. In degrees.
Button Text Color – Controls the color of the button border, divider, text, and icon. Leave empty for the default value.
Button Accent Hover Color – Controls the hover color of the button border, divider, text, and icon. Leave empty for the default value.
Button Type – Controls the button type. Choose from Default, Flat, or 3D.
Button Bevel Color For 3D Mode – Controls the bevel color of the button when using 3D button type. Leave empty for the default value.
Button Hover Bevel Color For 3D Mode – Controls the hover bevel color of the button when using 3D button type. Leave empty for the default value.
Button Border Size – Controls the border size. In pixels or percentage, ex: 10px or 10%. Leave empty for default values.
Button Border Radius – Controls the border radius. Enter values including any valid CSS unit, ex: 10px. Leave empty for default values.
Button Border Color – Controls the border color of the button. Leave empty for default value.
Button Border Hover Color – Controls the hover border color of the button. Leave empty for default value.
Button Size – Controls the button size. Choose from Custom, Default, Small, Medium, Large, or X-Large.
Padding – Controls the padding for the button. Leave empty for default values.
Typography
Font Family – Controls the font family of the button text. Leave empty for default value.
Font Size – Controls the font size of the button. Leave empty for default value.
Line Height – Controls the line height of the button. Leave empty for default value.
Letter Spacing – Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px. Leave empty for default value.
Text Transform – Choose how the button text is displayed.
Button Span – Controls if the button spans the full width of its container.
Margin – Enter values including any valid CSS unit, ex: 4%. Controls the margin around the Element.
Icon – Select an icon to show on the button. Click to select, click again to deselect.
Icon Position – Choose the position of the icon on the button. Choose from Left or Right.
Icon Divider – Choose to display a divider between icon and text.

View The Options Screen

Extras Tab

Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, Light Speed or Reveal With Color.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Animation Color – Select the color of the animation. For use with the Reveal With Color animation type.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.
Animation Delay – Select the delay time after the animation starts (0 – 5).
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

Location: Avada > Options > Avada Builder Elements > Stripe Button. Here you can find the Global Options specific to the Stripe Button. Because this Element is essentially just a button, some of the design options are connected to the Button Element Global Options.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

API Mode – Build your integration in Test mode, and switch to Live mode when you are ready
Stripe Test Secret Key – Enter your Stripe Test Secret Key. For more information please see Stripe API Guide.
Stripe Live Secret Key – Enter your Live Secret Key. For more information please see Stripe API Guide.