Migrating From v2

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.

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:

// 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 page of the documentation.

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

// Initialize the Ryft SDK
Ryft.init({
    publicKey,
    clientSecret,
    // accountId  // If using the Platform Fee model
});

You can find more details on card form initialization and configuration in the Card Form documentation page.

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.

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

You can find more details on field collection configuration in the Field Collection documentation page.

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.

Ryft.init({
    publicKey,
    clientSecret,
    googlePay: {
        merchantName: "Ryft",
        merchantCountryCode: "GB"
    },
    applePay: {
        merchantName: "Ryft",
        merchantCountryCode: "GB"
    },
});

Please note that in SDK v2, a expressCheckout: { enabled: true }, option is required to enable wallet payment methods (see 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.