Custom code

This section describes changes that should be made to a merchant’s custom cartridge. All of the modifications are stored in the mirrored cartridge structure in int_Tiptop_sfra/_cartridge for default Storefront Reference Architecture so you can find the exact code there.

Templates - In review, changes may occur

cartridge/templates/default/common/htmlHead.isml Include Tiptop header script tag after Google Verification tag (or after any other relevant tags and before the htmlHead hook):

<isinclude template="Tiptop/TiptopHeaderMF" />

cartridge/templates/default/common/scripts.isml Include tiptop.js as static file at the bottom of the file:

<script>
  var _tiptop_config = {
    public_api_key: "YOUR_PUBLIC_API_KEY",
    script: "https://cdn.tiptop.com/js/v1/tiptop.js",
  };
  !(function (t, e) {
    var n = t.tiptop || {},
      c = document.createElement("script");
    (c.async = !0), (c.src = e.script);
    var i = document.getElementsByTagName("script")[0];
    i.parentNode?.insertBefore(c, i), (t.tiptop = n);
  })(window, _tiptop_config);
</script>

cartridge/templates/default/components/modules.isml Include TiptopModule template after the last line:

<isinclude template="util/TiptopModule" />

cartridge/templates/default/cart/cart.isml Place promo message below where cart total is displayed:
cartridge/templates/default/checkout Edit the following templates to integrate Tiptop payment into the checkout flow. cartridge/templates/default/checkout/billing/billingSummary.isml Include a div tag with checkout data:

Image:

cartridge/templates/default/checkout/billing/paymentOptionsTabs.isml Add a condition attribute within the paymentOptionsTabs isml here is the code snippet.

Code:

Image:

cartridge/templates/default/checkout/billing/paymentOptionsContent.isml Include input template within the payment options isloop:

<isif condition="${paymentOption.ID === 'TIP_TOP' &&
require('*/cartridge/scripts/utils/TiptopHelper').IsTiptopApplicable()}">
       <isinclude template="Tiptop/paymentMethodInputMF" />
</isif>

After adding the code snippet it will look like below Image:

Controllers

Note: Checkout endpoints in CheckoutServices.js were replaced to handle Tiptop and Credit card payments, which can be found in int_tiptop_sfra/cartridge/controllers/.

Client JavaScript

Note: Client-side JavaScript will need to be compiled before deployment. Update package.json at the root to make sure the value of paths property is referencing the base cartridge. In addition, please make sure the SGMF Scripts (opens in a new tab) package is installed and run the following command:

sgmf-scripts --compile js

More information on the build commands can be found here (opens in a new tab).

cartridge/client/default/js/checkout/billing.js Clicking on the payment method tabs it will send the methodID to the backend via ajax call
cartridge/client/default/js/checkout/checkout.js Add an if statement based on checkout stage inside the updateUrl function: Modify the billing.js file, upon getting callback from tiptop these are the cases:

Configurations Install Guide