# Migrating From v2

## Overview

The Embedded SDK v3 introduces several improvements and changes compared to v2.

Compared to **v2**, where the SDK is initialised via the constructor of the `Ryft` class, in SDK **v3**, you create instances of the payment components directly using factory functions. This allows for more flexibility and better separation of concerns.

Nevertheless, the new `checkout` component in SDK v3 still provides a similar all-in-one solution for handling the entire checkout process, including card payments, Google Pay, and Apple Pay. You can choose to use the `checkout` component for a streamlined integration or create individual components for more customization.

This guide will help you understand the key differences and how to migrate your existing implementation to the new version.

## Controller Initialization

In SDK v2, any configuration options (e.g., for the card form, Google Pay, Apple Pay) are passed directly to the `Ryft.init()` method.

In SDK v3, you create a controller instance using the `createController()` factory function, and then pass the necessary configuration options when creating individual components or the checkout component.

Here's how you can initialize the controller in SDK v3:


```javascript SDK v3 Controller Initialization
// Create a controller instance
const controller = createController({
    publicKey,
    clientSecret,
    // accountId  // Uncomment if using the Platform Fee model
});
```

You can find more details on controller initialization in the [createController](https://web-sdk.ryftpay.com/docs/web/latest/functions/Web_SDK.createController.html) page of the documentation.

## Card Form Initialization

In SDK v3, you create a controller instance and then use factory functions to create the card form or checkout components.

v2

```javascript SDK v2 Card Form Initialization
// Initialize the Ryft SDK
Ryft.init({
    publicKey,
    clientSecret,
    // accountId  // If using the Platform Fee model
});
```

v3 - Card Form Component

```javascript SDK v3 Card Form Initialization
// Create Card Form instance using the default card form configuration
const cardForm = createCardForm(controller);

// Mount the card form component to the DOM
cardForm.mount('#card-form-container');
```

v3 - Checkout Component

```javascript SDK v3 Card Form Initialization
// Create checkout instance with card form component
const checkout = createCheckout(controller, {
    // Define the components you want to include in the checkout flow
    components: ['card-form']
});

// Mount the checkout component to the DOM
checkout.mount('#checkout-container');
```

You can find more details on card form initialization and configuration in the [Card Form documentation](https://web-sdk.ryftpay.com/docs/web/latest/functions/Web_SDK.createCardForm.html) page.

## Field Collection

In SDK v2, there is no separation between the card form and the field collection form.

In SDK v3, the field collection form is a separate component that can be used in conjunction with the card form or other payment method components. This allows for more flexibility in how you collect and manage payment information.

v2

```javascript SDK v2 Field Collection
Ryft.init({
    publicKey,
    clientSecret,
    // accountId  // If using the Platform Fee model
    fieldCollection: {
        billingAddress: {
            display: "full"
        },
    }
});
```

v3

```javascript SDK v3 Field Collection
// Create a field collection form instance
const fieldCollectionForm = createFieldCollectionForm(controller, {
    fieldCollection: {
        customerAddress: {
            displayMode: "full"
        }
    }
});

// Mount the field collection form to the DOM
fieldCollectionForm.mount('#field-collection-container');
```

v3 - Checkout Component

```javascript SDK v3 Checkout Component with Field Collection
const checkout = createCheckout(controller, {
    // Include both the card form and field collection components in the checkout flow
    components: ['card-form', 'field-collection'],
    fieldCollection: {
        customerAddress: {
            displayMode: "full"
        }
    }
});

// Mount the checkout component to the DOM
checkout.mount('#checkout-container');
```

You can find more details on field collection configuration in the [Field Collection documentation](https://web-sdk.ryftpay.com/docs/web/latest/functions/Web_SDK.createFieldCollectionForm.html) page.

## Wallet Payment Methods

In SDK v3, you can either create individual components for each wallet payment method using their respective factory functions (e.g., `createGooglePay()`, `createApplePay()`) or include them in the `checkout` component configuration.

This provides more flexibility in how you integrate wallet payment methods into your checkout flow, allowing you to choose the approach that best fits your needs.

v2

```javascript SDK v2 Wallet Payment Methods
Ryft.init({
    publicKey,
    clientSecret,
    googlePay: {
        merchantName: "Ryft",
        merchantCountryCode: "GB"
    },
    applePay: {
        merchantName: "Ryft",
        merchantCountryCode: "GB"
    },
});
```

v3 - Individual Components

```javascript SDK v3 Individual Wallet Components
// Create Google Pay component
const googlePay = createGooglePay(controller, {
    merchantName: 'Your Merchant Name',
    merchantCountryCode: "GB"
});

// Create Apple Pay component
const applePay = createApplePay(controller, {
    merchantName: 'Your Merchant Name',
    merchantCountryCode: "GB"
});

// Mount the wallet components to the DOM
googlePay.mount('#google-pay-container');
applePay.mount('#apple-pay-container');
```

v3 - Checkout Component

```javascript SDK v3 Checkout Component with Wallets
// Create checkout instance with wallet components
const checkout = createCheckout(controller, {
    // Include the wallet components in the checkout flow
    components: ['apple-pay', 'google-pay'],
    // Configure Apple Pay
    applePayConfig: {
        merchantName: 'Your Merchant Name',
        merchantCountryCode: "GB"
    },
    // Configure Google Pay
    googlePayConfig: {
        merchantName: 'Your Merchant Name',
        merchantCountryCode: "GB"
    }
});
```

Please note that in SDK v2, a `expressCheckout: { enabled: true },` option is required to enable wallet payment methods (see [here](/documentation/get_started/process_payments/embedded_sdk/express_checkout)). In SDK v3, this is no longer necessary, and you can directly create wallet components or include them in the checkout configuration without needing an additional flag.