| Sellerdeck Payments by Opayo and Sellerdeck Payments by NMI will be sunsetting on 31st May 2023. On the 1st of June, these payment gateways will no longer be available to process new transactions. We will maintain the service for an additional month to allow for refunds and downloading of reports. Sellerdeck Payments by Opayo and Sellerdeck Payments by NMI are being replaced by SellerdeckPay powered by ClearAccept: https://www.sellerdeck.co.uk/sellerdeckpay |
Introduction
The design of a SellerDeck Payments page is controlled by two things:
- A set of images
- A style sheet file called 'ekashu.css'
For security reasons, the page itself is not editable. However you can customise each element of the page by changing either the images or the style sheet, or both. The screen image illustrates the different elements of the page that can be customised:
Unless you are very skilled with CSS, we strongly recommend that you use these as a basis to start from. This Basic Changes section outlines the basic things you can do to customise the look and feel of your SellerDeck Payments pages by changing the style sheet and image files. Customising the Sellerdeck Payments page v5.zip
Once you have prepared your customised images and your style sheet, you must follow the instructions under Uploading Your Changes to upload them to the web.
Basic Changes
- Supply a new background (or remove it altogether); by producing your own image called 'sellerdeck-body-bg.gif', or by editing the 'body' class in ekashu.css
- Replace the page header image (sellerdeck-payments-header.gif) Change the height and style of the page header and footer by changing the relevant class in the ekashu.css style sheet file (class .ekashu_header)
- Change the content background by supplying a new background image (mainbackground.gif) and editing the relevant css class (.ekashu_content). You can also change the width of this area to something other than 800px if required
- Change the style of the boxes by changing the class (.ekashu_section) and the box title background image (sellerdeck-box-heading.jpg) and class (.ekashu_section_title)
- If you are using any of SellerDeck’s software products, you will also need to replace the heading images for the payment confirmation (payment-successful.jpg) and payment failure page (payment-failed.jpg), and edit their styles (.ekashu_header_success and .ekashu_header_failed) to match any changes you make to .ekashu_header
Uploading Your Changes
- When you have all your new images, and your copy of ekashu.css if you changed it, go to https://forms.sellerdeck.com, log in and click 'My Applications'
- Click the ‘Payments Customisation’ icon for your SellerDeck Payments account
- Upload each file in turn by clicking ‘Choose File’, finding and selecting it, and clicking the ‘Upload’ button
- When you have uploaded all the files you want to change, click the ‘Publish Design’ button at the foot of the page. If you are not happy with the result, you can change back to the default SellerDeck Payments design at any time by clicking ‘Restore Defaults’. NB: even if you have only changed the images, you must still upload the version of ekashu.css supplied with this document
- Copy the ‘URL to access your customised files’ from the top of the page
- Log out of SellerDeck Payments
If you are using Actinic v10.0.2 or later, do the following to enable your customised styles:
- Open the SellerDeck software and select ‘Business Settings from the ‘Settings’ menu
- Go the ‘Payment and Security’ tab
- iSelect ‘SellerDeck Payments Ecommerce’ and click the ‘Configure Method’ button
- Paste the ‘URL to access your customised files’ into the ‘Stylesheet URL’ field
- If you wish, change the ‘Page Title’ field to customise the title of the payment page
- Click ‘OK’, then ‘OK’ again and ‘Publish to Web’
If you have a SSL enabled server hosting and you are skilled at CSS. You can upload all the background images and the style sheet to your secured server. Then simply add the style sheet URL in the ‘Step 7 | iv’ and repeat ‘v’ and ‘vi’.
Warning! You should only apply this method if you have a SSL enabled server; otherwise it will compromise your SSL certificate in Actinic payment checkout pages
If you are using Actinic v10.0.1 or earlier, you will need to do the following instead:
- (You can omit this step if you are using Actinic v9.0.4 or later). Save the following two templates from the customisation pack into the CommonOCC subfolder of your Actinic site folder, replacing the copies that are already there:
Act_ActPayOK.html
Act_ActPayError.html - You now need to make one small change in each of two templates in the CommonOCC subfolder subfolder of your Actinic site folder. You can make this change using Notepad or any other text or HTML editor
- The templates to change are the two shown above
- Act_ActPayOK.html and Act_ActPayError.html
- Open each one in turn and find the line
- <link rel="stylesheet" href="https://online.sellerdeckpayments.com/hosted/live/sellerdeck/ekashu.css" />
- Replace the URL 'https://online.sellerdeckpayments.com/hosted/live/sellerdeck/ekashu.css’ with your customised files URL, and then save the file.
- You now need to make one change to the Act_OCCActPayTemplate.html template, which is in the CommonOCC subfolder of your Actinic site folder. You can make this change using Notepad or any other text or HTML editor
- Find the line
- <!-- <input type="hidden" name="ekashu_style_sheet" value="https://your.URL/ekashu.css" /> -->
- Remove the comment tags <!-- and --> from the beginning and end of the line
- Then replace ‘https://your.URL/ekashu.css’ with the customised files URL you copied from the SellerDeck Payments page, making sure you leave the surrounding double quotes in place, and save the file
- Open SellerDeck and Update / Publish to Web Your customisations should now be reflected in the payment page of your site for customers using SellerDeck Payments.
Your customisations should now be reflected in the final payment page of your site for customers using SellerDeck Payments.