node package manager


SecurePay SecureFrame React component

A React component to register a credit card with SecurePay.


npm install secureframe-react


import SecureFrame from 'secureframe-react'

const Payment = props => (
    onSignPayment={subject => handleSignPayment(subject)}
    onPayment={payload => handlePayment(payload)}

The onSignPayment property is a callback that must return a promise that resolves with the SHA-1 fingerprint. The SecurePay Merchant ID and Transaction Password must be prepended to the plaintext and the result run through a SHA-1 digest. This would typically be performed on a server where the Transaction Password is securely stored.

function handleSignPayment (subject) {
  return fetch('/sign-payment', {
    method: 'POST',
    body: subject
  .then(response => response.json())
  .then(json => json.fingerprint)

The onPayment property is a callback that is triggered when the iframe posts a message to the React container (as described above). This is typically done when the customer completes the SecureFrame hosted payment form. The optional payload field contains data provided by the page handling the final POST of the payment form.