Product and checkout widgets

The product page widget should be shown in the product description page (PDP) if the product is leasable. It shows the lowest lease monthly price and has a learn more modal.

The checkout page widget should be shown on the checkout page when Raylo Pay is enabled and selected as a checkout option, and the shopping basket is eligible for Raylo Pay. It shows the lowest lease monthly price and has a learn more modal.

Product description page widget

Checkout page widget

"Learn more" modal

In order to see how to use the widgets in the frontend of your app, see the Widgets section.

The SDK should be used to generate JWTs that can then be used to show the widgets.

Here is a code sample of how to generate a checkout widget JWT:

// header...
use \Raylo\RayloPay\SDK\CheckoutPricePreviewData;
use \Raylo\RayloPay\SDK\OrderLine;
use \Raylo\RayloPay\SDK\Widgets as WidgetsHelper;

// initialisation/constructor...
$config = new ConfigProvider(...);
$widgets = new WidgetsHelper($config);

// function/method body...
$requestData = new CheckoutPricePreviewData;
$requestData->currency = 'GBP';

$orderLine = new OrderLine;
$orderLine->variant->reference = ... SKU ...;
$orderLine->variant->displayName = ...;
$orderLine->merchantPrice->valueAfterTax = ...;
$orderLine->merchantPrice->valueBeforeTax = ...;
$orderLine->merchantPrice->calcTaxValueAndPercentage();

// NB: Raylo Pay only supports one top level item right now,
// other items have to be added as add-ons using $orderLine->addons
$requestData->items[] = $orderLine;

$requestData->deliveryCost->valueAfterTax = ...;
$requestData->deliveryCost->valueBeforeTax = ...;
$requestData->deliveryCost->calcTaxValueAndPercentage();

return $widgets->getCheckoutWidgetJwt($requestData);

And here is an example of how to generate a product widget JWT:

// header...
use \Raylo\RayloPay\SDK\ProductPricePreviewData;
use \Raylo\RayloPay\SDK\Widgets as WidgetsHelper;

// initialisation/constructor...
$config = new ConfigProvider(...);
$widgets = new WidgetsHelper($config);

// function/method body...
$requestData = new ProductPricePreviewData;
$requestData->currency = 'GBP';
$requestData->variant->reference = ... SKU ...;
$requestData->variant->displayName = ...;
$requestData->merchantPrice->valueAfterTax = ...;
$requestData->merchantPrice->valueBeforeTax = ...;
$requestData->merchantPrice->calcTaxValueAndPercentage();

// NB: The product JWT supports only one top level item,
// any add-ons selected for the item can be added using $requestData->addons

return $widgets->getProductWidgetJwt($requestData);