{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-documentation/get_started/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Migrating From v2","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"migrating-from-v2","__idx":0},"children":["Migrating From v2"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Embedded SDK v3 introduces several improvements and changes compared to v2."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Compared to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["v2"]},", where the SDK is initialised via the constructor of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Ryft"]}," class, in SDK ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["v3"]},", you create instances of the payment components directly using factory functions. This allows for more flexibility and better separation of concerns."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Nevertheless, the new ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkout"]}," component for a streamlined integration or create individual components for more customization."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide will help you understand the key differences and how to migrate your existing implementation to the new version."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"controller-initialization","__idx":2},"children":["Controller Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In SDK v2, any configuration options (e.g., for the card form, Google Pay, Apple Pay) are passed directly to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Ryft.init()"]}," method."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In SDK v3, you create a controller instance using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createController()"]}," factory function, and then pass the necessary configuration options when creating individual components or the checkout component."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's how you can initialize the controller in SDK v3:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v3 Controller Initialization","header":{"title":"SDK v3 Controller Initialization","controls":{"copy":{}}},"source":"// Create a controller instance\nconst controller = createController({\n    publicKey,\n    clientSecret,\n    // accountId  // Uncomment if using the Platform Fee model\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can find more details on controller initialization in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://web-sdk.ryftpay.com/docs/web/latest/functions/Web_SDK.createController.html"},"children":["createController"]}," page of the documentation."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"card-form-initialization","__idx":3},"children":["Card Form Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In SDK v3, you create a controller instance and then use factory functions to create the card form or checkout components."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"v2","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v2 Card Form Initialization","header":{"title":"SDK v2 Card Form Initialization","controls":{"copy":{}}},"source":"// Initialize the Ryft SDK\nRyft.init({\n    publicKey,\n    clientSecret,\n    // accountId  // If using the Platform Fee model\n});\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"v3 - Card Form Component","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v3 Card Form Initialization","header":{"title":"SDK v3 Card Form Initialization","controls":{"copy":{}}},"source":"// Create Card Form instance using the default card form configuration\nconst cardForm = createCardForm(controller);\n\n// Mount the card form component to the DOM\ncardForm.mount('#card-form-container');\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"v3 - Checkout Component","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v3 Card Form Initialization","header":{"title":"SDK v3 Card Form Initialization","controls":{"copy":{}}},"source":"// Create checkout instance with card form component\nconst checkout = createCheckout(controller, {\n    // Define the components you want to include in the checkout flow\n    components: ['card-form']\n});\n\n// Mount the checkout component to the DOM\ncheckout.mount('#checkout-container');\n","lang":"javascript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can find more details on card form initialization and configuration in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://web-sdk.ryftpay.com/docs/web/latest/functions/Web_SDK.createCardForm.html"},"children":["Card Form documentation"]}," page."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"field-collection","__idx":4},"children":["Field Collection"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In SDK v2, there is no separation between the card form and the field collection form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"v2","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v2 Field Collection","header":{"title":"SDK v2 Field Collection","controls":{"copy":{}}},"source":"Ryft.init({\n    publicKey,\n    clientSecret,\n    // accountId  // If using the Platform Fee model\n    fieldCollection: {\n        billingAddress: {\n            display: \"full\"\n        },\n    }\n});\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"v3","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v3 Field Collection","header":{"title":"SDK v3 Field Collection","controls":{"copy":{}}},"source":"// Create a field collection form instance\nconst fieldCollectionForm = createFieldCollectionForm(controller, {\n    fieldCollection: {\n        customerAddress: {\n            displayMode: \"full\"\n        }\n    }\n});\n\n// Mount the field collection form to the DOM\nfieldCollectionForm.mount('#field-collection-container');\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"v3 - Checkout Component","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v3 Checkout Component with Field Collection","header":{"title":"SDK v3 Checkout Component with Field Collection","controls":{"copy":{}}},"source":"const checkout = createCheckout(controller, {\n    // Include both the card form and field collection components in the checkout flow\n    components: ['card-form', 'field-collection'],\n    fieldCollection: {\n        customerAddress: {\n            displayMode: \"full\"\n        }\n    }\n});\n\n// Mount the checkout component to the DOM\ncheckout.mount('#checkout-container');\n","lang":"javascript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can find more details on field collection configuration in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://web-sdk.ryftpay.com/docs/web/latest/functions/Web_SDK.createFieldCollectionForm.html"},"children":["Field Collection documentation"]}," page."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"wallet-payment-methods","__idx":5},"children":["Wallet Payment Methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In SDK v3, you can either create individual components for each wallet payment method using their respective factory functions (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createGooglePay()"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createApplePay()"]},") or include them in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["checkout"]}," component configuration."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"v2","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v2 Wallet Payment Methods","header":{"title":"SDK v2 Wallet Payment Methods","controls":{"copy":{}}},"source":"Ryft.init({\n    publicKey,\n    clientSecret,\n    googlePay: {\n        merchantName: \"Ryft\",\n        merchantCountryCode: \"GB\"\n    },\n    applePay: {\n        merchantName: \"Ryft\",\n        merchantCountryCode: \"GB\"\n    },\n});\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"v3 - Individual Components","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v3 Individual Wallet Components","header":{"title":"SDK v3 Individual Wallet Components","controls":{"copy":{}}},"source":"// Create Google Pay component\nconst googlePay = createGooglePay(controller, {\n    merchantName: 'Your Merchant Name',\n    merchantCountryCode: \"GB\"\n});\n\n// Create Apple Pay component\nconst applePay = createApplePay(controller, {\n    merchantName: 'Your Merchant Name',\n    merchantCountryCode: \"GB\"\n});\n\n// Mount the wallet components to the DOM\ngooglePay.mount('#google-pay-container');\napplePay.mount('#apple-pay-container');\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"v3 - Checkout Component","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","data-title":"SDK v3 Checkout Component with Wallets","header":{"title":"SDK v3 Checkout Component with Wallets","controls":{"copy":{}}},"source":"// Create checkout instance with wallet components\nconst checkout = createCheckout(controller, {\n    // Include the wallet components in the checkout flow\n    components: ['apple-pay', 'google-pay'],\n    // Configure Apple Pay\n    applePayConfig: {\n        merchantName: 'Your Merchant Name',\n        merchantCountryCode: \"GB\"\n    },\n    // Configure Google Pay\n    googlePayConfig: {\n        merchantName: 'Your Merchant Name',\n        merchantCountryCode: \"GB\"\n    }\n});\n","lang":"javascript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Please note that in SDK v2, a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expressCheckout: { enabled: true },"]}," option is required to enable wallet payment methods (see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/documentation/get_started/process_payments/embedded_sdk/express_checkout"},"children":["here"]},"). 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."]}]},"headings":[{"value":"Migrating From v2","id":"migrating-from-v2","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Controller Initialization","id":"controller-initialization","depth":2},{"value":"Card Form Initialization","id":"card-form-initialization","depth":2},{"value":"Field Collection","id":"field-collection","depth":2},{"value":"Wallet Payment Methods","id":"wallet-payment-methods","depth":2}],"frontmatter":{"seo":{"title":"Migrating From v2"}},"lastModified":"2026-03-16T15:28:52.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/documentation/get_started/process_payments/embedded_sdk_v3/migrate_from_v2","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}