You can see the Payment Popup when you click the Payment Button on the live website.

payment-popup-improvments.png

Open Payment Popup

After you add the Payment Icon, you get the Payment Popup in the Modal Popups Panel of Quick Access.

payment-popup-quick-access.png

You can also find the Payment Popup in the Page Navigator under the Block Thumbnail.

payment-popup-page-navigoator.png

Payment Popup In Products

You can find the link to the Payment Popup in the Products Panel of the Quick Access Pane.

payment-popup-products.png

Product List Element

The Payment Popup contains the Product List Element, as we plan to support multiple Products in the future. You can see many in one Product Popup. You can stylize the Product Title, Price, and Description.

NOTE: The Popop shows the sample data, and you will see the Product you specified in the Product Tab on the Live website.

payment-popup-product-list.png

Payment Area

Specify the properties of the Payment Area, where you see the actual pay button options of the payment systems added to your E-Commerce website.

payment-popup-pay-area.png

Clicking on the Payment Area lets you modify all Payment Settings supported by Services, which is also more convenient.

all-payment-settings.png

Payment Area Methods

Set the Payment Area Methods, allowing customers to select the preferred payment method on your websites.

payment-area-methods.png

Payment Area PayPal Properties

You can access the PayPal properties in the Property Panel by defining the PayPal button layout on the live site.

payment-area-paypal.png

Payment Area Stripe Properties

We have added the Stripe Panel, allowing you to stylize the Stripe Button on the Payment Popup on a live website.

payment-area-stripe.png

Payment Area Messages

You can edit and stylize the messages shown to your customers while they purchase on your website on the Messages Panel of the Payment Area.

payment-area-messages.png

Payment Area Colors

Finally, you can stylize the Method selector in the Payment Popup on the Colors Panel.

payment-area-colors.png

Payment Popup Tips

You can see the Titles and Tips to the Payment Area options of the Payment Popup, which explain the purpose of this area and the fact that the actual payment buttons will be displayed and work only on the live website.

paypal-pw-tip.png

Publish Payment

Publish or export the site, and click the Payment Button live. If you correctly set the PayPal Client ID, you will see the PayPal payment buttons.

payment-live-site.png

Payment Success

If your payment is successful, you will get the Success Message.

payment-product-success.png

Payment Errors

You can also get the Error Message about the Payment failure or other errors. For example, the following message explains that you set the Prodict incorrectly.

payment-product-error.png

Read Also

You can see the Payment Popup when you click the Payment Button on the live website. !payment-popup-improvments.png! ## Open Payment Popup After you add the Payment Icon, you get the Payment Popup in the Modal Popups Panel of Quick Access. !payment-popup-quick-access.png! You can also find the Payment Popup in the Page Navigator under the Block Thumbnail. !payment-popup-page-navigoator.png! ## Payment Popup In Products You can find the link to the Payment Popup in the Products Panel of the Quick Access Pane. !payment-popup-products.png! ## Product List Element The Payment Popup contains the Product List Element, as we plan to support multiple Products in the future. You can see many in one Product Popup. You can stylize the Product Title, Price, and Description. **NOTE:** The Popop shows the sample data, and you will see the Product you specified in the Product Tab on the Live website. !payment-popup-product-list.png! ## Payment Area Specify the properties of the Payment Area, where you see the actual pay button options of the payment systems added to your E-Commerce website. !payment-popup-pay-area.png! Clicking on the Payment Area lets you modify all Payment Settings supported by Services, which is also more convenient. !all-payment-settings.png! ### Payment Area Methods Set the Payment Area Methods, allowing customers to select the preferred payment method on your websites. !payment-area-methods.png! ### Payment Area PayPal Properties You can access the PayPal properties in the Property Panel by defining the PayPal button layout on the live site. !payment-area-paypal.png! ### Payment Area Stripe Properties We have added the Stripe Panel, allowing you to stylize the Stripe Button on the Payment Popup on a live website. !payment-area-stripe.png! ### Payment Area Messages You can edit and stylize the messages shown to your customers while they purchase on your website on the Messages Panel of the Payment Area. !payment-area-messages.png! ### Payment Area Colors Finally, you can stylize the Method selector in the Payment Popup on the Colors Panel. !payment-area-colors.png! ## Payment Popup Tips You can see the Titles and Tips to the Payment Area options of the Payment Popup, which explain the purpose of this area and the fact that the actual payment buttons will be displayed and work only on the live website. !paypal-pw-tip.png! ## Publish Payment Publish or export the site, and click the Payment Button live. If you correctly set the PayPal Client ID, you will see the PayPal payment buttons. !payment-live-site.png! ## Payment Success If your payment is successful, you will get the Success Message. !payment-product-success.png! ## Payment Errors You can also get the Error Message about the Payment failure or other errors. For example, the following message explains that you set the Prodict incorrectly. !payment-product-error.png! ## Read Also - [PayPal Client ID](page:424214) - [Payment Button Element](page:425789) ##