Nostalgic Perogi Monogramming

    @gr4vy/secure-fields-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Secure Fields for React

    NPM Version GitHub license

    Add Secure Fields in your React app.

    Use @gr4vy/secure-fields in a non-React application.

    Usage

    Via the command line, install this package as follows.

    npm install @gr4vy/secure-fields-react --save-prod
    # yarn add @gr4vy/secure-fields-react

    Get started

    To use Secure Fields, import the SecureFields Provider component and wrap your app with it, making sure you pass the necessary configuration props and any event handlers.

    const { SecureFields } = require(`@gr4vy/secure-fields-react`)
    // import { SecureFields } from (`@gr4vy/secure-fields-react)
    
    <SecureFields
      gr4vyId='[GR4VY_ID]'
      environment='sandbox'
      sessionId='[SESSION_ID]'
      debug
      font="Lato"
      onReady={(data) => console.log('Secure Fields loaded', data)}
      onCardVaultSuccess={() => console.log('Card tokenization successful')}
      onCardVaultFailure={() => console.error('Card tokenization failed')}
    >
      <Form />
    </SecureFields>

    Note: Replace [GR4VY_ID] and [SESSION_ID] with the ID of your instance and the Session ID obtained from calling the Checkout Sessions API.

    Prop Name Description
    gr4vyId Your Gr4vy ID.
    environment Your Gr4vy environment. Can be either sandbox or production.
    sessionId The Session ID.
    debug Enables / disables the debug mode.
    font Loads a custom font from Google Fonts to be used inside inputs. You can define the font family as well as styles or weights as a string (e.g. "Lato:400,600"). To use the loaded font, add the correct fontFamily property to the styles object when rendering fields.
    onReady An event handler that listens for Secure Fields to be securely loaded. It listens for the READY event and accepts a callback function.
    onCardVaultSuccess An event handler that listens for card data to be securely vaulted. It listens for the CARD_VAULT_SUCCESS event and accepts a callback function.
    onCardVaultFailure An event handler that listens for any failures when storing any card data. It listens for the CARD_VAULT_FAILURE event and accepts a callback function.

    Creating a form

    Within the SecureFields provider you can now create your own card form using each of the Secure Field components.

    Additionally, a useSecureFields hook is available to get the configured Secure Fields instance which can be used to submit() the card form, and check if debug is enabled or not.

    const {
      CardNumber,
      ExpiryDate,
      SecurityCode,
    } = require('@gr4vy/secure-fields-react')
    
    // Alternatively:
    // import {
    //   CardNumber,
    //   ExpiryDate,
    //   SecurityCode
    // } from ('@gr4vy/secure-fields-react')
    
    const Form = () => {
      const { secureFields } = useSecureFields()
    
      const handleSubmit = () => {
        secureFields.submit()
      }
    
      return (
        <>
          <label htmlFor="cc-number">Card number</label>
          <CardNumber />
    
          <label htmlFor="cc-expiry-date">Expiry date</label>
          <ExpiryDate />
    
          <label htmlFor="cc-security-code">Security code</label>
          <SecurityCode />
    
          <button onClick={handleSubmit}>Submit</button>
        </>
      )
    }

    Field Components

    The available secure fields components are CardNumber, ExpiryDate and SecurityCode. You can pass the following props to customize each of them.

    Prop Name Description
    placeholder Input placeholder text.
    styles An object of CSS rules to style the input inside the iframe. See Styles for more information.
    onBlur Attaches an event handler to the input, listening for the blur event. The data available in the passed callback includes an id representing the field type (e.g. expiryDate).
    onFocus Attaches an event handler to the input, listening for the focus event. The data available in the passed callback includes an id representing the field type (e.g. expiryDate).
    onInput Attaches an event handler to the input, listening for the input event. The data available in the passed callback includes an id representing the field type (e.g. expiryDate) and some useful card validation information, such as the current scheme (e.g. visa) and security code label (e.g. CVV).

    Keywords

    none

    Install

    npm i @gr4vy/secure-fields-react

    Homepage

    gr4vy.com

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    36.5 kB

    Total Files

    46

    Last publish

    Collaborators

    • luca-gr4vy
    • gr4vy!
    • douglaseggleton
    • cbetta