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)
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( , document.getElementById('root'));
`
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
-
BankAccountNumberElement
- BankAccountTypeElement
- BankRoutingNumberElement
- CardElement
- CardCvvElement
- CardExpiryElement
- CardNumberElement
- ApplePayElement
- SamsungPayElement
- GooglePayElement
- PaypalElement###### withFramePayCardComponent (Card props)
- Framepay
-
CardElement
- CardCvvElement
- CardExpiryElement
- CardNumberElement###### withFramePayBankComponent (Bank props)
- Framepay
-
BankAccountNumberElement
- BankAccountTypeElement
- BankRoutingNumberElement###### withFramePayApplePayComponent (Apple Pay props)
- Framepay
-
ApplePayElement###### withFramePaySamsungPayComponent (Samsung Pay props)
- Framepay
-
SamsungPayElement###### withFramePayGooglePayComponent (Google Pay props)
- Framepay
-
GooglePayElement###### withFramePayPaypalComponent (Paypal props)
- Framepay
-
PaypalElement##### With FramePay (
withFramePay) 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 (
ref={node => this.formNode = node}
onSubmit={this.onSubmit}>
type="text"
name="firstName"
placeholder="First Name"
defaultValue={this.state.firstName}
onChange={(e) => this.setState({ firstName: e.target.value })}/>
type="text"
name="lastName"
placeholder="Last Name"
defaultValue={this.state.lastName}
onChange={(e) => this.setState({ lastName: e.target.value })}/>
);
}
}export default withFramePayCardComponent(MyCardPageComponent);
`##### Bank elements (
withFramePayBankComponent) 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 (
ref={node => this.formNode = node}
onSubmit={this.onSubmit}>
type="text"
name="firstName"
placeholder="First Name"
defaultValue={this.state.firstName}
onChange={(e) => this.setState({ firstName: e.target.value })}/>
type="text"
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
createToken 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
serve:e2e 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.