🚲Price Table Checkout

Advanced Price Table widget with checkout button.

We understand that all price table widgets in Elementor addons are well-designed. However, they only provide a link button and do not consider the checkout links anymore. Therefore, we have developed a widget that not only offers a fully Elementor-style price table but also integrates a checkout process action with our checkout button.

Getting Start

• To get started, create a new page or post, and edit it using Elementor.

• Next, drag and drop the Price Table onto your page (you can search for it using the keyword "checkout" or find it under the "PAY-ADDONS" category)

• Click on the price table and customize the UI with Elementor as you wish.

Style Price Table

The editing price table is no different from other price tables such as Elementor Price Table, we can follow the same guide for the editing & styling. https://elementor.com/help/price-table-pro/

Handle the checkout button click

This is the only difference compared with other Price tables, which only provide the button link address, normally, user can generate a stripe checkout link in stripe dashboard and then paste it, however, it's always not convenient to create or modify the checkout setting like price in stripe dashboard side, so we move these settings from stripe side to here as the additional section Checkout Settings :

The button link value can be # as it is.

Testing

After the configuration, click on the button, and you will be redirected to the stripe-hosting checkout page to finish the transaction.

Success: 4242424242424242 Any 3 digits Any future date

Decline: 4000000000000002 Any 3 digits Any future date

For more testing cards sample, please refer https://stripe.com/docs/testing#use-test-cards