You can view the Payment Popup by clicking 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 displayed to your customers while they are purchasing on your website in 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 for the Payment Area options in 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 then click the live Payment Button. 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 receive a success message.

payment-product-success.png

Payment Errors

You can also receive an error message about payment failure or other errors. For example, the following message explains that you set the Product incorrectly.

payment-product-error.png