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 manually. For example:

// 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

WKWebView
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

WebView
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

WebView
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.