💳NFC

minimum version is v2.10.0

Before reading this page, please make sure you've set up you've enabled NFC.

💳NFC

• Bubble.io Plugin

• JavaScript SDK

NFC Bubble Examples:

1. NFC - https://bubble.io/page?type=page&name=nfc&id=nativelyqa&tab=Design

🧋 Bubble.io Plugin

[Element] Natively - NFC

Fields:

• Read Alert Message

• Write Alert Message

• Read Detected Message

• Write Detected Message

• nfcresponse - it's a predefined (by plugin) bubble type that needs to be selected (Natively - NFCResponse type)

Events:

• NFC Read Failed

• NFC Write Failed

• NFC Write Success

• NFC Read Success

• NFC Ready To Use - mean you've received 'NFC Is Available' state (Usable for Android)

States:

• Error

• Result

• NFC Tag ID

• NFC Tag Type

• NFC Is Available - yes/no (For Android, you need to ask the user to enable it in device settings)

Actions:

• Read Data

• Write Data

  • Record Data - text (can be url or just text)To open app with card you can use your bundle id (Like this: com.bundle.id://open?url={url you wanna open}

  • Record ID - text (better to use a shorter ID, for now, it's not usable, so you can hardcode it to some value, but in the future Natively will allow to Write/Read more than 1 data)

  • Record Data Type - text, uri. When the data type is set to 'uri', scanning a NFC cord will automatically open the link specified in the Record Data field in the device's default web browser.

How to use?

1. Make sure you've set up NFC for your app

2. (Do not forget to rebuild app)

3. Add Natively - NFC element on the page

4. Fill element fields (Alert messages, etc.)

5. The Banner will set up automatically on the page load

6. Call Read or Write actions

🛠 JavaScript SDK

NativelyNFCService

const readAlertMessage = "readAlertMessage";
const writeAlertMessage = "writeAlertMessage";
const readDetectedMessage = "readDetectedMessage";
const writeDetectedMessage = "writeDetectedMessage";

const nfcService = new NativelyNFCService(
    readAlertMessage,
    writeAlertMessage,
    readDetectedMessage,
    writeDetectedMessage
);


// All available methods (It doesn't mean you need to call them like this):
nfcService.read(read_callback);
nfcService.write(recordId, recordData, recordDataType, write_callback); //from v2.15.21 - recordDataType can be 'text' or 'uri'.
nfcService.available(available_callback);
// write response
// {
//  "type_format": "nfcWellKnown",
//  "type": "123",
//  "id": "123",
//  "length": 0,
//  "payload_content": "recordData",
//  "payload_raw": ""
//}

// How to use?
// 1. Call nfcService.available method (you will receive resp.status == true)
// 2. Call nfcService.read (you will receive resp.
// 3. Call nfcService.write (you need to pass ``recordId (can be hardcoded to "123", we don't use it for now. In the future updates it will be used to Read/Write more than 1 data ), `recordData` (string, can be url or just text), 'recordDataType' (string, can be 'text' or 'uri'). To open app with card you can use your bundle id (Like this: com.bundle.id://open?url={url you wanna open} 
// 4. Check response resp.status (if it was SUCCESS or FAILED (with error)
// resp.status (resp.message if status is FAILED)