Skip to main content

Overlay Paywall Integration

Introduction

The Overlay Paywall is a versatile and user-friendly plugin designed to integrate seamlessly with e-commerce websites. It allows you to collect escrow payments via Lipasafe. This documentation provides comprehensive instructions on how you can integrate and use the Overlay Paywall on your website.

Before you start

You will need to do the following things:-

Service Endpoint

GET https://my.lipasafe.com/paywall

Configure the iFrame URL

Overlay is integrated using an iFrame. This makes it flexible enough to be integrated in a vast range of websites on different platforms.

  • All data passed into the Overlay Paywall is provided via GET parameters of the service URL.
  • We recommend embedding this iFrame in a product details page.
  • All parameters appended to the service URL MUST be encoded.
    • In PHP, you can use the urlencode() function.
    • If you are integrating in another language, please find a urlencode alternative for this.

Parameters explained

Your iFrame src URL will take the following GET parameters:-

  • name - The name of the product
  • description - Description of the product. Can also be other notes relevant to this transaction
  • price - Price of the item / service in KES. If float, will be rounded up to nearest integer
  • vendor_uuid - Unique Vendor ID assigned to you. You will get this value from your vendor details page details page
  • inspection_period - Inspection period. Read more about inspection periods here
  • category - Category. Can only be PRODUCT or SERVICE

Here is an example of what a complete iFrame implementation will look like:

<iframe src="https://my.lipasafe.com/paywall?name=Test&description=Test&price=500&vendor_uuid=74747384&inspection_period=3&category=PRODUCT" frameborder="1" width="100%" height="700px"></iframe>

Example Integration

Here is an example of building the paywall URL in PHP.

$params = [
'name' => $product['name'],
'description' => $product['description'],
'price' => $product['price'],
'vendor_uuid' => request()->vendor_uuid,
'inspection_period' => 5,
'category' => 'PRODUCT',
];
$paywallURL = 'http://127.0.0.1:8000/paywall?'.http_build_query($params);

The final URL will look like this:-

https://my.lipasafe.com/paywall?name=Samsung%20S9&description=Best%20device%20for%20life&desc
&price=30999&vendor_uuid=9a627473-c0f0-4740-8a71-f61af726ff22&inspection_period=3&category=PRODUCT
&notify_url=http%3A%2F%2Fyourwebsite.com%2Fipn%2Freceive

Play with the demo

  • Each Vendor App comes with a Demo Shop ready to play with.
  • To access your Demo Shop, go to Vendor Apps >> Details >> View Demo Shop.

Last updated on 19 May 2024