Components

AccessType

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

Constructor

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

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
getAssetPlans storyId(string) Get Asset Subscription Plans
validateCoupon selectedPlan(object), couponCode (string) Validate coupon with plan
cancelSubscription subscriptionId(number) Cancel a subscription
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, getSubscriptionForUser }) => (
                   <div>
                     <PaymentCheckoutLayout
                       accessIsLoading={accessIsLoading}
                       accessUpdated={accessUpdated}
                       initAccessType={initAccessType}
                       checkAccess={checkAccess}
                       initRazorPayPayment={initRazorPayPayment}
                       initStripePayment={initStripePayment}
                       initPaypalPayment={initPaypalPayment}
                       getSubscriptionForUser={getSubscriptionForUser}
                       {...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 === "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);
  }

....

 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"

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