@paytheory/payments
React components and hooks for Pay Theory payments
Install
- payments has the following peer dependencies
- react
- react-dom
npm install --save @paytheory/payments @paytheory/tags react react-domUsage
Import
-
CreditCardProvider is a component where you provide configuration; it provides the necessary context for payment processing
-
CreditCardInput is a component that establishes the markup where the credit card input will appear
-
usePayTheory is a function that returns the context needed for working with payments, it provides
- loading - a boolean state value that changes to false once Pay Theory is ready
- valid - can be undefined, true or false based on what has been entered
- error - contains an error message if not false
- mount - a function which will mount the payment input (must be called after CreditCardInput has been rendered)
- initTransaction - a function which accepts an optional buyerOptions object and triggers card tokenization and authorization
import React, { useState, useEffect } from 'react'
import {
CreditCardProvider,
CreditCardInput,
usePayTheory
} from '@paytheory/payments'Configure
-
payments requires configuration of:
- a Pay Theory API key
- a Pay Theory Client ID
- an amount in cents
- optionally styles you want applied
const api = 'pt-sandbox-c421a13e91d2594cc627cdd982edb5ed'
const client = 'IDvwtJwLdkja7CMk5oR6QNDk'
const styles = {
default: {
color: 'black',
fontSize: '14px'
},
success: {
color: '#5cb85c',
fontSize: '14px'
},
error: {
color: '#d9534f',
fontSize: '14px'
}
}
const WrappedApp = (props) => {
return (
<CreditCardProvider
apiKey={api}
client={client}
amount={props.amount}
styles={styles}
>
<App />
</CreditCardProvider>
)
}Process payments
-
to initialize the form mount() is called once
-
when the form is ready for submission call initTransaction and pass in optional buyerOptions
-
buyerOptions include
-
name - the name on the card
-
billing address composed of
- line1
- line2
- city
- region
- postal_code
- country
-
const App = (props) => {
const { loading, mount, initTransaction } = usePayTheory()
const [mounted, setMounted] = useState(false)
const [nameOnCard, setNameOnCard] = useState('')
useEffect(() => {
if (!loading && !mounted) {
mount()
setMounted(true)
}
}, [loading, mount, mounted])
return (
<form
onSubmit={(e) => {
e.preventDefault()
initTransaction({ name: nameOnCard })
}}
>
<input
type='text'
placeholder='name on card'
onChange={(e) => {
setNameOnCard(e.currentTarget.value)
}}
value={nameOnCard}
/>
<div>
<CreditCardInput />
</div>
<button />
</form>
)
}License
MIT © aron23