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/