-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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
thinmintcookie (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.sendBeaconif 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 -
subscriptionsis the key in the store under which all the subscription groups created for the specified account are maintained
-paymentOptionsis 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 771 - -
- -