Stripe Button

Incorporate seamless financial transactions on your website with JupiterX's Stripe Button widget. Here's your guide to configuring the Content tab to start accepting payments effortlessly.

View Live Demo

Content tab

Pricing & Payments

Detail your product or service for secure transactions:

• Product Name: Clearly name the product or service you're offering to your customers.
• Currency: Choose the currency you'll be transacting in from the dropdown list.
• Product Price: Set a fixed price for the product or service, which will appear during checkout.
• Quantity: Determine the number of items a customer can purchase in a single transaction.
• Shipping Price: If shipping costs apply, include them here to be added to the final transaction amount.
• Tax Rate: Set the appropriate tax percentage. Remember to match this with your Stripe dashboard settings for accuracy in calculations.

Button

Design a button that's inviting and aligned with your site's theme:

• Text: Enter the call-to-action for your button, such as "Pay Now" or "Subscribe".
• Alignment: Align your button text to either the left, center, or right within the button.
• Icon: If you wish to use an icon, select one that fits your message.
• Icon Position: Place the icon before or after your text based on your design preference.
• Icon Spacing: Fine-tune the distance between the icon and the button text for visual balance.
• Button ID: Create a unique ID for CSS customization and identification purposes.

Additional Options

These settings add extra layers of functionality to your payment button:

• Redirect After Success: Specify a URL to redirect customers to after they complete a payment—ideal for a thank you page or order confirmation.
• Stripe Test Environment: Use this mode to test the payment flow without processing actual transactions. Ensure your Stripe account is configured with the test API keys provided by Stripe.
• Open Stripe In New Tab: Providing a new tab for payment can prevent users from losing their place on your website.
• Custom Messages: Craft messages tailored to the steps of the payment process, enhancing the user experience.

Style Tab

Button

Enhance the visual aspects of your payment button:

• Typography: Modify the font style of the text on the button, choosing font family, size, weight, and more for a clean and legible appearance.
• Text Shadow: Assign a shadow to the text to add depth or highlight the call-to-action.
• Text Color: Define the text color for the button for both its Normal state and upon Hover, ensuring it stands out and invites interaction.
• Background Type: Opt for a solid color or a dynamic gradient as the button's backdrop, distinguishing it from the rest of your site's elements.
• Border Type: Frame your button with a custom border by selecting a style like solid or dashed, and specify the color.
• Border Radius: Shape the button's corners to be rounded or square, depending on the look you're going for.
• Box Shadow: Create a shadow effect around the button to draw attention or fit in with your site's depth-oriented design.
• Padding: Determine the space within the button around the text to ensure it doesn’t appear overcrowded or too sparse.

Messages

Ensure associated messages are readable and aesthetically aligned:

• Typography: Adjust the font settings for the messages so they're consistent with your website's typography.
• Error Message Color: Choose a prominent color for error messages to ensure that they catch the user's eye and that troubleshooting steps can be taken immediately.
• Stripe Not Connected Color: If the Stripe integration isn't working correctly, the message color should be distinct enough to alert you or an administrator to resolve the issue.