react-recurly-modal

How to use

Make sure to include the recurly api

1<script src="https://js.recurly.com/v4/recurly.js" async></script>

Sample Usage

1import React from 'react';
2import { render } from 'react-dom';
3import ReactRecurlyModal from './index';
4
5class MyComponent extends React.Component {
6
7    constructor(props) {
8        super(props);
9        this.onSubmit = this.onSubmit.bind(this);
10        this.openModal = this.openModal.bind(this);
11        this.closeModal = this.closeModal.bind(this);
12
13        this.state = {
14            open: true,
15            errorMessage: null,
16        }
17    }
18
19    // Open the modal
20    openModal() {
21        this.setState({
22            open: true,
23        });
24    }
25
26    // Close the modal
27    closeModal() {
28        this.setState({
29            open: false,
30        });
31    }
32
33    // Handle the submission of the form
34    onSubmit(token) {
35        console.log(token);
36
37        // Perform validation and any checks
38
39        this.setState({
40            errorMessage: "Failed to process request"
41        });
42    }
43
44    render() {
45        return (
46            <div>
47                <h2>Card Details</h2>
48
49                <input type="button" onClick={this.openModal} value={"Update Card Details"} />
50
51                <ReactRecurlyModal
52                    open={this.state.open}
53                    recurlyPublicKey={"your-recurly-public-key"}
54                    headerBackgroundColor={"#098dd5"}
55                    headerColor={"#fff"}
56                    buttonStyle={{ backgroundColor: "#098dd5", borderColor: "#098dd5" }}
57                    customerEmail={"demo@website.com"}
58                    customerFirstname={"Firstname"}
59                    customerLastname={"Lastname"}
60                    onSubmit={this.onSubmit}
61                    buttonLabel={"Upgrade Account"}
62                    onCancel={this.closeModal}
63                    errorMessage={this.state.errorMessage}
64                />
65            </div>
66        )
67    }
68}
69
70render(
71    <MyComponent />,
72    document.getElementById("root")
73);