<head>
  <script src="https://unpkg.com/@prestashopcorp/billing-cdc@0.0.7/dist/bundle.js"></script>
</head>
<body>
  <div id="ps-billing"></div>
  <div id="ps-modal"></div>
  <script>
    const context = {
      // see bellow information about context
    }
    window.psBilling.initialize(context, '#ps-billing', '#ps-modal', (type, data) => {
      // Event hook listener
      switch(type) {
        case window.psBilling.EVENT_HOOK_TYPE.SUBSCRIPTION_UPDATED:
          console.log('Sub updated', data);
          break;
        case window.psBilling.EVENT_HOOK_TYPE.SUBSCRIPTION_CANCELLED:
          console.log('Sub cancelled', data);
          break;
      }
    });
  </script>
</body>

The methods initialize takes 3 parameters :

context (object): which giv toe the library some information about the shop
billingDiv (string): the id of the div where the billing component should appear
modalDiv (string): the id of the div where the modal component should appear

Contexte

Here is the data you need to pass through the context variable

Attribut	Type	Value	Example
`emailSupport`	`string`	Email to contact yout support (required)	support@your-company.com
`moduleName`	`string`	Technical name of your module (required)	ps_metrics
`versionModule`	`string`	Module's version	0.0.1
`versionPs`	`string`	Prestashop's version	1.7.8
`accountApi`	`string`	API to retrieve your Prestashop Account. You can get it dynamically in `window.contextPsAccounts.adminAjaxLink` (required)	https://my-shop.com/ps-admin/index.php?controller=AdminAjaxPsAccounts&ajax=1&token=1247657657657
`shop.uuid`	`string`	Uuid of the merchant shop (required)	Mn6ou86uATRBrtYjFUnkZf6Fc5e2
`i18n.isoCode`	`string`	Current lang of the merchant (required)	fr
`user.createdFromIp`	`string`	Merchant ip address (required)	12.34.56.78
`user.email`	`string`	Merchant's email (required)	user@mail.com

Here is a full example :

{
  "emailSupport": "support@your-company.com",
  "moduleName": "ps_metrics",
  "versionModule": "0.0.1",
  "versionPs": "1.7.8",
  "accountApi": "https://my-shop.com/ps-admin/index.php?controller=AdminAjaxPsAccounts&ajax=1&token=1247657657657",
  "shop": {
    "uuid": "Mn6ou86uATRBrtYjFUnkZf6Fc5e2"
  },
  "i18n": {
    "isoCode": "fr"
  },
  "user": {
    "createdFromIp": "12.34.56.78",
    "email": "user@mail.com"
  }
}

Frameworks

Use it with Vue2

import Vue from 'vue';
import { CustomerComponent, ModalContainerComponent, EVENT_HOOK_TYPE } from "@prestashopcorp/billing-cdc/dist/bundle.umd";

Vue.component('app', {
    data: function () {
        return {
          billingContext: window.psBillingContext,
          modalType: '',
        }
    },
    template: `<template>
                <div>
                  <!-- You should add PsAccount: https://www.npmjs.com/package/prestashop_accounts_vue_components -->
                  <PsAccounts>
                      ...
                  </PsAccounts>
                  <ps-billing-customer
                      v-if="billingContext.user.email"
                      ref="psBillingCustomerRef"
                      :context="billingContext"
                      :onOpenModal="openBillingModal"
                  />
                  <ps-billing-modal
                    v-if="modalType !== ''"
                    :context="billingContext"
                    :type="modalType"
                    :onCloseModal="closeBillingModal"
                    :onEvent
                  />
                </div>
              </template>`,
    components: {
      PsBillingCustomer: CustomerComponent.driver('vue', Vue),
      PsBillingModal: ModalContainerComponent.driver('vue', Vue),
    },
    methods: {
      openBillingModal(type, data) {
        this.modalType = type;
        this.billingContext = { ...billingContext, ...data };
      },
      closeBillingModal(data) {
        this.modalType = '';
        this.$refs.psBillingCustomerRef.parent.updateProps({
            context: {
                ...this.context,
                ...data
            }
        });
      },
      eventHookHandler(type, data) {
        switch(type) {
          case EVENT_HOOK_TYPE.SUBSCRIPTION_UPDATED:
            // Do what you want to do on sub update
            break;
          case EVENT_HOOK_TYPE.SUBSCRIPTION_CANCELLED:
            // Do what you want to do on sub cancel
            break;
          }
        }
      }
    }
});

var vm = new Vue({
    el: '#container'
});

FAQs

What is @prestashopcorp/billing-cdc?

Is @prestashopcorp/billing-cdc popular?

Is @prestashopcorp/billing-cdc well maintained?

Package last updated on 20 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@prestashopcorp/billing-cdc

Prestashop Billing Component

Use the Prestashop Billing Component

Using the CDN

Contexte

Frameworks

Use it with Vue2

Related posts

PyPI Now Supports iOS and Android Wheels for Mobile Python Development

Create React App Officially Deprecated Amid React 19 Compatibility Issues