minipay-react v1.0.2
minipay-react
Installation
npm install --save minipay-react
Demo
Test Mode
In order to test your integration, Minipay provides a completely separate testing mode. This is a testing environment that simulates creating real objects without the risk of affecting real transactions or moving actual money.
Test mode accounts are entirely separate from production accounts, so you'll need to create a test account the same way you created a production account. We recommend using test mode to build the integration and replace your test keys with live keys when you’re ready to go live.
Quick Start Guide
1. Initial setup
Sign up for Minipay and register a new Merchant account. Make sure to create your new project.
2. Store your secrets
You can find your secret API key and project identifier on the Settings page in the Minipay dashboard.
3. Connect your bank
Connect us with your bank in order to receive payments from your subscribers. You can link it on the Settings page in the Minipay dashboard.
4. Create a plan
Create a plan to offer to subscribers on the Plans page in the Minipay dashboard.
5. Connect with your first subscriber
Now that your account is all setup, we can start handling your subscribers. When your customer is ready to link your service with Minipay, request that they log in to their Minipay account. We'll be using their authorization token that comes back in the response to map their Minipay account to a custom user identifier that you provide. This way they only have to log into Minipay once.
import React, { Component } from 'react'
import { MinipayLogin } from 'minipay-react'
class ExampleLogin extends Component {
render() {
return (
<MinipayLogin
testModeEnabled={true} // Or false (for production environment)
onSuccess={(data) => {
// Save this token to state
console.log(data.token)
}}
onFailure={(error) => {
console.log(error)
}}
/>
)
}
}
6. Authorize your app on their account
With the authorization token that you just received, add your app to the list of their authorized apps.
Provide a custom user identifier in this request. It will allow Minipay to map future events to this subscriber's account without requiring a login each time. The plan identifier should match the plan that we created in an earlier step.
import React, { Component } from 'react'
import { MinipayAuthorizeApp } from 'minipay-react'
class ExampleAppAuthorization extends Component {
render() {
return (
<MinipayAuthorizeApp
customUserId='<your-custom-user-id>'
planId='<your-plan-id>'
minipayToken='<token-from-state>'
testModeEnabled={true} // Or false (for production environment)
onSuccess={(data) => {
// Whether or not the app auth was successful
console.log(data.response.successful)
}}
onFailure={(error) => {
console.log(error)
}}
/>
)
}
}
7. Post a usage event
Now, whenever you want to record a usage event from this subscriber, simply post a request to the Minipay service that includes their custom user identifier and plan identifier that they're subscribed to. We'll handle the rest.
import React, { Component } from 'react'
import { MinipayPostUsageEvent } from 'minipay-react'
class ExamplePostUsageEvent extends Component {
render() {
return (
<MinipayPostUsageEvent
customUserId='<your-custom-user-id>'
planId='<your-plan-id>'
apiKey='<your-api-key>'
testModeEnabled={true} // Or false (for production environment)
onSuccess={(data) => {
// Whether to allow or reject access to your services
console.log(data.response.authorized)
}}
onFailure={(error) => {
console.log(error)
}}
/>
)
}
}
When Minipay records a usage event, it will attempt to charge the subscriber's account. The response will indicate whether or not the authorization was successful. In the successful case, you should allow the subscriber's access to your services. In the failure case, you should prevent their access.
Please consult our docs for more information.
License
The minipay-react package is available under the MIT license. See the LICENSE file for more info.