# Build Web Components to be loaded in Native WebView
source: https://developer.mastercard.com/mastercard-checkout-solutions/tutorial/mobile/step1/index.md

## Step 1. Build web components to be loaded in native WebView {#step-1-build-web-components-to-be-loaded-in-native-webview}

As an integrator, you can create your own code (either within an app or as library
you provide for use in multiple apps) which will handle the checkout flow via
the SRCI and DCF screens, and return control back to the merchant application
when the transaction is resolved.

#### Components needed {#components-needed}

A typical mobile application (DPA) which provides Click to Pay would need to implement something suitable for the following (either directly in the application or via some library shared between the applications that
you as SRCI support):

1. Configuration object - To allow the application to specify the list of supported payment cards (Mastercard, Visa, American express etc), supported Locale etc.
2. Checkout Request object - A data object with transaction-specific parameters needed to complete checkout. This request can also override existing merchant configurations. The application will need to be able to form the request correctly.
3. A class to handle initialization with a configuration object, launching a suitable web-view to handle the SRCI experience and connecting to DCF providers. The web experience will be the same as the web experience you as SRCI provide for web applications (see the Client Side Integration pages on using the JavaScript SDK and Building the SRCI Screens).
4. A way to handle the checkout result and notify the merchant application.

One issue which you will need to address is to ensure that the transition between the part of the checkout experience which you create (the SRCI pages) and the part provided by the card network DCF is handled correctly when working inside web-views inside a mobile application, since the normal web page method of passing control between web pages will not be sufficient without your application handling events inside the Android Activity /
iOS ViewController.

The documentation in this section describes a possible approach for this, as an example.
The code samples provided illustrate possible solutions using the following approaches:

* iOS --- ViewController using **WKWebView** from the WebKit framework. Refer to the Apple developer documentation [here](https://developer.apple.com/documentation/webkit/wkwebview).

* Android --- Activity with **WebView** . Refer to the Android developer documentation [here](https://developer.android.com/guide/webapps/webview).

<br />

### Configuration and checkout {#configuration-and-checkout}

A sample configuration class could be implemented as follows:
* Java
* Objective-C

```java
// Sample configuration

Locale locale = Locale.US;
String checkoutId = CHECKOUT_ID; // unique id for a particular Merchant or PSP
String checkoutUrl = CHECKOUT_URL; // URL to launch SRCI web experience
Set<CardType> allowedCardTypes = Collections.emptySet();
allowedCardTypes.add(CardType.MASTER);

Configuration config = new Configuration(locale, checkoutId, checkoutUrl, allowedCardTypes);
MerchantSDK sdk = MerchantSDK.getInstance();
sdk.initialize(config, context);
```

```objective-C
// Sample configuration

@implementation MCSConfiguration

  - (instancetype _Nonnull) initWithLocale: (NSLocale * ) locale
                                checkoutId: (NSString * ) checkoutId
                               checkoutUrl: (NSString * ) checkoutUrl
                            callbackScheme: (NSString * ) scheme
                          allowedCardTypes: (NSSet < MCSCardType > * ) allowedCardTypes
                  presentingViewController: (UIViewController * _Nullable) presentingViewController {
  if (self = [super init]) {
    self.locale = locale;
    self.checkoutId = checkoutId;
    self.checkoutUrl = checkoutUrl;
    self.callbackScheme = scheme;
    self.allowedCardTypes = allowedCardTypes;
    self.presentingViewController = presentingViewController;
  }
  return self;
}
@end
```

A sample checkout request could be as follows:
* Java
* Objective-C

```java
// Sample Checkout request

@Override public CheckoutRequest getCheckoutRequest() {
    Set<CryptoFormat> cryptoFormat = new HashSet<>();
    cryptoFormat.add(CryptoFormat.UCAF);

    CryptoOptions cryptoOptions = new CryptoOptions(cryptoFormat);

    Set<CryptoOptions> cryptoOptionsSet = new HashSet<>();
    cryptoOptionsSet.add(cryptoOptions);

    CheckoutRequest request = new CheckoutRequest.Builder()
        .amount(totalAmount)
        .cartId(UUID.randomUUID().toString())
        .currency("USD")
        .cryptoOptions(cryptoOptionsSet)
        .build();

    return request;
}
```

```objective-c
// Sample Checkout request

+ (NSDictionary *)dictionaryForCheckoutRequest:(MCSCheckoutRequest *)checkoutRequest configuration:(MCSConfiguration *)configuration {
    NSMutableDictionary *checkoutRequestDictionary = [[NSMutableDictionary alloc] init];

    [checkoutRequestDictionary setValue:[checkoutRequest.amount stringValue] forKey:kAmountKey];
    [checkoutRequestDictionary setValue:checkoutRequest.cartId forKey:kCartIdKey];
    [checkoutRequestDictionary setValue:checkoutRequest.currency forKey:kCurrencyKey];
    [checkoutRequestDictionary setValue:configuration.locale.localeIdentifier forKey:kLocaleKey];
    [checkoutRequestDictionary setValue:configuration.checkoutId forKey:kCheckoutIDKey];
    [checkoutRequestDictionary setValue:[MCSCheckoutUrlBuilder nilOrStringForBool:checkoutRequest.suppress3Ds] forKey:kSuppress3Ds];
    [checkoutRequestDictionary setValue:[MCSCheckoutUrlBuilder nilOrStringForBool:checkoutRequest.cvc2Support] forKey:kCVC2SupportKey];
    [checkoutRequestDictionary setValue:[MCSCheckoutUrlBuilder nilOrStringForNumber:checkoutRequest.validityPeriodMinutes] forKey:kValidityPeriodMinutesKey];
    [checkoutRequestDictionary setValue:checkoutRequest.unpredictableNumber forKey:kUnpredictableNumberKey];
    [checkoutRequestDictionary setValue:checkoutRequest.shippingLocationProfile forKey:kShippingLocationProfileKey];
    [checkoutRequestDictionary setValue:[configuration.allowedCardTypes.allObjects componentsJoinedByString:@","] forKey:kAllowedCardTypesKey];
    [checkoutRequestDictionary setValue:kChannelValue forKey:kChannelKey];

    if (checkoutRequest.cryptoOptions != nil) {
        for (MCSCryptoOptions *option in checkoutRequest.cryptoOptions) {
            NSString *cryptoFormatKey = [NSString stringWithFormat:@"%@CryptoFormat", option.cardType];
            NSString *cryptoFormatValue = [[option.format allObjects] componentsJoinedByString:@","];

            [checkoutRequestDictionary setValue:cryptoFormatValue forKey:cryptoFormatKey];
        }
    }

    // Used for remote logging
    NSBundle *frameworkBundle = [NSBundle bundleForClass:[self class]];
    [checkoutRequestDictionary setValue:frameworkBundle.infoDictionary[@"CFBundleShortVersionString"] forKey:kSdkVersionKey];
    [checkoutRequestDictionary setValue:kPlatformValue forKey:kPlatformKey];

    return checkoutRequestDictionary;
}
```

Using the two components above (configuration and checkout request), the merchant application can build a checkout URL similar the following:

    https://[SRCI_DOMAIN]/?cartId=123ABC&amount=11.22&currency=USD&allowedCardTypes=master
    &locale=en_US&channel=mobile&masterCryptoFormat=UCAF.

The example URL above assumes that you have set up the required SRCI
experience and hosted it on your own domain (represented by **\[SRCI_DOMAIN\]** ).
The **cartId** , **currency** , **allowedCardTypes** ,
**locale** , **channel** and **masterCryptoFormat** need to be passed to your SRCI implementation (for example as shown via URL parameters) so that these values can be used to
a) display the card types accepted in your SRC checkout experience,
b) correctly communicate with the card network DCF system (e.g., Mastercard DCF).
For example **channel** as shown here would allow your SRCI code to indicate that the mobile channel is being used when calling the JavaScript SDK.

The value **cartId** is shown as an example value which may be important to your implementation, it is not required by Mastercard or the JavaScript SDK (your SRCI web code may communicate with a merchant back end system using such an id, for example).
Note: In some cases the SRCI web code may use suitable default values when initializing the JavaScript SDK, rather than requiring them to be passed by the DPA application here - this is a design decision which is up to you.

The above is only an example, you could design your URL to require a different set of parameters.

You will need to ensure that the DPA application is passing
sufficient information to enable your web code to create the correct
**dpaTransactionOptions** and other configuration data that will be required
to use the JavaScript SDK (or you will need some other method of communicating these values between the app and your SRCI web code).
See the [JavaScript SDK Reference Page](https://developer.mastercard.com/mastercard-checkout-solutions/documentation/sdk-reference/index.md) for details of the data needed to initialize the JavaScript SDK.

### Differentiating Native Application and Web Traffic {#differentiating-native-application-and-web-traffic}

If the SRCI implementation requires differentiating native application and web traffic, an additional query parameter (e.g., channel=native) can be added when invoking SRCI experience from a native app. Using the additional query parameter, the SRCI can alter its runtime behavior as necessary based on web to web or app to web scenarios.

```javascript
var url = new URL(window.location);
var params = new URLSearchParams(url.search);

if (params.channel === 'native') {
  // app to web specific logic
}
```