Components

AccessType

<AccessType children email phone isStaging enableAccesstype accessTypeKey accessTypeBkIntegrationId prodHost stagingHost onATGlobalSet />

Constructor

# <AccessType children email phone isStaging enableAccesstype accessTypeKey accessTypeBkIntegrationId prodHost stagingHost onATGlobalSet />

AccessType is a generic connected render prop which exposes methods to handle access to stories / assets and initialize AccessTypeJS.

Name arguments Description
initAccessType -NA- Initializes accesstype, checks for existance of accesstype before requesting for AT js
initRazorPayPayment selectedPlan(object), planType(string) Executes accesstype js method to bring forth RP payment gateway
initStripePayment options(object), options={ argType: "options",selectedPlan: selectedPlanObj, planType:"",couponCode: "", successUrl:"", cancelUrl:"", recipientSubscriber: {}} Initialize the Stripe payment
initPaypalPayment options(object), options={argType: "options",selectedPlan: selectedPlanObj,planType: planType,couponCode: "", recipientSubscriber: {}, returnUrl: "",cancelUrl:""} Initialize the PayPal payment
initOmisePayment selectedPlan(object), planType(string) Initialize the Omise payment
initAdyenPayment selectedPlan(object), planType(string), AdyenModal(React Component), locale(string) Initialize Adyen Payment
initPaytrailPayment selectedPlan(object), ptions={selectedPlan: selectedPlanObj,planType: planType,couponCode: "", recipientSubscriber: {}, returnUrl: "",cancelUrl:""} Initialize the Paytrail payment
getAssetPlans storyId(string) Get Asset Subscription Plans
getSubscriberMetadata Get the Subscriber Metadata
setSubscriberMetadata subscriberMetadata(object), subscriberMetadata={"address": {
  "line1": "221B Bakers Street",
  "line2": "Near Watson Library",
  "city": "London",
  "state": "",

}, "phone_number": "007"}} | Update the Subscriber Metadata validateCoupon| selectedPlan(object), couponCode (string) | Validate coupon with plan cancelSubscription| subscriptionId(number) | Cancel a subscription getSubscription | -NA- | Gets the subscription groups provided by the publisher getSubscriptionForUser | -NA- | Gets the subscriptions of the current logged in user accessUpdated| accessObject(object) | Sets the current story access to redux store accessIsLoading| loading(boolean) | A boolean which holds true between the request for access of a story and its response

Notes :
  • This component uses AccessType Js internally
  • It uses the Access API from subtype for metering, the API works on firebase which uses thinmint cookie (set by qlitics) of the user to verify and keep track of visits
  • This component supports Razorpay, Stripe, PayPal and Omise payment options for now
  • It communicates to sketches where routes are in pattern /api/access/v1/*
  • Metered story has a pingback which is achieved by the use of navigator.sendBeacon if available or falls back to fetch, this is needed to update the count of the visited stories for a user
  • Access to story/asset is saved on the redux store under the keyword access which holds keys as story asset id and the access returned from the API as its value
  • subscriptions is the key in the store under which all the subscription groups created for the specified account are maintained
  • paymentOptions is the key under the store which has all the payment options created for the current AT account
//access object on store

access : {
  'c1f6c0d7-2829-4d31-b673-58728f944f82': {
        'data': {
          'isLoggedIn':true,
          'granted': false
          'grantReason': "SUBSCRIBER"
        }
    }
}

Example

import { AccessType } from "@quintype/components";

render() {
  return  <AccessType
                 enableAccesstype={enableAccesstype}
                 isStaging={isStaging}
                 accessTypeKey={accessTypeKey}
                 email={email}
                 phone={phone}
                 disableMetering={disableMetering}
                 prodHost="https://www.accesstype.com"
                 stagingHost="https://staging.accesstype.com"
                 accessTypeBkIntegrationId={accessTypeBkIntegrationId}
               >
                 {({ initAccessType, checkAccess, accessUpdated, accessIsLoading, validateCoupon, initRazorPayPayment, initStripePayment, initPaypalPayment, initPaytrailPayment,  getSubscriptionForUser, getSubscriberMetadata, setSubscriberMetadata }) => (
                   <div>
                     <PaymentCheckoutLayout
                       accessIsLoading={accessIsLoading}
                       accessUpdated={accessUpdated}
                       initAccessType={initAccessType}
                       checkAccess={checkAccess}
                       initRazorPayPayment={initRazorPayPayment}
                       initStripePayment={initStripePayment}
                       initPaypalPayment={initPaypalPayment}
                       initPaytrailPayment={initPaytrailPayment}
                       getSubscriptionForUser={getSubscriptionForUser}
                       getgetSubscriberMetadata={getgetSubscriberMetadata}
                       setSubscriberMetadata={setSubscriberMetadata}

                       {...this.props}
                     />
                   </div>
                 )}
               </AccessType>
}

...

const PaymentCheckoutLayout = (props) => {

 useEffect(() => {
    !global.AccessType && initAccessType(); // initialize accesstype
  }, []);

  ....

 checkout(plan = {}) {
  const paymentGateway = get(plan, ["supported_payment_providers", 0], "razorpay");

  if (paymentGateway === "razorpay") {
    return props.initRazorPayPayment(plan, "standard");
  }

  if (paymentGateway === "paypal") {
    const options = {
      selectedPlan: plan,
      planType: "standard",
      returnUrl: `${document.location.origin}/paypal-return-url`,
      cancelUrl: `${document.location.origin}/paypal-cancel-url`
    };
    return props.initPaypalPayment(options);
  }

 if (paymentGateway === "paytrail") {
    const options = {
      selectedPlan: plan,
      planType: "standard",
      returnUrl: `${document.location.origin}/paytrail-success.html`,
      cancelUrl: `${document.location.origin}/paytrail-cancel.html`
    };
    return props.initPaytrailPayment(options);
  }

  if (paymentGateway === "omise") {
    return props.initOmisePayment(plan, "standard");
  }

  if (paymentGateway === "stripe") {
    const options = {
      selectedPlan: plan,
      planType: "standard",
      successUrl: `${document.location.origin}/paypal-return-url`,
      cancelUrl: `${document.location.origin}/paypal-cancel-url`
    };
    return props.initPaypalPayment(options);
  }

  if (paymentGateway === "adyen") {
    const locale = get(this.props, ["config", "pagebuilder-config", "general", "accesstypeIntegration"]);
    // The AdyenModal component should accept two functions as props: `afterOpen` and `afterClose`
    // `afterOpen` will trigger the adyen payment.
    return this.props.initAdyenPayment(plan, "standard", AdyenModal, locale);
  }

....

 return (){

   <Button onClick={() => checkout(plan)}  disabled={isLoading}>
     {isLoading ? <Loader /> : "SUBSCRIBE"}
   </Button>
 }
}


PropTypes:
Name Type Required Description Default
children func Yes
email string No Email address of the user
phone number No Phone number of the user
isStaging bool No Specify if you are using the AccessType Staging
enableAccesstype bool Yes Load AccessType Script
accessTypeKey string Yes AccessType ACCOUNT_KEY
accessTypeBkIntegrationId string Yes AccessType BK_Integration_Id
prodHost string No AccessType production host url. Default value is "https://www.accesstype.com"
stagingHost string No AccessType staging host url. Default value is "https://staging.accesstype.com"
onATGlobalSet func No

View Source components/access-type.js, line 786