Articles on: Components & Elements

Payment Button

Getting Started


Here you will know the features of the Payment Button element.



Adding a Payment Button


Follow the steps below to add a Payment Button to your site.


  • Click on the + button labeled Add Element or Container within an empty container
  • From the Elements tab, select the Payment Button element


Refer to the GIF below:





Editing and Configuring the Payment Button


Follow the steps and instructions below to add and edit a Payment Button on your site.


The Payment Button element editor has the following options:


  • Payment Button
  • Button Style
  • Background


The Payment Button element editor:




Payment Button


This option lets you make your button functional by connecting to other payment gateway platforms. Below is an example of using this option if you integrate Stripe.


Service Provider: Stripe


Refer to the picture and list below to see the functionality of each option if you integrate Stripe ⬇️




  1. Service Provider: Select the service provider from here. You will be able to choose the following platforms:
    • Stripe
    • Paypal
    • Gumroad
    • Paddle


  1. Button Text: Change the button text.


  1. Payment Type: Choose the payment type; there are mainly two types:
    1. One-time payment
    2. Recurring payment (subscription)


  1. Button Type: Choose the type of button you want; you can choose the following options:
    • Auto
    • Pay
    • Book
    • Donate


  1. Price ID: A unique identifier of the price.


More settings ⬇️




  1. Publishable API Key: Paste the publishable API key from your platform in this input field.
  2. Billing Address Collection: Choose whether the billing address should be mandatory.
  3. Success URL: Add a URL to a page showing that the payment is successful.



Button Style


In this option, you will find the settings to stylize your payment button, with options like adjusting the button text size, adding icons to your button, changing the color, etc.


Refer to the GIF below to see the settings being demonstrated:





Background


You can change the background style of your payment button from here, choosing a plain color or a gradient.




Refer to the GIF below to see the settings being demonstrated:






Related articles


Button


Updated on: 13/05/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!