Add sandbox boolean

demo/src/PaymentPage.jsx

@@ -81,6 +81,7 @@ class PaymentPage extends React.Component {
 
     return (
       <SquarePaymentForm
+        sandbox={true}
         applicationId={APPLICATION_ID}
         locationId={LOCATION_ID}
         cardNonceResponseReceived={this.cardNonceResponseReceived}

docs/components/SquarePaymentForm.md

@@ -32,6 +32,7 @@ Please view the [Payment Form Data Models](https://docs.connect.squareup.com/api
 |locationId|string|<b>Required for all features</b><br/><br/>Identifies the location of the merchant that is taking the payment. Obtained from the Square Application Dashboard - Locations tab.|
 |methodsSupported|(methods: SqMethods) => void||
 |paymentFormLoaded|() => void|Invoked when payment form is fully loaded|
+|sandbox|boolean|Enables Sandbox mode<br/><br/>**Default Value:** `false`|
 |shippingContactChanged|(shippingContact: SqContact, done: ({}: {}) => {}) => void|Invoked when requestShippingAddress is true in PaymentRequest and the buyer selects a shipping address in the Apple Pay sheet or enters a new shipping address.|
 |shippingOptionChanged|(shippingOption: SqShippingOption, done: ({}: {}) => {}) => void|Invoked when the buyer selects a shipping option in the Apple Pay sheet.|
 |unsupportedBrowserDetected|() => void|Invoked when the payment form is hosted in an unsupported browser|

docs/paymentform.md

@@ -43,7 +43,12 @@ import 'react-square-payment-form/lib/default.css'
 
 The `SquarePaymentForm` is a wrapper that loads the SqPaymentForm JS library. It does not render anything on its own.
 
-You will need to provide the `applicationId`, `locationId`, `onCardNonceResponseRecieved`, and `createVerificationDetails`. `onCardNonceResponseRecieved` will return errors for invalid credit cards.
+You will need to provide the the following fields:
+* `applicationId` with your **Sandbox Application ID**
+* `locationId` with your **Sandbox Location ID**
+* `sandbox` with **true**. This is required in addition to using your sandbox IDs.
+* `onCardNonceResponseRecieved`
+* `createVerificationDetails`
 
 ```
 class PaymentPage extends React.Component {
@@ -88,6 +93,7 @@ class PaymentPage extends React.Component {
         <h1>Payment Page</h1>
 
         <SquarePaymentForm
+          sandbox={true}
           applicationId={SANDBOX_APPLICATION_ID}
           locationId={SANDBOX_LOCATION_ID}
           cardNonceResponseReceived={this.cardNonceResponseReceived}
@@ -168,3 +174,10 @@ Fill in the form with the following test credit card information and click the "
 * **CVV**: any three non-consecutive numbers
 * **Expiration Date**: any month and year in the future
 * **Postal Code**: 94103
+
+## 8. Using the form in production
+
+If you are ready to use the payment form in production, you will need to do the following:
+1. Remove the `sandbox` flag from the props
+2. Replace your sandbox application ID with your production application ID
+3. Replace your sandbox location ID with your production location ID

src/components/SquarePaymentForm.tsx

@@ -23,6 +23,8 @@ export interface SquarePaymentFormProps {
   inputStyles?: {}[];
   /** Internal variable: used for logs */
   apiWrapper: string;
+  /** Enables Sandbox mode */
+  sandbox: boolean;
 
   /** <b>Required for all features</b><br/><br/>Invoked when payment form receives the result of a nonce generation request. The result will be a valid credit card or wallet nonce, or an error.*/
   cardNonceResponseReceived: (errors: [SqError], nonce: string, cardData: SqCardData, buyerVerificationToken?: string) => void;
@@ -76,6 +78,7 @@ class SquarePaymentForm extends React.Component<SquarePaymentFormProps, State> {
   static defaultProps = {
     formId: 'sq-payment-form',
     apiWrapper: 'reactjs/0.2.1',
+    sandbox: false,
     inputStyles: [{
       fontSize: '16px',
       fontFamily: 'Helvetica Neue',
@@ -124,7 +127,11 @@ class SquarePaymentForm extends React.Component<SquarePaymentFormProps, State> {
       return
     }
     const script = document.createElement('script')
-    script.src = 'https://js.squareup.com/v2/paymentform'
+    if (this.props.sandbox) {
+      script.src = 'https://js.squareupsandbox.com/v2/paymentform'
+    } else {
+      script.src = 'https://js.squareup.com/v2/paymentform'
+    }
     script.onload = function() {
       onSuccess && onSuccess()
     }