XP Cloud:Customizing the Payment Form Appearance - Revision history

Dohtur at 11:41, 30 September 2021

2021-09-30T11:41:58Z

Dohtur at 13:10, 2 March 2020

2020-03-02T13:10:19Z

Mouse: Mouse moved page X-Payments Cloud:Customizing the Payment Form Appearance to XP Cloud:Customizing the Payment Form Appearance: Test page move from API

2020-03-02T09:17:23Z

Mouse moved page X-Payments Cloud:Customizing the Payment Form Appearance to XP Cloud:Customizing the Payment Form Appearance: Test page move from API

Dohtur at 14:49, 17 January 2020

2020-01-17T14:49:29Z

Dohtur at 13:31, 17 January 2020

2020-01-17T13:31:46Z

Dohtur at 13:35, 16 January 2020

2020-01-16T13:35:34Z

Dohtur: Created page with "{{XPC_manual_TOC}} X-Payments Cloud provides an interface for the customization of its payment form. The appearance of the payment form can be changed v..."

2020-01-16T12:11:26Z

Created page with "<noinclude>{{XPC_manual_TOC}}</noinclude> X-Payments Cloud provides an interface for the customization of its payment form. The appearance of the payment form can be changed v..."

New page

<noinclude>{{XPC_manual_TOC}}</noinclude>
X-Payments Cloud provides an interface for the customization of its payment form. The appearance of the payment form can be changed via the Appearance page of your X-Payments Cloud admin panel ('''Settings''' -> '''Appearance''').
:[[File:xpc_appearance_page_link.png|740px|border]] 
Note that this page is available only from the X-Payments Cloud standalone admin panel (not if accessed from within the admin panel of your online store.

Here is what the Appearance page looks like:
:[[File:xpc_appearance.png|740px|border]] 

First, you need to select the template that will determine the appearance of your payment form.
At the top of the page, there is a template selector. The selector provides access to a few pre-configured templates based on different color schemes.
:[[File:xpc_appearance_select_tpl.png|740px|border]] 
After selecting the template you require from the drop-down list, below the template selector, you will be able to preview the way your payment form will look based on this template.
Simply choose the template that best suits your preference, but do not worry if the fonts or the color combination used by the template are not ideal - you will be able to tweak the template at a later time.

For the sake of example, let us create a custom template based on the template "Orange":
# In the '''Payment templates''' section of your X-Payments back end ('''Settings''' -> '''Templates'''), select the template on which you would like to base your work (in our case - "Orange"): [[File:xp3_templates_orange.png|700px|border]] (Note how the payment form preview on the left-hand side of the page changes after a new template has been selected).
# Create a copy of the template "Orange". To do so, click the button '''Save copy as...''' below the payment form preview area: [[File:xp3_templates_save_copy.png|700px|border]] A popup form appears on the screen allowing you to enter a name for your template copy: [[File:xp3_templates_save_copy1.png|700px|border]] Simply replace the name of the original template with a new one (Below you can see how we changed the name "Orange" to "test") and click '''Save''': [[File:xp3_templates_save_copy2.png|700px|border]] The template copy will be created: [[File:xp3_templates_save_copy3.png|700px|border]] Now you can safely play with the settings on the template copy without running the risk of spoiling the original template (in our case, "Orange"). If you do not like the result, you will be able to discard the template copy and start anew at any time.
# The settings below the template selector allow you to adjust the various aspects of the payment form appearance. Click the tabs ('''General styles''', '''Logo and header''', '''Payment info''', '''Card details''' and '''Buttons''') to access the settings you require. [[File:xp3_templates_edit_tabs.png|700px|border]] To change the template, try changing the original styles to the ones you require. Your changes will be shown on the preview in real time: [[File:xp3_templates_test_edited.png|700px|border]] 
# Click '''Save''' to save the changes: [[File:xp3_templates_test_save.png|700px|border]] Now you have a new template which you can select when configuring your [[X-Payments:Managing_store_connections | online stores]].
# If necessary, you can delete the template or save its copy under a new name: [[File:xp3_templates_delete_saveas.png|700px|border]] 

See also:

* [[X-Payments_Cloud:Translating or Editing the User Interface Text |Translating or Editing the User Interface Text ]]

[[Category:X-Payments Cloud User Manual]]

@@ Line 1: / Line 1: @@
 <noinclude>{{XPC_manual_TOC}}</noinclude>
 X-Payments Cloud provides an interface for the customization of its payment form. The appearance of the payment form can be changed via the Appearance page of your X-Payments Cloud admin panel ('''Settings''' -> '''Appearance''').
-:[[File:xpc_appearance_page_link.png|740px|border]]<br /><br />
+:[[File:xpc_appearance_page_link.png|670px|border]]<br /><br />
 Note that this page is available only from the X-Payments Cloud standalone admin panel (not if accessed from within the admin panel of your online store.
 Here is what the Appearance page looks like:
-:[[File:xpc_appearance.png|740px|border]]<br /><br />
+:[[File:xpc_appearance.png|670px|border]]<br /><br />
 First, you need to select the template that will determine the appearance of your payment form.
 At the top of the page, there is a template selector in the '''Select template''' box. The selector provides access to a few pre-configured templates based on different color schemes.
-:[[File:xpc_appearance_select_tpl.png|740px|border]]<br /><br />
+:[[File:xpc_appearance_select_tpl.png|670px|border]]<br /><br />
 After selecting the template you require from the drop-down list, below the template selector, you will be able to preview the way your payment form will look based on this template.
 Simply choose the template that best suits your preference, but do not worry if the fonts or the color combination used by the template are not ideal - you will be able to tweak the template at a later time.
@@ Line 20: / Line 20: @@
 After adjusting the payment form layout settings, be sure to save your changes by clicking '''Save'''.
-:[[File:xpc_appearance_save.png|740px|border]]
+:[[File:xpc_appearance_save.png|670px|border]]
 If, after completing the above steps, you are still not quite happy with the appearance of your payment form, it is possible to tweak the payment form template to further improve the form appearance.
 To work on your template, click on the <u>Edit</u> link next to the name of your chosen payment form template in the '''Select template''' box:
-:[[File:xpc_appearance_edit_default_link.png|740px|border]]
+:[[File:xpc_appearance_edit_default_link.png|670px|border]]
 (Note that the <u>Edit</u> link is provided only for the template that is active currently; after changing the template selection in the '''Select template''' box, you have to save the payment form settings with the '''Save''' button for the <u>Edit</u> link to appear for the newly selected template. For example, before you make any changes to your payment form settings, the form uses settings by default, and its appearance is determined by the template named "Default". This "Default" template has the <u>Edit</u> link from the very start, and you can see it as soon as you enter the Appearance page ('''Settings'''>'''Appearance''') for the first time. If you then switch the template selector to a different template - for instance, "Orange" - the <u>Edit</u> link that used to be displayed next to the template selector disappears. Not to worry, this state is temporary: after you save the payment form layout settings with the '''Save''' button at the bottom of the page, the new teplate - "Orange" - will be activated for your payment form, and the <u>Edit</u> link will reappear.)
 After you click on the <u>Edit</u> link, the selected template settings are opened for editing:
-:[[File:xpc_appearance_edit_default.png|740px|border]]
+:[[File:xpc_appearance_edit_default.png|670px|border]]
 As you can see from the screenshot above, we have chosen to work on the template "Default". On this page, we can view and adjust all the aspects of the payment form appearance that are controlled by this template. On the left-hand side of the page, there is a preview of the payment form that allows us to preview the changes we make.
-# Create a copy of the template "Orange". To do so, click the button '''Save copy as...''' below the payment form preview area:<br />[[File:xp3_templates_save_copy.png|700px|border]]<br /><br />A popup form appears on the screen allowing you to enter a name for your template copy:<br />[[File:xp3_templates_save_copy1.png|700px|border]]<br /><br />Simply replace the name of the original template with a new one (Below you can see how we changed the name "Orange" to "test") and click '''Save''':<br />[[File:xp3_templates_save_copy2.png|700px|border]]<br /><br />The template copy will be created:<br />[[File:xp3_templates_save_copy3.png|700px|border]]<br /><br />Now you can safely play with the settings on the template copy without running the risk of spoiling the original template (in our case, "Orange"). If you do not like the result, you will be able to discard the template copy and start anew at any time.
+# Create a copy of the template "Orange". To do so, click the button '''Save copy as...''' below the payment form preview area:<br />[[File:xp3_templates_save_copy.png|670px|border]]<br /><br />A popup form appears on the screen allowing you to enter a name for your template copy:<br />[[File:xp3_templates_save_copy1.png|670px|border]]<br /><br />Simply replace the name of the original template with a new one (Below you can see how we changed the name "Orange" to "test") and click '''Save''':<br />[[File:xp3_templates_save_copy2.png|700px|border]]<br /><br />The template copy will be created:<br />[[File:xp3_templates_save_copy3.png|670px|border]]<br /><br />Now you can safely play with the settings on the template copy without running the risk of spoiling the original template (in our case, "Orange"). If you do not like the result, you will be able to discard the template copy and start anew at any time.
-#  The settings below the template selector allow you to adjust the various aspects of the payment form appearance. Click the tabs ('''General styles''', '''Logo and header''', '''Payment info''', '''Card details''' and '''Buttons''') to access the settings you require.<br />[[File:xp3_templates_edit_tabs.png|700px|border]]<br /><br />To change the template, try changing the original styles to the ones you require. Your changes will be shown on the preview in real time:<br />[[File:xp3_templates_test_edited.png|700px|border]]<br /><br />
+#  The settings below the template selector allow you to adjust the various aspects of the payment form appearance. Click the tabs ('''General styles''', '''Logo and header''', '''Payment info''', '''Card details''' and '''Buttons''') to access the settings you require.<br />[[File:xp3_templates_edit_tabs.png|700px|border]]<br /><br />To change the template, try changing the original styles to the ones you require. Your changes will be shown on the preview in real time:<br />[[File:xp3_templates_test_edited.png|670px|border]]<br /><br />
-# Click '''Save''' to save the changes:<br />[[File:xp3_templates_test_save.png|700px|border]]<br /><br />Now you have a new template which you can select when configuring your [[X-Payments:Managing_store_connections | online stores]].
+# Click '''Save''' to save the changes:<br />[[File:xp3_templates_test_save.png|670px|border]]<br /><br />Now you have a new template which you can select when configuring your [[X-Payments:Managing_store_connections | online stores]].
-# If necessary, you can delete the template or save its copy under a new name:<br />[[File:xp3_templates_delete_saveas.png|700px|border]]<br /><br />
+# If necessary, you can delete the template or save its copy under a new name:<br />[[File:xp3_templates_delete_saveas.png|670px|border]]<br /><br />

@@ Line 31: / Line 31: @@
 :[[File:xpc_appearance_edit_default.png|740px|border]]
-For the sake of example, we took the template "Default":
+As you can see from the screenshot above, we have chosen to work on the template "Default". On this page, we can view and adjust all the aspects of the payment form appearance that are controlled by this template. On the left-hand side of the page, there is a preview of the payment form that allows us to preview the changes we make.
-# In the '''Payment templates''' section of your X-Payments back end ('''Settings''' -> '''Templates'''), select the template on which you would like to base your work (in our case - "Orange"):<br />[[File:xp3_templates_orange.png|700px|border]]<br /><br />(Note how the payment form preview on the left-hand side of the page changes after a new template has been selected).
 # Create a copy of the template "Orange". To do so, click the button '''Save copy as...''' below the payment form preview area:<br />[[File:xp3_templates_save_copy.png|700px|border]]<br /><br />A popup form appears on the screen allowing you to enter a name for your template copy:<br />[[File:xp3_templates_save_copy1.png|700px|border]]<br /><br />Simply replace the name of the original template with a new one (Below you can see how we changed the name "Orange" to "test") and click '''Save''':<br />[[File:xp3_templates_save_copy2.png|700px|border]]<br /><br />The template copy will be created:<br />[[File:xp3_templates_save_copy3.png|700px|border]]<br /><br />Now you can safely play with the settings on the template copy without running the risk of spoiling the original template (in our case, "Orange"). If you do not like the result, you will be able to discard the template copy and start anew at any time.
 #  The settings below the template selector allow you to adjust the various aspects of the payment form appearance. Click the tabs ('''General styles''', '''Logo and header''', '''Payment info''', '''Card details''' and '''Buttons''') to access the settings you require.<br />[[File:xp3_templates_edit_tabs.png|700px|border]]<br /><br />To change the template, try changing the original styles to the ones you require. Your changes will be shown on the preview in real time:<br />[[File:xp3_templates_test_edited.png|700px|border]]<br /><br />

@@ Line 8: / Line 8: @@
 First, you need to select the template that will determine the appearance of your payment form.
-At the top of the page, there is a template selector. The selector provides access to a few pre-configured templates based on different color schemes.
+At the top of the page, there is a template selector in the '''Select template''' box. The selector provides access to a few pre-configured templates based on different color schemes.
 :[[File:xpc_appearance_select_tpl.png|740px|border]]<br /><br />
 After selecting the template you require from the drop-down list, below the template selector, you will be able to preview the way your payment form will look based on this template.
@@ Line 22: / Line 22: @@
 :[[File:xpc_appearance_save.png|740px|border]]
-For the sake of example, let us create a custom template based on the template "Orange":
+If, after completing the above steps, you are still not quite happy with the appearance of your payment form, it is possible to tweak the payment form template to further improve the form appearance.
 # In the '''Payment templates''' section of your X-Payments back end ('''Settings''' -> '''Templates'''), select the template on which you would like to base your work (in our case - "Orange"):<br />[[File:xp3_templates_orange.png|700px|border]]<br /><br />(Note how the payment form preview on the left-hand side of the page changes after a new template has been selected).
 # Create a copy of the template "Orange". To do so, click the button '''Save copy as...''' below the payment form preview area:<br />[[File:xp3_templates_save_copy.png|700px|border]]<br /><br />A popup form appears on the screen allowing you to enter a name for your template copy:<br />[[File:xp3_templates_save_copy1.png|700px|border]]<br /><br />Simply replace the name of the original template with a new one (Below you can see how we changed the name "Orange" to "test") and click '''Save''':<br />[[File:xp3_templates_save_copy2.png|700px|border]]<br /><br />The template copy will be created:<br />[[File:xp3_templates_save_copy3.png|700px|border]]<br /><br />Now you can safely play with the settings on the template copy without running the risk of spoiling the original template (in our case, "Orange"). If you do not like the result, you will be able to discard the template copy and start anew at any time.

← Older revision	Revision as of 09:17, 2 March 2020
(No difference)