> ## Documentation Index
> Fetch the complete documentation index at: https://docs.manifestfinancial.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed in Mobile App

Embed payment management in your mobile app using web views. **Note that events are stringified JSON for mobile integrations.** See below for specific implementation examples.

## Events

Manifest will broadcast events to your application to keep your app informed of changes. Here are the events you can expect:

* `payment_method_updated`: The buyer has successfully updated their payment method.
* `resize`: The height of the content has changed. Depending on your design, you may need to resize the embedded view to match the new height.

***

## Customization

Since you are not using our SDK, you will need to set the buyer's payment method form [customization options](/platform/payment-methods/customization) manually. For example:

```js theme={null}
// construct your options
const options = { font: "Poppins", buttonColor: '#007733' };

// encode the options
const stringified = JSON.stringify(options);
const encoded = Buffer.from(stringified).toString('base64');

// append them to the payment method embed URL
const url = `${buyer.payment_method_embed_url}?options=${encoded}`;
```

***

## Embedding

### iOS

```swift WKWebView theme={null}
self.webView.configuration.preferences.javaScriptEnabled = true
self.webView.configuration
    .userContentController
    .add(self, name: "checkoutMessageHandler")
self.webView.load( /* payment_method_embed_url */ )

// And when handling the event
func userContentController(
    _ userContentController: WKUserContentController,
    didReceive message: WKScriptMessage
) {
    guard let message = message.body as? String else { return }
    guard let data = message.data(using: .utf8) else { return }
    do {
        let json = try JSONSerialization.jsonObject(
            with: data,
            options: []
        ) as? [String: Any]
        let type = json["type"] as? String
        
        if type == "payment_method_updated" {
            // dismiss the WebView here
        }
        if type == "resize" {
            let height = json["payload"]["height"] as? Int
            // resize the WebView if needed
        }
    } catch {
        print(error)
    }
}
```

Manifest will post an event using the `userContentController` object you created, with a message containing a stringified JSON event.

### Android

```java WebView theme={null}
import org.json.JSONObject;

class CheckoutInterface {
    @JavascriptInterface
    public boolean postMessage(String message, String transferList) {
        try {
            JSONObject json = new JSONObject(message);
            String type = json.getString("type");
            if ("payment_method_updated".equals(type)) {
                //dismiss the webview here
            }
            if ("resize".equals(type)) {
                int height = json.getJSONObject("payload").getInt("height");
                //resize the webview if needed
            }
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }
}

// Initializing the webview 
webView.addJavascriptInterface(new CheckoutInterface(), "checkoutMessageHandler");
```

Manifest will post an event using the `checkoutMessageHandler` object you created, with a message containing a stringified JSON event.

### React Native

```jsx WebView theme={null}
const onMessage = (event) => {
    try {
        const { type, payload } = JSON.parse(event?.nativeEvent?.data);
        if (type === 'payment_method_updated') {
            //dismiss web view here
        }
        if (type === 'resize') {
            const { height } = payload;
            //resize the webview if needed
        }
    } catch (error) {
        console.error(error);
    }
}

<WebView ... onMessage={onMessage} />
```

Manifest will post an event using the `onMessage` handler you created, with a message containing a stringified JSON event.

***

## Need Addional Support?

If your application needs a different callback scheme, just [let us know](mailto:developer@manifestfinancial.com).