PayPal Smart Module

Enable payments using PayPal Smart Buttons. This works by integrating with PayPal APIs to generate a single use PayPal nonce, which can be used by your server as a payment instrument with the BR-DGE REST API.

Add the PayPal Smart Module to your App

After you have set up the Comcarde JavaScript Client, you can add the following to your website source.

<script src="https://sandbox-assets.comcarde.com/web/v2/js/paypal-smart.min.js"></script>

<script src="https://assets.comcarde.com/web/v2/js/paypal-smart.min.js"></script>

Next, insert a placeholder element for the PayPal Button to target and load. In the example below we have chosen the id of paypal-button. This is the default container id that the module will use.

<div id="paypal-button"></div>

If you wish to use another id attribute, this is an option you can choose as part of the configuration and, as shown above, is set to the default value of paypal-button. You can set this to any id attribute you require, but this must be passed into the options of the paypalSmart.create method.

Example:

Default Container ID

<div id="paypal-button"></div>

comcarde.paypalSmart.create({
  client: clientInstance
}, ...

Custom Container ID

<div id="my-paypal-id"></div>

comcarde.paypalSmart.create({
  client: clientInstance,
  containerId: 'my-paypal-id'
},  ...

Finally, add the PayPal Smart functionality to your Comcarde JavaScript Client:

comcarde.client.create(
  {
    authorization: client - api - key, // your client API Key
  },
  function (clientErr, clientInstance) {
    // optionally configure other plugin modules...

    /*
     * Create a paypal-smart plugin module component. This example uses the default
     * container id attribute of paypal-button
     */
    comcarde.paypalSmart.create(
      {
        client: clientInstance,
        currency: 'GBP', // currency code of the amount
      },
      createOrder,
      onApprove,
      onCancel,
      onError
    )

    /*
     * Callback promise allowing you to provide checkout data after your user clicks the
     * paypal button
     */
    function createOrder() {
      return new Promise((resolve, reject) => {
        resolve({
          // amount of the transaction in the lowest denomination of the given currency.
          amount: 1234,
          // unique customer order code to represent the transaction.
          customerOrderCode: 'abc-1234',
        })
      })
    }

    /*
     * Callback method providing you with a nonce that can be used as a PayPal Payment
     * Instrument by your server.
     */
    function onApprove(nonce) {
      console.log('Got a PayPal nonce: ' + nonce)
    }

    /*
     * Callback method for when your user decides to cancel using PayPal
     */
    function onCancel(onCancelEvent) {
      console.log(onCancelEvent)
    }

    /*
     * Callback method for when an error is encountered
     */
    function onError(onErrorEvent) {
      console.error(onErrorEvent)
    }
  }
)