NFC Payment in App

—

### ✅ Functional Breakdown:
1. **Staff Input**:
– UI screen for staff to enter an amount (in local currency).
2. **Trigger Payment Request**:
– A "Pay Now" button initiates payment mode.
3. **Customer Taps Phone/Card**:
– Use **NFC or payment SDK** to allow contactless payment.
4. **Process the Payment**:
– Integrate with a payment provider like **Stripe Terminal**, **Square**, or a **native POS SDK** that supports NFC.

—

### 📱 Tech Stack Required:
| Feature | Plugin or Integration |
|——–|————————|
| Input UI | Vanilla JS / Vue / Angular (your frontend) |
| NFC Reader | `cordova-plugin-nfc` or `cordova-plugin-nfc-nci` |
| Payment Gateway | Stripe Terminal (SDK), Square SDK, or SumUp API |
| Backend | (Optional) Laravel, Firebase, or any secure API for transaction logging |

—

### ⚙️ Step-by-Step Integration Plan:

#### 1. **Create Staff UI to Enter Amount**

<div class="charge-form">
  <label>Enter Amount:</label>
  <input type="number" id="chargeAmount" placeholder="Enter amount">
  <button onclick="startPayment()">Pay Now</button>
</div>

#### 2. **Start NFC Listening (if using NFC tag/cards)**
Install plugin:

cordova plugin add cordova-plugin-nfc

JS Setup:

function startPayment() {
    const amount = document.getElementById('chargeAmount').value;
    if (!amount) return alert('Enter an amount');

    alert(`Waiting for payment of $${amount}...`);

    // Start listening for NFC
    nfc.addNdefListener(
        function (nfcEvent) {
            let tag = nfcEvent.tag;
            alert("Payment received via NFC tag. Tag ID: " + nfc.bytesToHexString(tag.id));
            // Here, you would call your backend to verify/process payment
        },
        function () {
            console.log("Listening for NFC payment...");
        },
        function (error) {
            console.error("NFC listen error: " + JSON.stringify(error));
        }
    );
}

#### 3. **OR Integrate Stripe Terminal or SumUp**
NFC payments (like Apple Pay / Google Pay) require SDK support. Cordova alone can't handle them.

– **Stripe Terminal** and **Square SDK** require native bridging (via a plugin or Capacitor).
– For Cordova, you might consider:
– A **SumUp SDK Cordova wrapper** (official plugin exists)
– A **Web-based Stripe checkout** using Payment Request API

—

### ✅ Simpler Alternative (Using QR & Mobile Pay):
If NFC is complex to implement, use:

– Staff enters amount → App generates a **QR code** with payment link
– Customer scans QR → completes payment via Stripe, Razorpay, or UPI

Use plugin:

cordova plugin add cordova-plugin-qr-generator

—

### 🔐 Important Notes:
– **NFC payments** require **PCI-DSS compliance**.
– You **cannot use NFC to charge cards** directly unless certified and using proper SDKs.
– Always **delegate payment processing to trusted gateways (Stripe, Square, SumUp)**.

—

### 💡 Recommendation
For Cordova, **SumUp SDK** is easiest to integrate for in-person tap payments:
– [SumUp Cordova SDK](https://github.com/sumup/sumup-cordova-plugin)

—

Would you like a sample implementation using SumUp or Stripe Web + QR method?

—

### 🔒 Key Point:
You **cannot** use Cordova to receive direct NFC payments like a card reader. Google Wallet (as a payment app) does **not allow peer-to-peer payment requests via NFC** in third-party apps.

Instead, your Cordova app can:
1. Show a payment sheet via **Google Pay API**.
2. Customer taps to pay with their saved cards in Google Wallet.
3. Payment is processed via a **supported payment gateway** like Stripe, Razorpay, etc.

—

## ✅ Your Final App Flow (Google Pay in Cordova)

### Step 1: Setup Staff Input

<input id="amount" type="number" placeholder="Enter amount" />
<button onclick="payWithGoogle()">Charge via Google Pay</button>

—

### Step 2: Use Web-based Google Pay Button

Since there's no official Cordova plugin for Google Pay, use the **Web API** inside your Cordova app:

<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<script>
const paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST' });

function payWithGoogle() {
  const amount = document.getElementById("amount").value;
  if (!amount) return alert("Enter an amount");

  const paymentDataRequest = {
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [{
      type: 'CARD',
      parameters: {
        allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
        allowedCardNetworks: ['MASTERCARD', 'VISA']
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        parameters: {
          gateway: 'stripe', // OR 'example' for testing
          'stripe:version': '2022-08-01',
          'stripe:publishableKey': 'pk_test_************'
        }
      }
    }],
    merchantInfo: {
      merchantName: 'Circus Box Office'
    },
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: amount,
      currencyCode: 'USD'
    }
  };

  paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData) {
    // Send token to backend for payment confirmation
    console.log("Payment token:", paymentData.paymentMethodData.tokenizationData.token);
    alert("Payment initiated. Send token to backend to complete.");
  }).catch(function(err) {
    console.error("Payment failed", err);
    alert("Payment canceled or failed.");
  });
}
</script>

—

### Step 3: Backend Processing (Stripe Example)

Send the token you get from `paymentData.paymentMethodData.tokenizationData.token` to your backend, and charge it via Stripe API.

—

## ✅ Pros of This Approach:
– Works in Cordova (in-app browser context).
– No need to write native code.
– Secure — tokenization handled by Google.

—

## 🔐 Important:
– You must be a verified merchant on Stripe or Razorpay to accept Google Pay.
– Use **`environment: 'PRODUCTION'`** when live.
– **Test cards** work only in `'TEST'` mode.

—

### 👉 Want a full working Cordova project template with this setup?