Adding and Setting Up a Pay Button

Important:

To accept online payments using a Pay button, you must purchase a site plan that allows you to accept payments.

Add a Pay button to your site for a quick and easy checkout for payments. When clicked, it takes visitors directly to the checkout page, streamlining the purchase process. After adding the button, you can link a payment provider, choose its layout, and customize the design to fit your site.

Step 1 | Add a Pay button

No matter which editor you're using, you can get started by adding a Pay button to your site from the Add panel / Add Elements panel. This automatically installs the Pay Button app to your site.

Wix Editor

1. Go to your editor.

2. Click Add Elements

   

   on the left side of the editor.

3. Click Button.

4. Select the Pay Buttons tab.

5. Click the button you want to add it to your site.

Studio Editor

1. Go to your editor.

2. Click Add Elements

   

   on the left side of the editor.

3. Click Buttons.

4. Select Pay Buttons.

5. Click the button you want to add it to your site.

Harmony Editor

1. Go to your editor.

2. Click + Add at the top left of the editor.

3. Select the Button category.

4. Select the Pay buttons tab.

5. Click the button you want to add it to your site.

Step 2 | Connect a payment provider

Before you begin:

If you already have a payment provider connected, you can skip this step and move on to step 3.

Connect a payment provider to process payments from visitors through your Pay button. Wix Payments is our native payment solution. We also offer a number of additional payment provider options that vary by location.

To connect a payment provider:

1. Go to Accept Payments in your site's dashboard.

   Tip: Check your business location at the top right. If incorrect, click the drop-down menu to change it.

2. See more options, or connect an option:

   • See more options:

     1. Click See More Payment Options at the bottom to view more available providers in your location.

     2. If available, click See Options next to Third-Party Credit/Debit Card Providers to view additional providers.

   • Connect: Click Connect next to the payment provider you want to use.

1. Follow the steps to complete your account setup, or connect an existing 3rd party account.

Step 3 | Customize the settings of your button

Use the options in the Settings panel to finish setting up your Pay button. From here, you can enter the item's name and price, change the currency, and set up terms and conditions.

Note:

Only site owners can edit the following settings. Collaborators with other roles don't have access to this section.

Wix Editor

1. Click the Pay button in your editor.

2. Click Settings.

3. Use the options to set up the button:

   • Item name: Enter the name of the product in the field.

   • Item price: Enter the price of the item in the field. We recommend including any extra charges (e.g. tax, shipping).

     Note: The item's price is automatically listed in the site's default currency. However, you can always click Change Currency to choose a different one.

   • Button text: Enter the text you want in the field.

   • Terms & Conditions: Click the Show Terms & Conditions Checkbox toggle to enable or disable this option:

     • Enabled: A terms and conditions checkbox is displayed. You can then add a link to the relevant terms and conditions in the field.

     • Disabled: No terms and conditions checkbox is displayed.

   • Email notifications: Check that the correct email address is listed for email notifications. If needed, you can change it by clicking General Info.

Studio Editor

1. Click the Pay button in your editor.

2. Click Settings.

3. Use the options to set up the button:

   • Item name: Enter the name of the product in the field.

   • Item price: Enter the price of the item in the field. We recommend including any extra charges (e.g. tax, shipping).

     Note: The item's price is automatically listed in the site's default currency. However, you can always click Change Currency to choose a different one.

   • Button text: Enter the text you want in the field.

   • Terms & Conditions: Click the Show Terms & Conditions Checkbox toggle to enable or disable this option:

     • Enabled: A terms and conditions checkbox is displayed. You can then add a link to the relevant terms and conditions in the field.

     • Disabled: No terms and conditions checkbox is displayed.

   • Email notifications: Check that the correct email address is listed for email notifications. If needed, you can change it by clicking General Info.

Harmony Editor

1. Click the Pay button in your editor.

2. Click the Settings icon

   

   on the action bar.

3. Use the options to set up the button:

   • Item name: Enter the name of the product in the field.

   • Item price: Enter the price of the item in the field. We recommend including any extra charges (e.g. tax, shipping).

     Note: The item's price is automatically listed in the site's default currency. However, you can always click Change currency to choose a different one.

   • Terms & Conditions: Click the toggle to enable or disable this option:

     • Enabled: A terms and conditions checkbox is displayed. You can then add a link to the relevant terms and conditions in the field.

     • Disabled: No terms and conditions checkbox is displayed.

   • Email notifications: Check that the correct email address is listed for email notifications. If needed, you can change it by clicking General Info.

(Optional) Step 4 | Adjust the button's layout

Use the layout options to set the button's direction and alignment.

Wix Editor

1. Click the Pay button in your editor.

2. Click the Layout icon

   

   .

3. Adjust the layout with the options:

   • Direction: Choose whether the buttons reads left-to-right, or right-to-left.

   • Alignment: Select whether the text is aligned to left, right, or center of the button. If you choose the left or right alignment, you can then use the slider to adjust the indent.

Studio Editor

1. Click the Pay button in your editor.

2. Click the Layout icon

   

   .

3. Adjust the layout with the options:

   • Direction: Choose whether the buttons reads left-to-right, or right-to-left.

   • Alignment: Select whether the text is aligned to left, right, or center of the button. If you choose the left or right alignment, you can then use the slider to adjust the indent.

Harmony Editor

1. Click the Pay button in your editor.

2. Click the All design options icon

   

   on the action bar.

3. Click the Button tab.

4. Click Layout in the panel and adjust the button using the options:

   • Icon position: Choose whether the icon is displayed before, after, above, or below the button's text.

     Note: This option is only available if you have enabled an icon on the button.

   • Alignment: Select whether to justify the text, or align it to the left, right, or center of the button.

   • Apply site direction: Click the toggle to enable or disable this option:

     • Enabled: The button automatically has the same reading direction as the rest of the site (left-to-right or right-to-left).

     • Disabled: You can manually set whether the button reads left-to-right, or right-to-left.

(Optional) Step 5 | Customize the design of your button

Design your Pay button to create an eye-catching call-to-action for visitors. No matter which editor you're using, you have full creative control over the button's look.

Wix Editor

1. Click the Pay button in your editor.

2. Click the Design icon

   

   .

3. Choose one of the preset designs for your button.

4. Click Customize Design for advanced options for the Regular and Hover view:

   • Fill Color & Opacity: Select the button's color and opacity.

   • Border: Design your button's borders.

   • Corners: Round your button's corners.

   • Shadow: Add and design a shadow for your button.

   • Text: Design your button's text.

Studio Editor

1. Click the Pay button in your editor.

2. Click the Open Inspector icon

   

   at the top right of the editor.

1. Choose the button state you want to design (Regular or Hover).

2. Use the options to customize the button:

   • Fill color & opacity: Choose the button's fill color and set its opacity.

   • Border: Choose a color for the border and set its width in px.

   • Corners: Make the corners more round or square by changing the radius in px. You can set the same radius for all corners or click the Unlock icon

     to customize them separately.

   • Shadow: Enable a shadow on the button and customize it to look the way you want. You can set the color, angle, distance, size, etc.

   • Text: Choose the font of the button's text, and set the color, formatting, and spacing.

   • Spacing: Use the sliders to make the horizontal and vertical spacing of the button bigger or smaller.

Harmony Editor

1. Click the Pay button in your editor.

2. Choose how you want to customize the button:

   • Change the button text: Click Edit Text on the action bar, and enter the text you want into the field.

   • Customize the button's icon: Click Customize Icon on the action bar and use the options to edit it:

• Change the icon: Click the Replace icon

  

  and choose a new icon for your button.

• Add animation to the button icon: Click Animated under Icon type and set up your icon's animation. Learn more about customizing your button's icon.

• Customize the design of the button: Click the All design options icon

  

  on the action bar to customize options such as the color, font, and spacing on your button. Learn more about designing elements in the Harmony editor.

FAQs

Click a question below to learn more about setting up a Pay button.