Checkout Feature

The Checkout feature transforms the merchant's checkout process by providing a user-friendly, flexible, and highly customizable solution

This innovative approach simplifies transactions, offering a smooth and seamless experience for both merchants and customers. Merchants can customize the checkout interface to match their brand identity, ensuring the design feels native to their e-commerce platform. This includes aligning color schemes and fonts to create a consistent shopping experience from browsing through to the final purchase.

Key Benefits

• Easy Deployment and Maintenance: Quickly deploy new features with minimal code, enabling straightforward integration and the ability to add new features to your existing e-commerce system.
• Reduced Complexity: Streamlines the checkout process by consolidating complex business workflows and payment gateway management into a single Master Widget, requiring only one API call for initialization.
• Centralized Customization: Apply consistent design and layout settings across different platforms with minimal code adjustments.
• Enhanced Monitoring: Gain an in-depth overview of the user’s payment journey, aiding in efficient tracking and troubleshooting.

Core Functionalities

• Offers a variety of payment methods for customers.
• Integrates additional services effortlessly.
• Ensures a smooth and secure transaction flow.

Current Supported Services and Flows

• Card Payment Flows:
  • Card Payments with 3D Secure (Recommended)
  • Card Payments without 3D Secure
• Wallet-Based Payment Methods:
  • Apple Pay Payments
  • Google Pay Payments
  • PayPal Payments
• Alternate Payment Methods:
  • Afterpay V1 Payments
  • Zip Payments

Before You Begin:

To use the Checkout feature, you will need to create and use an Access Token.

Follow these steps to generate your Access Token via Paydock's Merchant Dashboard:

1. Log in to the Paydock Merchant Dashboard.
2. Click on the ‘Access Tokens’ link in the navigation menu.
3. Click ‘Create New’ and select the following permissions:
   • checkouts:create-intent
   • checkouts:search
   • checkouts:get
   • checkouts:get-versions
   • checkouts-templates:get
   • checkouts-templates:search
   • checkouts-templates:create
   • checkouts-templates:update
   • checkouts-templates:get-schemas
4. Click ‘Save.’
5. Copy your Access Token and store it securely, as it cannot be accessed again once generated.

How to Set Up Checkout

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:

• Customization: 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 & Customization: A combined template that allows you to create both the configuration and customization simultaneously.

For first-time setup, we recommend using the Configuration & Customization option.

Next, label your templates uniquely. If you select the configuration option, you can choose which version of the configuration template you want to create. After selecting the API version, you'll see a list of services. Choose the transaction flow associated with the service and enter the corresponding Service ID found in the ‘Services’ screen.

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

For the customization template, label it similarly to the configuration template, ensuring that it’s easy to identify. You'll then have the option to customize the following elements:

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

After applying these changes, click ‘Save.’

Your created templates will now appear in the Templates list with an associated ID, which you can use in your integration. To preview your templates, select ‘Preview’ from the Checkout page, fill out the required fields and press create to preview your widget:

Integrating the Checkout Master Widget

Step 1: Create Configuration and Customization Templates
Follow the instructions above in the "How to Set Up Checkout" section.

Step 2: Generate Intent Token via API
The Intent encapsulates the payment context for the transaction. We recommend gathering all fields within the intent token request for compatibility with all existing and future payment methods.

API Endpoint:
POST https://api.paydock/v1/checkouts/intent

Headers:

• x-access-token: PAYDOCK_ACCESS_TOKEN
• Content-Type: application/json

Request Parameters:

• customisation.template_id: Your created Customisation ID.
• configuration.template_id: Your created Configuration ID.
• Customer details such as email, phone, billing address, etc.
• amount: Total transaction amount.
• version: API version being used.
• currency: Currency used.
• reference: A unique reference for the transaction.

After sending the request, store the returned intent_token for the next step.

Step 3: Render the Widget
Use the intent_token to render the Checkout Widget to your website:

<div id="widget"></div>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.js"></script>
<script>
  var widget = new Paydock.Checkout('#widget', "");
</script>

Step 4: Add Event Handling
Use the following events to track the checkout status:

• onPaymentSuccessful: Triggered when the payment is successful.
• onPaymentError: Triggered when the payment fails.
• onPaymentExpired: Triggered when the session expires.

Example:

<script>
  widget.onPaymentSuccessful(function(data) {
    console.log("Success:", data);
  });
  widget.onPaymentFailure(function(error) {
    console.log("Failure:", error);
  });
  widget.onPaymentExpired(function(data) {
    console.log("Expired:", data);
  });
</script>

History Tab

The Paydock dashboard offers insights into your users' checkout experience, including:

• ID: Intent token ID.
• Amount: Transaction amount.
• Currency: Transaction currency.
• Reference: Optional reference for the transaction.
• Reason: Details about the outcome of the transaction.
• Status: Status of the intent session.
• Process Reference: ID for the payment charge generated.
• Created At: Timestamp for when the intent request was completed.

You can also view logs for additional details about the selected payment methods and their outcomes.

Versioning

In Templates:
Versioning allows you to manage different versions of your configuration and customization templates. By specifying the version, merchants can ensure consistent application of the same features across various workflows.

In API Endpoints:
When creating an intent, explicitly passing the workflow version ensures alignment between the API and the Checkout Widget, maintaining stability throughout updates.