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.

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.