A React wrapper for Rebilly's FramePay offering out-of-the-box support for Redux and other common React features
npm install @rebilly/framepay-react
> React components for FramePay.js
Supported: React 14 to 19.
This package is a wrapper for FramePay offering out-of-the-box support for Redux and other common React features.
FramePayProvider)withFramePay) HOCwithFramePayCardComponent) HOCwithFramePayBankComponent) HOC
yarn add @rebilly/framepay-react
Or using NPM:
npm install @rebilly/framepay-react --save
$3
> The example described in this readme can be found here (CodeSandbox)
#### The FramePay context (
)
FramePayProvider provides settings to the FramePay API. See Framepay.initialize for a list of all configuration options.`jsx harmony
// index.js
import React from 'react';
import { render } from 'react-dom';
import { FramePayProvider } from '@rebilly/framepay-react';import MyCardPageComponent from './MyCardPageComponent';
const App = () => {
return (
);
};
render(
`
Define configuration parameters as attributes on the provider tag.
html
publishableKey="pk_sandbox_1234567890"
`#### Setting up your payment form
###### WARNING
Please, don't implementing the unmount functionality, use the examples.
The react lifecycle methods already implemented in the library.
###### withFramePay (All props)
- Framepay - FramePay's namespace
-
-
-
-
-
-
-
-
-
-
- ###### withFramePayCardComponent (Card props)
- Framepay
-
-
-
- ###### withFramePayBankComponent (Bank props)
- Framepay
-
-
- ###### withFramePayApplePayComponent (Apple Pay props)
- Framepay
-
###### withFramePaySamsungPayComponent (Samsung Pay props)
- Framepay
-
###### withFramePayGooglePayComponent (Google Pay props)
- Framepay
-
###### withFramePayPaypalComponent (Paypal props)
- Framepay
-
##### With FramePay (
) HOC
This simple FramePay HOC is used to provide the Framepay API in your component. It is most commonly used in combination with multiple payment methods.- Payment cards and ACH (CodeSandbox)
- Payment cards and ACH Short version (CodeSandbox)
- Alternative methods (Bitcoin) (CodeSandbox)
##### Card elements (
withFramePayCardComponent) HOCWrapper for the payment card features.
`jsx harmony
// MyCardPageComponent.js
import React from 'react';
import { withFramePayCardComponent } from '@rebilly/framepay-react';class MyCardPageComponent extends React.Component {
constructor(props) {
super(props);
this.formNode = null;
this.state = { firstName: '', lastName: '' };
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(e) {
e.preventDefault();
// @see https://www.rebilly.com/docs/dev-docs/framepay-global-reference/#framepay.createtoken
this.props.Framepay.createToken(
this.formNode,
{ billingAddress: { ...this.state } }
)
.then(data => alert(JSON.stringify(data, null, 2)))
.catch(err => alert(JSON.stringify(err, null, 2)));
}
render() {
return (
onSubmit={this.onSubmit}>
name="firstName"
placeholder="First Name"
defaultValue={this.state.firstName}
onChange={(e) => this.setState({ firstName: e.target.value })}/>
name="lastName"
placeholder="Last Name"
defaultValue={this.state.lastName}
onChange={(e) => this.setState({ lastName: e.target.value })}/>
);
}
}export default withFramePayCardComponent(MyCardPageComponent);
`##### Bank elements (
) HOC
Wrapper for the ACH features.
`jsx harmony
import React from 'react';
import { withFramePayBankComponent } from '@rebilly/framepay-react';class MyBankPageComponent extends React.Component {
constructor(props) {
super(props);
this.formNode = null;
this.state = { firstName: '', lastName: '' };
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(e) {
e.preventDefault();
// @see https://www.rebilly.com/docs/dev-docs/framepay-global-reference/#framepay.createtoken
this.props.Framepay.createToken(
this.formNode,
{ billingAddress: { ...this.state } }
)
.then(data => alert(JSON.stringify(data, null, 2)))
.catch(err => alert(JSON.stringify(err, null, 2)));
}
render() {
return (
onSubmit={this.onSubmit}>
name="firstName"
placeholder="First Name"
defaultValue={this.state.firstName}
onChange={(e) => this.setState({ firstName: e.target.value })}/>
name="lastName"
placeholder="Last Name"
defaultValue={this.state.lastName}
onChange={(e) => this.setState({ lastName: e.target.value })}/>
);
}
}export default withFramePayBankComponent(MyBankPageComponent);
`$3
#### Initialization settings
The framepay-react package supports all the FramePay initialization settings.
See Framepay.initialize for all customizations.
jsx harmony
`
The CSS file is hosted on Rebilly's CDN and is found at this URL: https://cdn.rebilly.com/framepay/v1/rebilly.cssSee adding default element styles in FramePay's documentation for more details.
#### Create Token Parameters
The
method supports all FramePay arguments. See Framepay.createToken for more details.$3
The methods
withFramePay, withFramePayCardComponent and withFramePayBankComponent are higher-order-components. They can't be called directly from your render() method, so assign the generated component to a variable in the global scope before use.##### Incorrect
`jsx harmony
import * as React from 'react';
import {withFramePayCardComponent} from '@rebilly/framepay-react'class SomeComponent extends React.Component {
render(){
return(
{withFramePayCardComponent(MyCardComponent)}
)
}
}
`##### Correct
jsx harmony
import * as React from 'react';
import {withFramePayCardComponent} from '@rebilly/framepay-react'const MyCardElement = withFramePayCardComponent(MyCardComponent);
class SomeComponent extends React.Component {
render(){
return(
)
}
}
`$3
#### Manual preview
In order to manually preview the examples, use
command. It builds the project and starts the local server on the port 8000.#### How to run unit tests?
Unit tests can be run using the
test:unit command.#### How to run E2E tests?
- Ensure you are running the preview examples, otherwise all E2E tests will fail.
- Run one of the following commands:
-
test:e2e:pr - runs a smaller subset of E2E tests tests headlessly.
- test:e2e:post-merge - runs the complete set of E2E tests tests headlessly.
- test:e2e:open` - opens the cypress GUI, allowing you to interact with each test visually.