.gitignore

@@ -6,3 +6,4 @@ es
 lib
 *.log
 .vim
+.vscode/

examples/hooks/11-Custom-Checkout.js

@@ -0,0 +1,185 @@
+import React from 'react';
+import {loadStripe} from '@stripe/stripe-js';
+import {
+  PaymentElement,
+  useStripe,
+  CustomCheckoutProvider,
+  useCustomCheckout,
+  AddressElement,
+} from '../../src';
+
+import '../styles/common.css';
+
+const CustomerDetails = () => {
+  const {
+    phoneNumber,
+    updatePhoneNumber,
+    email,
+    updateEmail,
+  } = useCustomCheckout();
+
+  const handlePhoneNumberChange = (event) => {
+    updatePhoneNumber(event.target.value);
+  };
+
+  const handleEmailChange = (event) => {
+    updateEmail(event.target.value);
+  };
+
+  return (
+    <div>
+      <h3>Customer Details</h3>
+      <label htmlFor="phoneNumber">Phone Number</label>
+      <input
+        id="phoneNumber"
+        name="phoneNumber"
+        type="text"
+        autoComplete="off"
+        onChange={handlePhoneNumberChange}
+        value={phoneNumber || ''}
+      />
+      <label htmlFor="email">Email</label>
+      <input
+        id="email"
+        name="email"
+        type="email"
+        autoComplete="email"
+        onChange={handleEmailChange}
+        value={email || ''}
+      />
+    </div>
+  );
+};
+
+const CheckoutForm = () => {
+  const customCheckout = useCustomCheckout();
+  const [status, setStatus] = React.useState();
+  const [loading, setLoading] = React.useState(false);
+  const stripe = useStripe();
+
+  React.useEffect(() => {
+    const {confirmationRequirements} = customCheckout || {};
+    setStatus(
+      confirmationRequirements && confirmationRequirements.length > 0
+        ? `Missing: ${confirmationRequirements.join(', ')}`
+        : ''
+    );
+  }, [customCheckout, setStatus]);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!stripe || !customCheckout) {
+      return;
+    }
+
+    const {canConfirm, confirm} = customCheckout;
+    if (!canConfirm) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      await confirm({return_url: window.location.href});
+      setLoading(false);
+    } catch (err) {
+      console.error(err);
+      setStatus(err.message);
+    }
+  };
+
+  const buttonDisabled =
+    !stripe || !customCheckout || !customCheckout.canConfirm || loading;
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <CustomerDetails />
+      <h3>Payment Dettails</h3>
+      <PaymentElement />
+      <h3>Billing Details</h3>
+      <AddressElement options={{mode: 'billing'}} />
+      <button type="submit" disabled={buttonDisabled}>
+        {loading ? 'Processing...' : 'Pay'}
+      </button>
+      {status && <p>{status}</p>}
+    </form>
+  );
+};
+
+const THEMES = ['stripe', 'flat', 'night'];
+
+const App = () => {
+  const [pk, setPK] = React.useState(
+    window.sessionStorage.getItem('react-stripe-js-pk') || ''
+  );
+  const [clientSecret, setClientSecret] = React.useState('');
+
+  React.useEffect(() => {
+    window.sessionStorage.setItem('react-stripe-js-pk', pk || '');
+  }, [pk]);
+
+  const [stripePromise, setStripePromise] = React.useState();
+  const [theme, setTheme] = React.useState('stripe');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setStripePromise(
+      loadStripe(pk, {
+        betas: ['custom_checkout_beta_1'],
+      })
+    );
+  };
+
+  const handleThemeChange = (e) => {
+    setTheme(e.target.value);
+  };
+
+  const handleUnload = () => {
+    setStripePromise(null);
+    setClientSecret(null);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <label>
+          CheckoutSession client_secret
+          <input
+            value={clientSecret}
+            onChange={(e) => setClientSecret(e.target.value)}
+          />
+        </label>
+        <label>
+          Publishable key{' '}
+          <input value={pk} onChange={(e) => setPK(e.target.value)} />
+        </label>
+        <button style={{marginRight: 10}} type="submit">
+          Load
+        </button>
+        <button type="button" onClick={handleUnload}>
+          Unload
+        </button>
+        <label>
+          Theme
+          <select onChange={handleThemeChange}>
+            {THEMES.map((val) => (
+              <option key={val} value={val}>
+                {val}
+              </option>
+            ))}
+          </select>
+        </label>
+      </form>
+      {stripePromise && clientSecret && (
+        <CustomCheckoutProvider
+          stripe={stripePromise}
+          options={{clientSecret, elementsOptions: {appearance: {theme}}}}
+        >
+          <CheckoutForm />
+        </CustomCheckoutProvider>
+      )}
+    </>
+  );
+};
+
+export default App;

package.json

@@ -62,7 +62,7 @@
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
     "@storybook/react": "^6.5.0-beta.8",
-    "@stripe/stripe-js": "^2.0.0",
+    "@stripe/stripe-js": "2.1.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",

scripts/publish

@@ -4,15 +4,18 @@ set -euo pipefail
 IFS=$'\n\t'
 
 RELEASE_TYPE=${1:-}
+PREID=${2:-}
 
 echo_help() {
   cat << EOF
 USAGE:
-    ./scripts/publish <release_type>
+    ./scripts/publish <release_type> <pre_id>
 
 ARGS:
     <release_type>
             A Semantic Versioning release type used to bump the version number. Either "patch", "minor", "major", "prepatch", "preminor", "premajor", or "prerelease".
+    <pre_id>
+            Adds an identifier to be used to prefix premajor, preminor, prepatch or prerelease version increments. Either "alpha" or "beta".
 EOF
 }
 
@@ -66,6 +69,16 @@ Remember to create a release on GitHub with a changelog notes:
 EOF
 }
 
+verify_commit_is_signed() {
+  local commit_hash=$(git log -1 --format="%H")
+
+  if ! git verify-commit "$commit_hash" &> /dev/null; then
+    echo "Error! Commit $commit_hash is not signed"
+    echo "Please follow https://docs.github.com/en/authentication/managing-commit-signature-verification/adding-a-gpg-key-to-your-github-account and sign your commit"
+    exit 1
+  fi
+}
+
 # Show help if no arguments passed
 if [ $# -eq 0 ]; then
   echo "Error! Missing release type argument"
@@ -95,6 +108,36 @@ case $RELEASE_TYPE in
     ;;
 esac
 
+# validate preid if passed
+ALLOWED_PRERELEASE_TYPES=(prepatch preminor premajor prerelease)
+if [ -n "$PREID" ]; then
+  if [ "$PREID" != "alpha" ] && [ "$PREID" != "beta" ]; then
+    echo "Invalid pre_id. It should be either 'alpha' or 'beta'"
+    echo ""
+    echo_help
+    exit 1
+  fi
+
+  if [ -n "$RELEASE_TYPE" ]; then
+    valid=false
+
+    for type in "${ALLOWED_PRERELEASE_TYPES[@]}"; do
+      if [ "$type" = "$RELEASE_TYPE" ]; then
+        valid=true
+        break
+      fi
+    done
+
+    if [ "$valid" = false ]; then
+      ALLOWED_PRERELEASE_TYPES_STRING=$(printf "'%s', " "${ALLOWED_PRERELEASE_TYPES[@]}")
+      echo "Invalid release_type. It should be one of: $ALLOWED_PRERELEASE_TYPES_STRING when pre_id is set"
+      echo ""
+      echo_help
+      exit 1
+    fi
+  fi
+fi
+
 # Make sure our working dir is the repo root directory
 cd "$(git rev-parse --show-toplevel)"
 
@@ -124,19 +167,26 @@ yarn -s install --frozen-lockfile
 echo "Running tests"
 yarn -s run test
 
-echo "Bumping package.json $RELEASE_TYPE version and tagging commit"
-yarn -s version --$RELEASE_TYPE
+if [ -n "$PREID" ]; then
+  echo "Bumping package.json $RELEASE_TYPE, $PREID version and tagging commit"
+  yarn -s version --$RELEASE_TYPE --preid $PREID
+else
+  echo "Bumping package.json $RELEASE_TYPE version and tagging commit"
+  yarn -s version --$RELEASE_TYPE
+fi
+
+
+create_github_release
+verify_commit_is_signed
+
+echo "Pushing git commit and tag"
+git push --follow-tags
 
 echo "Building"
 yarn -s run build
 
 echo "Publishing release"
 yarn --ignore-scripts publish --non-interactive --access=public
 
-echo "Pushing git commit and tag"
-git push --follow-tags
-
 echo "Publish successful!"
 echo ""
-
-create_github_release