Buy Now and Pay Now Checkout Methods

Both Pay Now and Buy Now are included in your site when you use plugin_commercepayments with a compatible SFRA version. You can add either or both because they’re independent of one another. If you customize the checkout methods for your site, each one has its own requirements.

With Buy Now, the shopper is presented with a button to buy a specific product. Clicking the button prepares a basket that contains only that product. It completes checkout using the browser payment app appropriate for the shopper’s device and browser, such as Apple Pay or Google Pay.

With Pay Now, the shopper is presented with a button to complete checkout using a browser payment app for whatever is in their basket.

Buy Now

The plugin_commercepayments cartridge adds a Buy Now express checkout button to the product details page. See the following templates:

All but the buyNowButton template is part of the SFRA app_storefront_base cartridge. The plugin_commercepayments cartridge contains buyNowButtons and overrides addToCartButtonExtension to include it.

If you aren’t using the latest version of SFRA, adjust your addToCartProduct or equivalent to include buyNowButtons.

The buyNowButtons template depends on data in the view model. If the data isn’t present, the button doesn’t work as expected. The addToCartButtonExtension template sets a page variable named buynowproduct to the product model object for products bought through express checkout. If you include buyNowButtons directly, you must first set a compatible object at buynowproduct.

The Product-Show controller adds the data to the view model. Some information about product inventory and availability is added by the SFRA base controller and used to determine if the product can be purchased. If the product can’t be ordered the Buy Now button is hidden. The plugin_commercepayments cartridge also appends code to this controller to add a dw.extensions.payments.SalesforcePaymentRequest object containing configuration and other information necessary to inject express checkout code. Review the template, controllers, and API documentation for more details.

Because Buy Now doesn’t require an existing shopper basket, and ignores one if it exists, all the data supplied to the browser payment app to complete checkout must be calculated independently of a basket. If your product details page is cached, the data is cached as well. The data must match the product price and other site configurations, such as for taxes, shipping, and promotions. When the data matches, the resulting basket matches what the shopper sees in the payment app. The shopper completes the purchase without further interaction with the B2C Digital platform or your custom code, so the amounts must be correct.

The plugin_commercepaymentscartridge provides the paymentHelpers script function getBuyNowData to calculate the data for a product model object. It in turn uses the checkoutHelpers script function calculateBuyNowData to calculate the data for a specific SKU, price, quantity, and options. These functions can work for your site out of the box. To support your site needs, you can customize specific products, prices, shipping methods, promotions, and tax calculations. If your product details page is cached, ensure that the output of your custom calculations can also be cached.

Anytime the shopper changes something that affects the total line items, or other data to be shown in the browser payment app, the Buy Now button must be updated. The aim is to ensure that when the shopper uses the button the payment app shows data matching the resulting basket. The plugin_commercepayments cartridge recalculates the data in code appended to the Product-Variation controller. It includes the data in the response, and updates the Buy Now button using a Salesforce Payments client-side JS API. SFRA calls that controller for changes to the variation attributes and for changes to the quantity, product options, and so on. Call this controller or follow a similar pattern to update use cases like this on your site.

Pay Now

The plugin_commercepayments cartridge adds Pay Now express checkout buttons in three places.

• In the mini cart below the Checkout button
• On the cart page below the Checkout button
• At the top of the checkout page above the Customer, Shipping, and Payment Method cards

The buttons are implemented using these templates.

• checkout/cart/miniCart includes
• _commercepayments/cart/checkoutButtons includes
• _commercepayments/components/product/paymentRequestButtons
• cart/cart includes
• _commercepayments/cart/checkoutButtons includes
• _commercepayments/components/product/paymentRequestButtons
• _commercepayments/checkout/checkout includes
• _commercepayments/components/product/paymentRequestButtons

The miniCart template is part of the SFRA base and is rendered in an AJAX controller response. The cart template is also part of the SFRA base and is the cart page. The plugin_commercepayments cartridge overrides the SFRA base checkoutButtons template used in both and includes paymentRequestButtons. The plugin_commercepayments cartridge also overrides the entire SFRA base checkout template, and includes paymentRequestButtons directly. The buyNowButtons template depends on the property paymentRequestData in the view model. The plugin_commercepayments cartridge provides a paymentHelpers script function createPaymentRequestData to calculate it. Because it’s possible that multiple Pay Now buttons can appear on the same browser page, each call returns data for a unique button. If you reuse the same paymentRequestData to create multiple buttons they might not work as expected.

The createPaymentRequestData function uses the current shopper basket to calculate the data to show in the browser payment app for a Pay Now button. Call this function after modifying the basket and recalculating it using your site basket calculation script that applies promotions, computes shipping and tax, and updates totals. If you call the function before then, the data might not reflect the resulting state of the shopper basket. The cart and checkout pages aren’t often cached. If your site caches those pages in any way, be sure that the data is always updated when the basket changes.

The plugin_commercepayments cartridge recalculates the data when the basket is changed on a page with a Pay Now button. The data includes quantity and line item changes in the mini cart or cart, changing the shipping method on the cart or checkout pages, applying a coupon, and so on. In each case code is appended to a controller to add the recalculated data to the response. Event handlers on the client side update the Pay Now button using the same Salesforce Payments client-side JS API as for Buy Now. Follow a similar pattern to update for other use cases on your site.