Accepting Custom Payment Amounts at Your Store

The Shop App can be customized to allow your customers to submit payments with custom amounts for things like paying an invoice, paying the remaining balance for services, etc.

Once your store is customized to accept customer payments, say good bye to taking card numbers over the phone! Your customers will be able to make a payment from your website 24/7, any time that's convenient. You'll get the added benefit of having your customers' payment history stored in one easy-to-use dashboard.

• Part 1: Set up a custom payment product
• Part 2: Edit your store labels
• Part 3: Edit emails
• Part 4: Edit the design settings
• Part 5: Add a custom payment page on your website

See it in action!

Click here to view a demo on the MADventures demo website where customers can pay for ski and snowboard tuning services using the Shop App.

Please keep in mind that the Shop App can easily be set up as a traditional e-Commerce store to sell products -or- to accept custom payments amount as shown below, but it doesn't do them both at the same time very well. If need a solution to do both, we suggest using the Shop App for e-Commerce and the Marketing 360® Payments app to send your customers invoices for other services.

Part 1: Set up a custom payment product

This customization starts by creating a $1.00 product in your store, then modifying the storefront to display custom options that allow your customers to buy this product in any quantity, giving them the option to essentially pay a custom amount.

1. Select Catalog on the left-hand sidebar, then click the blue + Add New Product button to start adding your product.
2. Enter the following details about your product:

• Product Name: Use something like 'Pay Your Bill' or 'Online Invoice Payment' 
• Add a price of $1.00
• Upload a product image (optional)
• Add a SKU (optional)
  
• Save your product by clicking the blue Save button in the top right corner of the page.

Part 2: Edit your store labels

The next step is to use the Store Label Editor to replace specific text on the site. By default, there is a lot of standard e-Commerce terminology like orders and products in your storefront. Following the steps below will replace 'orders' with 'payments', giving your customers clear, easy options to make their online payment.

To get started, hover over Settings on the left-hand sidebar, then click Edit Store Labels. Then click the + Add Custom Label button to enable the custom label feature.

In the example below, we'll update the 'Add to Bag' button displayed on a product page to read 'Pay Your Bill' instead.

1. Click Add Custom label.
2. Enter the text you'd like to edit.
3. Enter the custom replacement text you'd like to display in its place. (This will auto-save for you)
4. Refresh the site to view your new custom text.
5. Repeat as necessary.

To fully replace 'orders' on your website with 'payments, you can search for all labels in the left column below, then enter the custom label from the right column.

Part 3: Edit emails

Now that the website text has been customized, the next step is to customize the text included in emails that go to customers and store admins after a purchase.

To get started, hover over Settings from the main navigation on the left side of the page, then click Mail. From there, click Edit next to the Order Confirmation email.

1. Download the 'bill-pay-order-confirmation-email-content.txt' attachment from the bottom of this article, then open it with a text editor.Important: Please do not open the file with something like Microsoft Word or Google Docs. They're both great for writing, but not good options for HTML. We recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
2. Select all the content in the document and copy it.
3. Next, head on back to your shop dashboard and highlight the entire contents of the Order Confirmation email and delete it.
4. Paste the contents in its place and save the Order Confirmation.
5. Save the email notification by clicking the blue Save button when you're through, then click Preview Template near the top of the page to make sure everything looks good. Please note: the payment amount is displayed as shown below in place of the item quantity. Don't worry if the products that display in the preview are unrelated to your store. They're just placeholders.
6. Repeat the process above to customize the New Order Placed” email template. The customized content is included in the 'bill-pay-new-order-placed-email-content.txt' file attachment.
7. Disable the email notifications listed below. Since the store will not ship any physical or digital products, they're not needed.

Customer Notifications

• Order Status Changed

• Order Shipped

• Order is Ready for Pickup

• Download E-goods

Admin Notifications

• Low Stock Notification

Customer Marketing Emails

• Favorite Products Reminder
• Loyalty Appreciation
• Inactive Customer Reminder
• Purchase Anniversary

Part 4: Edit the design settings

1. In your Shop dashboard, select Design on the left-hand sidebar.
2. In the Design dashboard, scroll down until you reach the section labeled Product Sidebar. You will see a checklist of items.
3. Make sure that the following items are turned OFF (un-checked): 
   • Price
   • Stock availability labels
   • Number of items in stock
   • Wholesale prices
   • Attributes
   • Weight
4. Scroll further down the page until you reach the section labeled Storefront navigation & colors.
5. There will be a series of dropdown menus. Set the following three options to "Do not show": Footer menu, Breadcrumbs, and "Sort by" Options.

Part 5: Add a custom payment page on your website

Next, you will need to navigate to your Product page. To do so, select Catalog on the left-hand sidebar, and then click on the name of the "product" that you created.

1. On your Product page, select the Options tab, then click Add New Option in the top-left corner.
2. Under Option Name, enter "Invoice Number" and under Input Type, enter "Text Field".
3. Select "Buy Now" Button at the top of the Product's dashboard, then click the Embed Product button that appears.
4. Select Full-size, 2 Columns.
5. Next, under Customize Setup, click on Appearance.
6. A checklist will appear. Leave ONLY the Product Name and Product Quantity options checked.
7. Click the blue Generate Code button at the bottom of the page, then click Copy Code to copy the code to your clipboard.
8. Navigate to your Websites 360® dashboard. In the Pages panel, navigate to the page where you want customers to access Custom Payments. If you have not yet created this page, follow this link to find out how to create a new page on your website.
9. Once on the desired page, click one of the (+) buttons, then select HTML from the menu options.
10. PASTE the code in the text area of the HTML Block, then click Save.
11. Click the green PUBLISH button at the top of your Websites 360® dashboard to publish the page live on your website.

Your Shop App is now fully customized to start accepting payments from your customers!