Using Amazon Pay with Sellerdeck 2016

[G.W.Green]

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:

<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:

<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: -

#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: -