{"id":18998881,"url":"https://github.com/nathanstitt/payment-fields","last_synced_at":"2025-11-03T17:32:26.349Z","repository":{"id":25698902,"uuid":"104758818","full_name":"nathanstitt/payment-fields","owner":"nathanstitt","description":"React component for Braintree/Stripe/Square payment fields","archived":false,"fork":false,"pushed_at":"2023-01-04T06:41:49.000Z","size":3235,"stargazers_count":19,"open_issues_count":24,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T07:10:13.339Z","etag":null,"topics":["braintree","credit-card","react","square","stripe"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nathanstitt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-25T14:14:13.000Z","updated_at":"2025-01-23T08:38:50.000Z","dependencies_parsed_at":"2023-01-14T04:30:21.492Z","dependency_job_id":null,"html_url":"https://github.com/nathanstitt/payment-fields","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Fpayment-fields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Fpayment-fields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Fpayment-fields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Fpayment-fields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathanstitt","download_url":"https://codeload.github.com/nathanstitt/payment-fields/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250261625,"owners_count":21401524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["braintree","credit-card","react","square","stripe"],"created_at":"2024-11-08T17:48:15.690Z","updated_at":"2025-11-03T17:32:26.290Z","avatar_url":"https://github.com/nathanstitt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Integrate Braintree/Stripe/Square payment fields\n\nA React component to make integrating [Braintree's Hosted Fields](https://developers.braintreepayments.com/guides/hosted-fields/), [Stripe's Elements](https://stripe.com/docs/elements) and [Square's Payment Form](https://docs.connect.squareup.com/articles/adding-payment-form) easier.\n\nCare is taken so the API is (nearly) identical across the vendors.\n\nThis is intended for a Saas that allows customers to use their own payment processor, as long as it uses the newish \"hosted iframe\" approach.\n\nfurther docs to be written\n\n[![Build Status](https://travis-ci.org/nathanstitt/payment-fields.svg?branch=master)](https://travis-ci.org/nathanstitt/payment-fields)\n\nSee [demo site](https://nathanstitt.github.io/payment-fields/) for a working example. It renders [demo.jsx](demo.jsx)\n\n## Example\n\nNote: methods are removed for brevity and this isn't fully copy \u0026 pastable.  For a working example see [demo.jsx](demo.jsx)\n\n```javascript\n\nimport React from 'react';\nimport PaymentFields from 'payment-fields';\nimport PropTypes from 'prop-types';\n\nclass PaymentForm extends React.PureComponent {\n\n    static propTypes = {\n        vendor: PropTypes.oneOf(['Square', 'Stripe', 'Braintree']).isRequired,\n        authorization: PropTypes.String.isRequired,\n    }\n\n    render() {\n      return (\n        \u003cPaymentFields\n            vendor={this.props.vendor}\n            authorization={this.props.authorization}\n            onError={this.onError}\n            onValidityChange={(ev) =\u003e this.setState({ valid: ev.isValid })}\n            onCardTypeChange={(c)  =\u003e this.setState({ card: c.brand })}\n            onReady={this.onFieldsReady}\n            styles={{\n                base: {\n                    'font-size': '24px',\n                    'font-family': 'helvetica, tahoma, calibri, sans-serif',\n                    padding: '6px',\n                    color: '#7d6b6b',\n                },\n                focus: { color: '#000000' },\n                valid: { color: '#00bf00' },\n                invalid: { color: '#a00000' },\n            }}\n        \u003e\n            \u003ch4\u003eForm is Valid: {this.state.isValid ? '👍' : '👎'}\u003c/h4\u003e\n            \u003cp\u003eCard number ({this.state.card}):\u003c/p\u003e\n            \u003cPaymentFields.Field\n                type=\"cardNumber\"\n                placeholder=\"•••• •••• •••• ••••\"\n                onBlur={this.logEvent}\n                onFocus={this.logEvent}\n                onValidityChange={this.onNumberValid}\n                onChange={this.logEvent}\n            /\u003e\n            Date: \u003cPaymentFields.Field type=\"expirationDate\" /\u003e\n            CVV: \u003cPaymentFields.Field type=\"cvv\" /\u003e\n            Zip: \u003cPaymentFields.Field type=\"postalCode\" /\u003e\n        \u003c/PaymentFields\u003e\n     );\n  }\n\n}\n\n```\n\n## PaymentFields Component\n\nProps:\n * vendor: Required, one of Braintree, Square, or Stripe\n * authorization: Required, the string key that corresponds to:\n   * Braintree: calls it \"authorization\"\n   * Square: \"applicationId\"\n   * Stripe: the Api Key for Stripe Elements\n * onReady: function called once form fields are initialized and ready for input\n * onValidityChange: function that is called whenever the card validity changes.  May be called repeatedly even if the validity is the same as the previous call.  Will be passed a single object with a `isValid` property.  The object may have other type specific properties as well.\n * onCardTypeChange: Called as soon as the card type is known and whenever it changes.   Passed a single object with a `brand` property.  The object may have other type specific properties as well.\n * onError: A function called whenever an error occurs, typically during tokenization but some vendors (Square at least) will also call it when the fields fail to initialize.\n * styles: A object that contains 'base', 'focus', 'valid', and 'invalid' properties.   The `PaymentFields` component will convert the styles to match each vendor's method of specifying them and attempt to find the lowest common denominator.  `color` and `font-size` are universally supported.\n * passThroughStyles: For when the `styles` property doesn't offer enough control.  Anything specified here will be passed through to the vendor specific api in place of the `styles`.\n * tagName: which element to use as a wrapper element.  Defaults to `div`\n * className: a className to set on the wrapper element, it's applied in addition to `payment-fields-wrapper`\n\n## PaymentFields.Field Component\n\nProps:\n * type: Required, one of 'cardNumber', 'expirationDate', 'cvv', 'postalCode' Depending on fraud settings, some vendors do not require postalCode.\n * placeholder: What should be displayed in the field when it's empty and is not focused\n * className: a className to set on the placeholder element, some vendors will replace the placeholder with an iframe, while others will render the iframe inside the placeholder.  All vendors retain the className property though so it's safe to use this for some styling.\n * onValidityChange: A function  called when the field's validity changes.  Like the onValidityChange on the main PaymentFields wrapper, may be called repeatedly with the same status\n * onFocus: A function called when the field is focused.  Will be called with the vendor specific event\n * onBlur:  A function called when the field loses focus.  Will be called with the vendor specific event, as well as a `isValid` property that indicates if the field is valid, and `isPotentiallyValid` which is set if the input is possibily valid but still incomplete.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanstitt%2Fpayment-fields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathanstitt%2Fpayment-fields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanstitt%2Fpayment-fields/lists"}