How to Set Up Checkout Templates

Make sure you have your Gateway IDs for the relevant payment methods, as you will need these during setup.

1. Log in to the Paydock Merchant Dashboard.
2. Navigate to the ‘Checkout’ section.
3. Click ‘Create New’.

From here, you'll be presented with the following template options:

• Customisation: A template designed for adjusting the look and feel of your checkout process.
• Configuration: A template designed for selecting workflows and payment services for your checkout.
• Configuration & Customisation: A combined template that allows you to create both the configuration and customisation simultaneously.

Creating a Configuration Template

The following steps will guide you through creating a configuration template, helping you to structure and optimise your checkout workflow for stability, clarity, and maximum control:

1. Label: Give your template a clear, descriptive label. This helps you easily identify it later.
2. Versioning: The latest template version will be pre-selected automatically to ensure you have access to the most recent features and functionality.
3. Payment Method Options: Use the provided toggles to enable different payment methods and flows. The system will automatically show you a list of compatible gateways for each option.
4. Card Payments: For card payment methods, Checkout provides multiple flow options to help you tailor payment processing to your business requirements.
   1. Direct Capture: This is the default and mandatory flow for card payments.
   2. Fraud Prevention: In the Fraud tab, you can enable integration with services like Forter or Accertify.
   3. 3D Secure (3DS): In the 3DS tab, you can enable authentication options:
      1. Gateway 3DS: Available for the MPGS gateway.
      2. Standalone 3DS: Compatible with all gateway types.
   4. Combined Security Flows: If you enable both a fraud and a 3DS option, the system will seamlessly combine them. The order of operations is:
      1. Fraud check
      2. 3DS authentication
      3. Financial charge
5. Other Payment Methods: For all other payment methods, only the "direct capture" flow is currently supported.

Configuring Conditions for the Card payment method

The Checkout feature is enhanced to support conditional routing flows for the Card payment method, moving beyond a single, rigid payment path to an adaptable and personalised journey.

This allows merchants to define rules that respond to real-time transaction data. In this initial phase, you can create rules that dynamically influence the:

• Payment gateway
• Fraud settings
• 3DS configurations

In the initial phase, these rules are based on the payment card schema (e.g., Visa, Mastercard, Amex) and whether the card is new or saved. Further parameters will be supported in future.

How Conditions work

Understanding the logic of Checkout Conditions is essential for correct configuration.

• First-match principle: The conditions engine is designed to act on the first condition it encounters that is met. It will systematically evaluate the rules in the order you define them.
• Order is critical: Because the conditions stop at the first match, the ordering of your conditions is critical in determining which flow is executed.
• Progressive evaluation: Conditions are triggered as data becomes available. For instance, the condition may execute once a user inputs their card details and the card schema is known. This capability allows the checkout process to dynamically select the necessary rule, along with the required services (such as 3DS or a payment gateway), during the transaction processing.

How to enable Conditions

1. After enabling the Card payment method in the configuration template, set the "Default" flow configuration. This required set of gateway, fraud, and 3DS settings will be used as a fallback if no other rules are met.
2. Click "Add New Rule" for every card scheme you want to include in the conditions. These rules, such as "Rule 1" and "Rule 2", are evaluated sequentially.
   
   
3. Set the specific criteria for each rule.
   • For example, a rule could be: If the card scheme is MasterCard, use the MPGS gateway and enable the 3DS service.
   • Another rule could be: If the card scheme is Visa, use the Cybersource gateway and enable the fraud service. 

If the criteria are met, the conditions engine will apply the specific gateway, fraud, and 3DS services you have configured for that specific rule.

Settings configuration

The Settings tab includes various configuration options for the template, allowing you to save cards, enable the Forter Agent, hide the message widget and whitelist a list of domains. Below are descriptions for each case.

Saved Card

Saved Card allows customers to store their payment card details for quicker future transactions securely. 

The entire process is anchored by a customer_reference that the Merchant provides.

• customer_reference: Merchant unique user identifier (e.g., user_id) for the end-user. This string (1-64 characters) must be passed in the Checkout Intent to link the user to their saved (vaulted) cards.

There are two main workflows:

1. New Customer Flow (Saving a Card):
   • Merchant passes the customer_reference and runs the Checkout Intent request to receive an intent token.
   • Merchant initialises Master Widget with the received intent token.
   • The user selects Card as a payment method option in the Master Widget.
   • The user enters card details and marks the "Save card" checkbox in the widget.
   • Upon a successful charge, the system automatically converts the session vault into a permanent vault token and associates it with the provided customer_reference.
2. Existing Customer Flow (Using a Saved Card):
   • Merchant passes the same customer_reference in the Checkout Intent.
   • Paydock backend searches for all permanent vaults matching that customer_reference.
   • The widget displays a list of saved cards (e.g., "Mastercard ****4242").
   • The user selects a card.
   • The widget then prompts the user to enter their CVV (and update expiry/billing information if required).
   • This CVV is securely tokenised (if provided).
   • System processes the charge using the selected permanent vault and the newly tokenised CVV.

To continue with adding the Saved card flow, please follow these steps:

1. Navigate to the ‘Settings’ tab and toggle ‘Enable Saved Card’ to the ON position.
2. (Recommended) Toggle ‘CVV Validation’ to the ON position. This ensures returning users are prompted for their CVV.

After saving the configuration template and running the initialised widget variable, the Paydock backend and the Master widget manage the logic through a sequence of flow actions, minimising the need for extensive frontend code. Consequently, users will be able to save a new card by using the 'Save Card' checkbox and utilise the saved card for subsequent visits.

Message Widget

If you prefer to manage flow status updates or redirect them yourself, you can simplify the user experience by disabling the Message Widget. 

When the 'Hide Message Widget' toggle is set to ON in the 'Settings' tab, the Message Widget will not be displayed to the user during the Checkout process.

Domain Whitelisting

To enhance security, you can restrict where your checkout widget can be embedded.

1. Enable Whitelisting: Go to the 'Security' tab and add the specific domains where your checkout will be accessed to the "Whitelist Domains" field.

2. Domain Format: You must enter the full domain name (e.g., test.test.com not test.com). You can use various formats, such as test.com or https://test.com.

Once you've selected your workflows and entered the necessary Service IDs, click ‘Save and Next.’

Creating a Customisation Template

When creating a customisation template, assign a clear label for easy identification. You can then tailor the following elements to align with your brand and user experience goals:

• Background colour
• Border colour
• Text colour
• Button colour
• Font family
• Font size

After finishing your adjustments, select ‘Save’ to apply your changes.

Your created templates will now appear in the Templates list with an associated ID, which you can use in your integration.