Announcement

Collapse
No announcement yet.

Using Amazon Pay with Sellerdeck 2016

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Using Amazon Pay with Sellerdeck 2016

    If you want to use Amazon Pay with Sellerdeck 2016 (v16) then you will need to upgrade to v16.0.6 (or higher).

    If you are creating a fresh new v16 site, no further changes are necessary beyond those described in the main article, Using Amazon Pay with Sellerdeck Desktop.

    Additional changes for Sellerdeck 2016

    If you have upgraded to v16.0.6 from an earlier v16 release, or an earlier major version, then your upgraded site will require changes to the following layouts:

    Administrator HTML Email Inner Layout
    Administrator Text Only Email
    Buyer HTML Email Inner Layout
    Buyer Text Only Email
    Core Styles
    Customer HTML Email Inner Layout
    Customer Text Only Email
    Order 00 Bulk Area RWD
    Paypal Pro Order Confirmation Page Area RWD
    Receipt Payment Method Used
    Smart Checkout Progress Indicator
    Standard Javascript Header Functions
    View Cart Bulk Area RWD

    There are two way to implement these changes.
    1. You can download and import the following partial design snapshot. It contains only those layouts, with the Amazon Pay changes already applied. https://downloads.sellerdeck.com/v16-AmazonPayLayoutChanges.acd
    2. If you do this, you will lose any customisations that you or your web designer have made to any of those layouts. You will be free to re-apply them afterwards, provided you retain the new elements added for Amazon Pay (as described below).
    You can apply the changes to your layouts manually, as described below.

    1.1 Email changes

    The ‘PaymentMethodOnlineXML’ and ‘PaymentPendingNoticeOnlineXML’ variables are to be added to the following 6 email layouts (3 HTML and 3 Plain Text).

    Administrator HTML Email Inner Layout
    Buyer HTML Email Inner Layout
    Customer HTML Email Inner Layout
    Administrator Text Only Email
    Buyer Text Only Email
    Customer Text Only Email

    In each case the variables are added together and with a preceding <p> tag on a new line after the Order Number line:

    HTML Code:
    <p>Payment Method: <actinic:variable name="PaymentMethodOnlineXML"/>&nbsp;<actinic:variable name="PaymentPendingNoticeOnlineXML"/>
    1.2 Amazon Pay Button

    Add the ‘AmazonPaybuttons’ variable to the ‘View Cart Bulk Area RWD’ and ‘Order 00 Bulk Area RWD’ layouts. The button is conditionally included before the ‘PayPal’ button:

    HTML Code:
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsAmazonPayEnabled%22%20%2f%3e%20AND%20%3cactinic%3avariable%20name%3d%22IsSSLUsedForWholeSite%22%20%2f%3e" ><p>- or -</p><actinic:variable name="AmazonPayButtons" /></actinic:block>
    1.3 Receipt

    The ‘PspPendingNotice’ variable is to be added to the ‘Receipt Payment Method Used’ layout. The variable should appear alongside the ‘PaymentMethodName’ variable.

    1.4 Javascript Headers

    In layout ‘Standard Javascript Header Functions‘, change the condition around HideCartDetailsOnCheckoutPages to include the page type 'Amazon Pay Checkout Page'

    1.5 Checkout Progress

    The layout ‘Smart Checkout Progress Indicator’ only reflected the standard checkout process. Replace the standard layout with the new standard layout code which will provide a different progress bar for Amazon Pay and PayPal Checkout.

    Add the CheckoutProgressLayout selector to the top of the ‘PayPal Pro Order Confirmation Page Area RWD’ layout.

    1.6 CSS changes

    CSS changes are required for Amazon Pay. The changes will depend on the merchant’s current style. The CSS changes applied for the default style sheet.

    The new CSS affects the formatting of the checkout button on the first Checkout page which may not be required for a customer site however it also has CSS for the Amazon Pay address and wallet widgets on the page ‘Amazon Pay Checkout Page’. Without this CSS the address and Wallet will not appear.

    The following css code is required to be added to the end of the Core Styles stylesheet: -

    HTML Code:
    #paypal-express-chk .payPalExLeftCol, #paypal-express-chk .payPalExRightCol{
        margin-bottom: 10px;
    }
    #paypal-express-chk .payPalExLeftCol>*, #paypal-express-chk .payPalExRightCol>* {
        padding: 0 10px;
        text-align: center;
        box-sizing: border-box;
    }
    #paypal-express-chk img{
        max-width: 100%;
    }
    #addressBookWidgetDiv{
        clear: both;
        min-width: 300px;
        max-width: 100%;
        min-height: 228px;
        height: 300px;
    }
    #walletWidgetDiv{
        margin-top: 5px;
        min-width: 300px;
        max-width: 100%;
        min-height: 228px;
        height: 240px;
    }
    
    @media screen and (min-width: 991px){
        #paypal-express-chk .payPalExLeftCol>div, #paypal-express-chk .payPalExLeftCol>a {
             width: 80%;
        }
        #paypal-express-chk .payPalExLeftCol>p {
             width: 20%;
        }
    }
    @media screen and (min-width: 768px){
        #paypal-express-chk {
             display: flex;
             flex-wrap: wrap;
             align-items: flex-start;
             margin: 0.5em 0 0 0;
        }
        #paypal-express-chk .payPalExLeftCol {
             display: flex;
             align-items: flex-start;
             flex-wrap: wrap;
        }
        #paypal-express-chk .payPalExLeftCol>p {
             padding: 0 5px;
        }
    }
    @media screen and (max-width: 767px){
        #paypal-express-chk{
            width: 22em !important;
        }
    }
    1.7 APPENDIX: New layouts, selectors and variables

    The Sellerdeck Desktop upgrade will add the following new layouts, selectors and variables automatically. No action is required on your part. The information is included here for reference.
    The new variables, to be added to the group ‘Amazon Pay’ are: -
    • AmazonPayButtonColour: Gold, LightGray, DarkGray
    • AmazonPayButtonLanguage: de-DE, en-GB, es-ES, fr-FR, it-IT
    • AmazonPayButtonSize: small, medium, large, x-large
    The following 3 layouts and selectors define the Amazon Pay Button and the page that allows the buyer to select the shipping address and payment option from their wallet.

    In Design Library, create a group ‘Amazon Pay’ and add the layouts ‘Amazon Address Widget JS and ‘Amazon Pay Button’. These may be copied as-is from a default site. In the same group add the selectors ‘AmazonAddressWidgetJS and ‘AmazonPayButton’ (same names as the layouts but without spaces).

    Add the layout ‘Amazon Pay Checkout Inner Layout’ and selector ‘AmazonPayCheckoutInnerLayout’ to the group Web Page Inner Layout.

    The layouts offered by the 3 selectors are just the layouts of the same name as the selector i.e. there will be just one option per selector.

    Each of the selectors should have the following settings differing only in Name, Description, Prompt and Top Level Value: -


    Click image for larger version

Name:	APv16PayButton.png
Views:	603
Size:	68.0 KB
ID:	551718
Working...
X