Using with React

This page describes how you can install and use the Stable Pay widget on your code from a React project.
Usage
Enable cryptocurrency payments and donations in your site by either:
Using the Widget Component Library by installing our NPM Package in your React App. (Read how to install Here) -- OR --
Using our Embeddable Widget in your site using HTML/JavaScript. (Read our Docs for more information)
Installing
Using npm:
  npm install stablepay-widget
Using yarn:
   yarn add stablepay-widget
Example
Predefined Widget Button:
import React from 'react';
import { WidgetButton } from 'stablepay-widget';
​
const Checkout = () => {
    const payload = {
        type: 'Payment',
        source: {
            name: 'Your Store',
            address: '0x0...'
        },
        amount: {
            total: '9.99'
        },
        callbackURL: 'https://yourstore.com/checkout',
        theme: 'standard'
    };
​
    return <WidgetButton {...payload} />;
};
​
export default Checkout;
Custom Widget Button:
import React from 'react';
import { Widget } from 'stablepay-widget';
​
const Checkout = () => {
    const payload = {
        type: 'Payment',
        source: {
            name: 'Your Store',
            address: '0x0...'
        },
        amount: {
            total: '9.99'
        },
        callbackURL: 'https://yourstore.com/checkout',
        theme: 'custom'
    };
​
    return (
        <button onClick={() => Widget.open(payload)}>Pay With StablePay</button>
    );
};
​
export default Checkout;
For more information, visit:https://stablepay.io/​
Smart URLs
Last updated 2 years ago