End to End Paywall with a Product

Setup Payment Providers

Navigate to Settings > Payment Providers within your Zephr Admin Console.

From here, enter the configuration details based upon your pre-existing Braintree Account. You will need to provide the following details:

• Merchant ID
• Private Key
• Public Key
• Include User Email Address on Purchase: Tick this if you would like to share a User’s email address with Braintree when processing a payment
• Sandbox Mode: Tick this if you would like to put the integration into Sandbox Mode

To find this information within Braintree, navigate to the API section within your Braintree account.

Once in the API section, locate the API Keys table, then click View under the Private Key column.

This will open your Client Library Key, where you will find the Public Key, Private Key, and Merchant ID needed for your Zephr-Braintree integration.

Please note: The information above does not relate to your specific Braintree environment and is for demonstration purposes only.

Add this information to the configuration screen, as mentioned above, and click Save.

Set up Product

When a site visitor hits the paywall, you will ask them to buy a product. If they do buy the product, they will be granted a bundle of entitlements that will give them access to content on your site.

The first step in setting up the product is to configure the bundle of entitlements.

Registration Form Setup

From the main left hand side navigation menu, select Site Integration > Forms.

Select Add Form.

• Complete the Fields
  • Title
    • Click the text to modify the Slug if required. The Slug is the website URL for this page.
  • Internal Description
  • Public Description

Check the Registration/Sign in Form option.

Upon doing this you are presented with another two options:

• Allow Passwordless Authentication
  • This optional feature removes the Password Field from the Registration Form
• Allow Social Sign On
  • This optional feature allows users to login with their Social Media Accounts

Checking this expands the option to show Social Accounts (Facebook, Google) for OAuth access

To configure the Social Sign On, Click Configure which opens a modal window for field configuration. Please note these must be previously setup correctly before use.

Select Save to return to the Forms page

Clicking Add Form returns you to the Identity Management page where your Attributes are listed

Select Save to return to the Forms page

UI Component

A UI component is a block of code which can be used to replace content within a decision engine transformation.

Select Site Integration > UI Components

• This is HTML code which is embedded onto the website.
• Standard options already packaged within Zephr include a Paywall

Create Feature

Create Rules using the Feature Builder

Select Site Integration > Feature Rules

Select the Add Feature button

Complete the Label Field

Label your feature ‘Article’.

Zephr provides you with a Site Integration Tip which shows you how to update your HTML code so that Zephr can understand what the feature corresponds to.

• • You must now update your CMS’s page template (or otherwise your site HTML) with the comments above.
  • You can now use the drag and drop Feature Builder to construct the logic by dragging the options onto the canvas to visualise the user flow.
• Using the Feature Builder Setup a Basic Paywall Rule
• Using the Canvas
  • Click the Undo, Delete or Clear Canvas buttons to undo or clear the canvas
  • If the Feature is a registration form, the Registration Form created in the previous step will be an available option under the Form option
  • Any other form created will also be available from the Feature Builder navigation.
  • Select Add Feature to complete the process
• Click and Drag your options from the Feature Builder menu onto the blank canvas to create the user flow:

  Drag in the session > Logged In decision point to check if the user is logged in

 Drag onto the canvas and link the Functions

 Connect the No connector from Logged In to the Form box

 Drag the Entitlement Segment > Entitlement option onto the stage

 Connect with the Yes connector from the Logged In feature

 Drag the Transformations > UI Component and link to No connector from the Has Article Entitlement feature

09 Drag the Transformations > No Transformation and link to the Yes feature Has Entitlement Article connector