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

  "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>
 }
}