@paytheory/payments NPM

@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-dom

Usage

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>
    )
}