Seamlessly manage content purchases and access across devices.
Choose the content you want to sell and how much to sell it for. Assign a unique content_id and price to each content item.
When a user clicks the Buy button the Fourdotpay payment flow is triggered. Fourdotpay informs your website when the payment has gone through.
Users can easily regain access if they switch devices using the redeem function.
Users purchase a license to access content. Every time a page loads, the license is verified through our API.
We’ll start with a simple example of adding a Buy button to your website to allow your customers to buy access to a single video for £2.99. In the image below, you can see what we are going to build – a button that lists the price to access a video and a video in the locked state (which user cannot play until they make the payment). The guide shows the three components needed to enable the purchase journey ( 1. Checkout container, 2. Buy button, 3. Content container).
The first code snippet below creates the first component – the Checkout container :
The code snippet below adds a Buy button to checkout container. You can add multiple Buy buttons if you like:
Finally, the code snippet below adds the third component – the content container:
Make data content ID in buy button match data content ID in content container
When the user clicks Buy, they will be shown a popup explaining how to purchase the content using Fourdotpay. Our SDK takes care of the presentation of that page. After the user has made the purchase, the video will show in the unlocked state.
Now that you understand the basic idea, below we go into more detail. In step one, you’ll configure the set up code in the <head> of your webpage. In step two, you’ll configure the code snippets in the <body> of your website:
<title>Retailer Website</title>
<!-- Load the Fourdotzero SDK -->
<script
defer
src="https://sdk.fourdotpay.io/fdz-sdk-js/dist/fdz-sdk.js?ver=0.0.1"
></script>
<!-- Fourdotzero SDK configuration -->
<script>
window.addEventListener("load", function () {
window.fdzSDK.initConfig({
siteName: "TruckSite",
siteAddress: "TrucksAreCool.com",
siteUrl: "https://www.trucksarecool.com",
contentPrefix: "trucksarecool",
accountId: "trucks$fourdotpay.io",
accountType: "BUSINESS",
});
});
</script>
When inserting this code snippet into the HEAD of your page, you need to customise the information to make it relevant to you:
siteName: This is a string that describes your website.
siteAddress: e.g. example.com. This is a string representing the main part of your domain name (Second-Level Domain) and the Top Level Domain (e.g. .com, .co.uk, .io etc).
siteUrl: The full url of your website. This should be a fully formed URL e.g. “https://www.trucksarecool.com”.
contentPrefix: This is a string that you can choose to easily identify your website to Fourdotpay.
accountId: This is your 4.0 Account ID (ie. the account ID you chose when you opened your Fourdotpay payment account). This tells the system where you want the money to go when a user buys your content.
accountType: This can be either “PERSONAL” or “BUSINESS”. It specifies the account type of the Fourdotpay account into which you want funds to be sent when a buyer purchases your content.
<div class="wrapper">
<!-- Add the checkout widget to the page -->
<div
data-fdz-sdk-widget="checkout"
data-title="Checkout"
data-description="You'll learn a lot from this Video lesson"
>
<!-- Add buy button widgets for single content purchase -->
<div
data-fdz-sdk-widget="buy_button"
data-content-ids="5bac0236-6407-415a-969c-66bb14f65a1b"
data-content-price="2.99"
data-content-title="Video Lesson 1"
></div>
<!-- END buy button -->
</div>
<!-- END checkout widget -->
<!-- Add content widgets to the page -->
<div
data-fdz-sdk-widget="content"
data-content-id="5bac0236-6407-415a-969c-66bb14f65a1b"
data-content-title="Video Lesson 1"
data-content-type="video"
data-content-url="https://player.vimeo.com/video/ScMzIvxBSi4"
data-content-image="/placeholder.png"
></div>
<!-- END content widget -->
</div>
When inserting this code snippet into the BODY of your page, below is some guidance on how to choose values for these properties:
will generate a container with the content you are selling. If a user has not purchased the content, the content will appear in its locked state. Specify a data-content-id for the content item (ie. IMPORTANT: you must use the same UUID you specified in the Buy Button above). The allowed values for data-content-type are “video”, “pdf”. Provide a URL for where the content is hosted (e.g. If the content is a video hosted on Vimeo then specify the vimeo URL).
Payment Service: Provides capabilities for making and settling payments (e.g. transfer of funds from buyer to seller). Payments are handled via a “Wallet Provider” (e.g. Fourdotpay) and both the buyer and the seller create accounts with the Wallet Provider.
Content & Paywall Service: Provides capabilities to generate Buy buttons (payment links) for individual content items or groups and to ensure that only content that has been purchased is unlocked and available to view.
Licensing Service: Provides capabilities for issuing and managing licences (e.g. keeping track of who has paid for which content items). Licences can be set up to limit access to content by time or number of uses.
Start your journey now, have an intro Zoom call