Installation

The installation process for PeachPay runs merchants through a few steps to get everything setup and ready for use. A Stripe account must be created, server files need to be inserted, scripts need to be installed, and theme files need to be modified.

Stripe

PeachPay’s installation starts by linking merchants to Stripe’s account creation and connection process.

At the moment only card payments are supported.

Server files

The next step is using WebDAV to insert PeachPay’s files onto the server. WebDAV must be enabled and merchants can follow a link to BigCommerce’s article on setting up WebDav.

https://support.bigcommerce.com/s/article/File-Access-WebDAV

With WebDAV setup a merchant can download a zip file containing the necessary PeachPay files. That zip file needs to be extracted into the content folder on the store’s server which is outlined on the setup page.

Scripts

On the same page as the previous section merchants need to press the “add scripts” button. This uses the Scripts API to install PeachPay’s scripts onto the site which is displayed in the script manager admin page.

If any of the script files are deleted PeachPay’s settings page will display a notification on launch with a button to fix any missing scripts.

Edit theme files

Adding the PeachPay button to the theme files is documented on the settings page after finishing the new merchant flow. The main idea is calling one of two button insertion functions with a css selector of a container for the button html.

While developing the app two locations were commonly used for placing large and small buttons:

Main button

  • templates > pages > cart.html

  • Selector: ‘.cart-actions’

Mini button:

  • template > components > common > cart-preview.html

  • Commented out the checkout now button

  • Selector: ‘.previewCartAction-checkout’

Settings page

PeachPay starts out in test mode so any buttons inserted will be hidden unless ‘peachpay.reveal()’ is executed in the dev console.

Make sure the general section has the correct data autofilled.

Editing any settings and saving will display an alert indicating a successful update. Those changes will take place shortly on the storefront.

Checkout modal

New customer view

Make sure changing quantities, removing items, and adjusting billing fields works

Make sure shipping data is displayed correctly and press edit to test changing shipping fields.

Make sure card entry works with the test card: (4242 4242 4242 4242, 04/24, 242), and press pay to get redirected to the order confirmation page.

Returning customer view

Once a payment is successful with the new customer flow the returning customer view will be displayed instead. Make sure each subsection’s inputs work correctly (cart, review your information, shipping, and payment method).

Peachpay does not handle the card info, it is all handled and saved by stripe in an iframe.

Order Placement

On order placement you should get redirected to PeachPay’s order confirmation page with some cart data displayed.

An email will also be sent (default BigCommerce behavior) about the order being updated to awaiting fulfillment.

BigCommerce order

In the admin orders page:

The order is marked as awaiting fulfillment, order source is the orders API, the payment method is ‘peachpay_stripe card’, and the transaction id is the stripe payment id. If differing billing and shipping fields are input they should be represented correctly. Everything else should be as expected. Staff notes should also indicate status of stripe payment intent.

If the payment fails / is canceled then the status will be canceled with staff notes indicating more detailed information.

Ensure that Stripe’s dashboard test mode has the payment listed.

Once everything is working and the inserted buttons are styled switch off test mode to open up peachpay to all customers.

Did this answer your question?