Zum Hauptinhalt springen

Migrate from Stripe Elements

If you already use Stripe Elements in your website, you can easily migrate to Fynn.Js Elements.

Example​

If you have a card element created on your website, the code could look like the following:

const stripe = Stripe('pk_live_xxxxxxxxx');

const elements = stripe.elements();

const cardElement = elements.create('card', {
    style: {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    }
});

Migrate to Fynn.Js Elements​

To migrate to Fynn.Js Elements, you just need to move some code around and change the create function.

const Fynn = FynnJS()

Fynn.setup('pk_live_xxxxxxxxx');

const paymentMethodsElements = Fynn.elements.paymentMethods({})

const paymentMethods = paymentMethodsElements.create('stripe-card', {
    stripePublicKey: 'pk_live_xxxxxxxxx',
    debtorId: 'debtor_xxxxxxxxx',
    style: {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    }
})

Confirm payment​

Instead of calling the stripe.confirmCardPayment or stripe.confirmCardSetup function, you need to call the confirmCart function on the payment method element.


const paymentMethodsElements = Fynn.elements.paymentMethods({
    brandColor: 'c7f639' // define the brand color of your website, if nothing provided we will use black
})

const paymentMethodElement = paymentMethodsElements.create('stripe-card', {
    stripePublicKey: 'pk_live_xxxxxxxxx',
    debtorId: 'debtor_xxxxxxxxx',
    style: {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    }
})

Fynn.checkout.confirmCart(
    paymentMethodElement,
    'cart_xxxxxxxxx', // the cart id, see the Custom Checkout Quick Start Guide
    cartAuthenticationToken, // the authentication token of the cart, see the Custom Checkout Quick Start Guide
    {
        returnUrl: 'https://example.com/return', // the return url of the checkout, if we need to do offsite payment like on paypal
    }
)

We will do all the magic in background like creating and confirming payment method on stripe, adding the payment method to the debtor, cart and confirming the cart.

To handle the result of the payment state, see the upcoming section.

Additional resources​

To undertand the details, have a look on the detailed element pages. Otherwise ask the support for help.