Integrating Paazl Perfect

This article explains how to integrate Paazl Perfect in your webshop's checkout.

To create a Paazl Perfect session in your webshop checkout, you need to do three things:

1. Request a Paazl Perfect session
2. Populate the Paazl Perfect session with checkout data
3. Return the selected delivery option to your checkout

The details of how to perform these steps are explained below.

1. Request a Paazl Perfect session

1. Create a new pending order using the orderRequest webservice call
2. Start a Paazl Perfect session using the checkoutRequest webservice call. This call includes a reference to the pending order
3. Load the URL script returned by checkoutResponse webservice response into your checkout
   
   

   <script type="text/javascript" src="https://ost.paazl.com/checkout/a34cb32d-d75c-4aab-8166-f4dd272c106a/loader.js"></script>

2. Populate the Paazl Perfect session with checkout data

Use the PaazlCheckoutModuleLoader.show() Javascript function to send checkout data to Paazl.

The PaazlCheckoutModuleLoader.show() function needs to be able to access the values of the fields listed in Table 1. There are two ways of giving the function access to these values:

• as field-value pairs in a JSON object, for example
  
  

  PaazlCheckoutModuleLoader.show({consigneeCountryCode: "NL", consigneePostalCode: "1019HD"});

• as name/data-pcm-input attribute pairs in your HTML code, for example:
  
  

  <select name="country" data-pcm-input="consigneeCountryCode">...</select>

  or
  
  

  <input type="text" name="postal_code" data-pcm-input="consigneePostalCode"/>

Table 1: Paazl Perfect checkout fields

3. Return the selected delivery option to your checkout

After a customer has chosen a delivery option in Paazl Perfect, there are two ways in which you can store and display this information in your webshop's check-out page.

• Use a Javascript callback function
• Use Paazl's checkoutStatusRequest API call

Javascript callback function

When a customer confirms his/her choice, your webshop executes

PaazlCheckoutModuleLoader.show(myCallback);

where myCallback is a function you define yourself, and which you can name whatever you want.

Paazl passes your callback function a HashMap containing the field-value pairs listed in Table 1 above as well as those listed in Table 2 below. Your function then reads the values contained in the HashMap and manipulates the data on your checkout page to reflect your customer's choices.

Sample Callback Function

function myCallback(params) {
  alert("User selected " + params.option + " delivery on " + params.preferredDeliveryDate);
}
PaazlCheckoutModuleLoader.show(myCallback, { deliveryType: "home" });

Table 2: Additional Paazl Perfect checkout fields

checkoutStatusRequest API call

You can also use the Paazl checkoutStatusRequest API call to retrieve and store the selected delivery option when displaying it on your checkout page. This is the safest option, but it might slow performance because it involves an additional API call and response in your check-out.