Stripe Button Element
The Stripe Button Element is a button that takes a payment for one product. When a visitor clicks it, they are sent to Stripe’s secure checkout page to pay; afterwards Stripe sends them back to a page you choose. Card details are entered on Stripe’s page, never on your site.
It is a simple way to sell a single item, a ticket, a deposit or a donation of a fixed amount without setting up a shop. The button looks and behaves like the Button Element, so you have the same design options.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Stripe Button Element
First enter your Stripe secret keys in Global Options > Tirenoa Builder Elements > Stripe Button: a test key and a live key, which you find in your Stripe dashboard. The API Mode there decides which key is used; you can override it per button on the Payment tab.
On the Payment tab, enter the Product Name, Currency, Product Price and Quantity, and optionally a Shipping Price and a Tax Rate. The tax rates are read from your Stripe account, separately for test and live mode. Collect Shipping Address asks the buyer for a delivery address on the checkout page.
On the General tab, set the Button Text, Payment Success URL and Payment Cancel URL; without them the buyer returns to the page with the button. Button Target decides whether the checkout opens in the same or a new tab. The Design tab offers the usual button options: colors and gradient, 3D or flat type, border, size, typography, span and an icon.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Stripe Button. Change them there to style every Stripe Button at once.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
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. for example http://example.com. |
| Payment Cancel URL | The URL the customer will be directed to if they decide to cancel payment. for example 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. |
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. |
| Button Gradient Start Hover Color | Controls the start hover color of the button background. |
| Button Gradient End Hover Color | Controls the end hover 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 Accent Hover Color | Controls the hover 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 Hover Bevel Color For 3D Mode | Controls the hover bevel color of the button when using 3D button type. |
| Button Border Size | Controls the border size. In pixels or percentage, for example 10px or 10%. |
| Button Border Radius | Controls the border radius. Enter values including any valid CSS unit, for example 10px. |
| Button Border Color | Controls the border color of the button. |
| Button Border Hover Color | Controls the hover 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, for example 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. |
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. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| 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. |
Tips
- Build and test in Test mode first. Stripe’s test card numbers let you run the whole checkout without real money; switch to Live only when everything works.
- Use a period as the decimal separator in prices, for example
19.90. - Tax rates must be created in your Stripe dashboard under Products > Tax Rates before they appear in the Tax Rate list.
- Create a dedicated thank-you page for the Payment Success URL that confirms the purchase and says what happens next.
- Before you ship or deliver, check each payment in your Stripe dashboard: product, amount and currency should match what you offer.