https://github.com/emschwartz/ripple-donate-widget

An embeddable widget for paying with Ripple.
https://github.com/emschwartz/ripple-donate-widget

Last synced: 3 months ago
JSON representation

An embeddable widget for paying with Ripple.

• Host: GitHub
• URL: https://github.com/emschwartz/ripple-donate-widget
• Owner: emschwartz
• Created: 2014-01-31T08:31:31.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-02-01T01:27:03.000Z (over 10 years ago)
• Last Synced: 2024-04-12T01:47:11.618Z (3 months ago)
• Size: 387 KB
• Stars: 9
• Watchers: 1
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Lists

• awesome-xrpl - Ripple Checkout
• awesome-ripple - Ripple Checkout

README

        
ripple-checkout

===============

An embeddable widget for paying with Ripple.

See [http://emschwartz.github.io/ripple-checkout/](http://emschwartz.github.io/ripple-checkout/) for a live demo.

### How to include the widget in a webpage:

Copy the `ripple-checkout.js` script into your page's directory and include the following elements in the page:

```html



  var checkout = RippleCheckout({

    dst_address: 'rLpq5RcRzA8FU1yUqEPW4xfsdwon7casuM',

    server_url: 'wss://s_west.ripple.com'

  });

  checkout.addButton({

    dst_amount: {

      value: '10',

      currency: 'XRP',

      issuer: '' // Issuer can be left blank or specified for non-XRP currencies

    },

    dst_tag: Math.floor(Math.random() * 4294967294),

    // button_type: 'pay', // Defaults to 'pay', other option is 'donate'

    // dom_id: 'ripple-checkout', // Defaults to 'ripple-checkout'

    callback: function(err, confirmed_transaction) {

      if (err) {

        alert('Error: \n\n' + err);

      } else {

        alert('Transaction Confirmed: \n\n' + JSON.stringify(confirmed_transaction));

      }

    }

  });

```

### How it works:

Clicking on the button will direct the user to a `ripple-client` page with a pre-filled payment form. 

The widget uses a WebSocket connection to listen to the Ripple Network transaction stream. Once the transaction has been processed and the funds have been confirmed in the `dst_address` account, the `callback` function registered with `.addButton({...})` will be called with the details of the transaction.