You are here:
SiteGenesis Page Samples for Salesforce Payments
When you add Salesforce Payments to your SiteGenesis instance, you modify the page layouts for the Checkout, Cart, Mini-Cart, and Product Details pages. Here we describe an approach to these layout modifications.
SiteGenesis Checkout with Salesforce Payments
The standard Site Genesis payments for multi-step checkout are a three-step shopper process that extends over three payment pages.
- Capture shipping information
- Capture payment information
- Place the order
Configure the shipping information on a page, and combine the billing address and multi-step checkout payment steps on a second page. You can also combine all three into a single page.
Layout Changes
Use CSS to match the border colors to Site Genesis colors, and to highlight errors. The Salesforce Payments layout differs from SiteGenesis.
- SiteGenesis
- Billing information includes an element (gray card) for the billing address.
- The layout includes an Edit button to go back in the process.
- Salesforce Payments
- The billing address isn’t shown because the billing data is not known until payment is confirmed on the final page.
- The layout doesn't have an Edit button. To go back in the process isn't supported.
- The confirmation page with the payment summary uses the Stripe brand constant for the credit card type. Localize the credit card type.
Checkout Page PayPal Considerations
When a shopper selects PayPal as a payment method the Place Order button is disabled, and the PayPal payment window appears. The typical PayPal payment methods and the pay in 4 method are offered as PayPal payment options.
When the shopper completes the PayPal payment entries, the Site Genesis Checkout confirmation page displays and shows PayPal as the payment method. The payment method data includes payment method, billing address, and shipping info. Add tooltips to the payment summary on the confirmation page.
Configure the confirmation page with a UX element that notifies a shopper they’ve returned to your site after completing the PayPal express checkout.
Error Message Handling
Customize the presentation of error messages. Error messages come from Stripe, which provides them to custom code in an event. The element, its style, and its placement are configured with your custom code.
SiteGenesis Cart with Salesforce Payments
SiteGenesis has two checkout buttons on the cart page. In addition, SiteGenesis provides code to add a legacy Apple Pay button below the two checkout buttons. You can also add Salesforce Payments express checkout functionality to the SiteGenesis cart for example, PayPal.
To add an express checkout button, you create a payment request and mount it at a container. With this approach, you can add multiple express checkout buttons. For example, to add two express checkout buttons, you create two equal payment requests, and mount each one at a different container.
- Add Cart Controls: Cart controls let shoppers adjust product quantity, remove products, and apply coupon codes. Build SiteGenesis cart controls for Salesforce Payments with custom JS. The custom JS code calls custom controllers that are separate from the payments code. To supply updated data to the cart components, You add responses to the JS calls.
- Express Payment Type Messages: Salesforce Payments supports adding a payment message on the cart page. To add a message to the SiteGenesis cart, you add an HTML attribute on a DIV element.
- Site Genesis Mini Cart with Salesforce Payments: Add
express checkout, PayPal, and other buttons to the Mini-Cart. We recommend vertical
alignment for the buttons. The Mini-Cart and the Cart use
<ispayment>for the Pay Now use case, which shows the Pay with PayPal button. Pay-with requires an existing shopper basket. The same approach is used for the mini cart and cart pages. - PayPal Button Placement: The placement of the PayPal button is set by a certain z-index value used by PayPal. Add a CSS rule for the mini cart with a z-index value to alter the placement order of the PayPal button.
SiteGenesis Product Detail Page (PDP) with Salesforce Payments
You can
add express checkout buttons to the PDP and PDP quick view pages. The standard SiteGenesis PDP
configuration is suited to placing the express checkout or the PayPal button to the right of
the Add to Cart button. You can achieve the placement with CSS and you can stack multiple
payment buttons vertically. To flow or wrap the buttons, requires you use more complex CSS.
The PDP uses <isbuynow> for the Buy Now use case,
which shows the PayPal Buy Now button. This approach means that SiteGenesis PDP pages can be
cached and reused to present Buy Now equally to multiple shoppers. The shopper basket is
created or updated when the shopper clicks Buy Now.
- PDP Quick View: The PDP Quick View page uses the same SiteGenesis PDP code with a slightly different template. Because they share code, adding the express checkout button to the PDP page also adds it to the PDP Quick View page.
- PDP Mini-Cart Access: When the mini-cart triggers from the PDP, the Mini-Cart shows
the express checkout buttons if it’s configured to show them because the SiteGenesis add
to cart is an AJAX call that includes HTML in the response. The HTML contains
platform-injected
<script>tags to present the Salesforce Payments components. SiteGenesis successfully runs those scripts when it adds the HTML to show the mini cart. This functionality, offered by jQuery.
