docs

References

Sharegroop Widget

Our widget is used to load our components.

Usages samples :

// First, include the widget into the pages where you need to load our components

// sandbox
<script src="https://widget.sandbox.sharegroop.com/widget.js"></script>
  
// production
<script src="https://widget.sharegroop.com/widget.js"></script>

// Then you can use the javascript ShareGroop namespace to call the following functions :

// to init Captain component with a config object
ShareGroop.initCaptain(config);

// to mount Captain when desired, with an optional selector (default in config)
ShareGroop.mount(optionalSelector);

// one-liner to init and mount Captain
ShareGroop.initCaptain(config).mount(optionalSelector);

// to trigger form validation and payment 
// (usefull when using your own payment button)
ShareGroop.pay();

// to init and mount the Link component
ShareGroop.initLink(config);

// to init and mount the Help component
ShareGroop.initHelp(config);

Captain component

Component configuration :

key type default description
selector string "#sharegroop-captain" the html element javascript selector to load the widget into
publicKey string required your platform public key
locale string en desired text langage
orderId string none id of the new order previously created via API
order object ignored if orderId key the order configuration, see below
events object none your events callbacks definitions, see below

  • order configuration object :

    key type default description
    amount integer required order total amount in cents
    ux string "collect" "collect" or "picking", the sharing user experience
    trackId string none your internal reference
    email string none captain email, if not provided, will be filled by captain from UI
    firstName string none captain first name, if not provided, will be filled by captain from UI
    lastName string none captain last name, if not provided, will be filled by captain from UI
    items array none a list of order items displayed to co-buyers

  • order itemsconfiguration array :

    key type default description
    amount integer required collect: total item amount in cents
    picking: amount of one unit
    name string required item name
    description string none item description
    quantity integer 1 item quantity, useful for picking UX
    trackId string none your internal reference

  • events configuration object :

    key description
    onReady is fired when the secure handshake is established and content has been successfully loaded into the DOM  
    onInvalid is fired when .pay() method has been called and captain's form is invalid. The payment is not triggered and inputs with error are indicated to the end-user.
    onValid is fired when the captain's form is valid. .pay() method can be call to trigger payment.
    onError is fired when the captain's payment has not been successfully processed by ShareGroop. An error message is displayed to end-user.
    onValidated is fired when the captain's payment has been successfully processed by ShareGroop. Provide data that can be used for your next steps (see below).

onValidated data object sample :

{
    order: "ord_...", // the created sharegroop order id
    auth: "auth_...", // the captain authorization id
    status: "authorized" // or "captured" // the captain authorization status
}

Full javascript Captain configuration sample :

ShareGroop.initCaptain({
    "selector": "#sharegroop-captain",
    "publicKey": "pk_...",
    "locale": "en",
    "orderId": "ord_..."
    "order": {
       "email": "captain@email.com",
       "ux": "collect",
       "firstName": "John",
       "lastName": "Doe",
       "trackId": "TRACK-1",
       "amount": 10000,
       "currency": "EUR",
       "items": [
         {
           "trackId": "TRACK-A",
           "name": "Product A",
           "description": "Description A",
           "amount": 6000,
           "quantity": 1
         },
         {
           "trackId": "TRACK-A",
           "name": "Product A",
           "description": "Description A",
           "amount": 4000,
           "quantity": 1
         }
       ]
    },
    "events": {
      "onReady": function () {
        console.log('[captain] ready');
      },
      "onValidated": function (data) {
        console.log('[captain] validated', data);
      }
    }
});


Component configuration :

key type default description
selector string "#sharegroop-link" the html element javascript selector to load the widget into
publicKey string required your platform public key
orderId string required id of an existing order
locale string en desired text langage
events object none your events callbacks definitions. Only onReady is available here (see above) 

ShareGroop.initLink({
    "selector": "#sharegroop-link",
    "publicKey": "pk_...",
    "orderId": "ord_..."
    "locale": "en",    
    "events": {
      "onReady": function () {
        console.log('[link] ready');
      }
    }
});


Help component

Component configuration :

key type default description
selector string "#sharegroop-help" the html element javascript selector to load the widget into
publicKey string required your platform public key
locale string en desired text langage
events object none your events callbacks definitions. Only onReady is available here (see above)

Full javascript Help configuration sample :

ShareGroop.initHelp({
    "selector": "#sharegroop-help",
    "publicKey": "pk_...",
    "locale": "fr",    
    "events": {
      "onReady": function () {
        console.log('[help] ready');
      }
    }
});


API References

← Security →