Salesforce B2C Commerce 24.7 > Salesforce Payments > Run Salesforce Payments on SiteGenesis

Salesforce Payments SiteGenesis Page Samples

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

You can 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

You can 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. You can 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 is displayed. 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. You can add tooltips to the payment summary on the confirmation page.

You can 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

You can customize the presentation of error messages. Error messages come from Stripe and are provided 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. You can 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

You can 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. You can add a CSS rule for the mini cart with a z-index value to alter the placement order of the PayPal button.

Note: The PayPal button placement highlights the types of unforeseen issues and the range of complexity that could arise with some Sit Genesis implementations.

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 would be created or updated if Buy Now is clicked.

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 is triggered from the PDP, the Mini-Cart shows the express checkout buttons if it’s configured to show them. This happens 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.