Custom members registration, subscription payment & login

Ask the community
, ,
1

Hi you all!

Did anyone of you create custom member registration, payment & login pages with Velo?
I found this manual from WIX: https://www.wix.com/velo/example/members-area
But I couldn’t get it to work on my site and always get the error that the registration failed. When someone signs up, they are registered as a site contact but not as a site member.

As additional info, this is what I want to crate:

  • To register as a new member the user enters first name, last name, eMail and passwort
  • Redirection to select and pay a subscription
  • Upon successful payment user
    • is redirected to confirmation page
    • get’s mail to confirm their eMail address
    • get’s mail with the login details

Did anyone of you create something like this? This would be an amazing help!

Thank you so much already!!! :slight_smile:

Best,
Katrin

2

Frau Kurz,

do you already have written some code?

Where is your working/not working code?

3

Hi Velo-Ninja,

Thank you for your response! :slight_smile:

Yes for all pages and backend code connected to the member registration and login I used the code from this WIX article: https://www.wix.com/velo/example/members-area

The registration and login Lightbox that gives the error message has this code:

import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
import { doRegistration, doLogIn } from 'backend/signIn.jsw';

$w.onReady(function () {
    if (wixUsers.currentUser.loggedIn) {
        setTimeout(() => wixLocation.to('/start'), 0);
        wixWindow.lightbox.close();
    } else {
        init();
    }
});

function init() {
    onClickLogIn();
    onClickSignIn();
    changeStatesBtns();
}

function changeStatesBtns() {
    changeToLoginState();
    changeToRegisterState();
}

function changeToLoginState() {
    $w('#loginBtn').onClick(() => {
        $w('#statebox').changeState('loginState');
    });
}

function changeToRegisterState() {
    $w('#registerBtn').onClick(() => {
        $w('#statebox').changeState('registerState');
    });
}

function onClickLogIn() {
    $w('#loginButton').onClick(async () => {
        $w('#loginButton').disable();
        const email = $w('#emailLogIn').value;
        const password = $w('#passwordLogin').value;
        const result = await doLogIn(email, password);
        if (result.approved) {
            await wixUsers.applySessionToken(result.sessionToken);
            wixWindow.lightbox.close();
        } else {
            if (result.reason === 'not a member') {
                $w('#validationTxt').text = `Unknown email. Make sure you've provided a registered email or sign up via the sign up form`;
            } else {
                $w('#validationTxt').text = `Password incorrect. Use the same password you've registered with`;
            }
            $w('#validationTxt').expand();
            $w('#loginButton').enable();
        }
    });
}

function onClickSignIn() {
    $w('#signInBtn').onClick(async () => {
        $w('#signInBtn').disable();
        try {
            checkValidation();
            await register();
        } catch (err) {
            $w('#textValidation').text = err.message;
            $w('#textValidation').expand();
            $w('#signInBtn').enable();
        }
    });
}

function checkValidation() {
    if (!$w('#firstName').valid) throw new Error('Missing first name');
    if (!$w('#lastName').valid) throw new Error('Missing last name');
    if (!$w('#email').valid) throw new Error('Missing email');
    if (!$w('#password').valid) throw new Error('Missing password');
    if ($w('#password').value.length < 6) throw new Error('Password should contain at least 6 characters');
    if (!$w('#secondPassword').valid) throw new Error('Missing password confirmation');
    if ($w('#password').value !== $w('#secondPassword').value) throw new Error('Passwords are not identical');
}

async function register() {
    const contactInfo = {
        'email': $w('#email').value,
        'firstName': $w('#firstName').value,
        'lastName': $w('#lastName').value,
        'password': $w('#password').value,
    }
    const { approved } = await doRegistration(contactInfo);
    if (approved) {
        $w('#checkEmail').expand();
        $w('#validationTxt').collapse();
        $w('#textValidation').collapse();
    } else {
        throw new Error('Registration failed. Please try again in a few minutes');
    }
}

Thank you so much for having a look at this!! :slight_smile:

4

Sorry, i did not forget you, but did not find the time to inspect your issue yet.

Still not found a solution ? If so…

Your problem is a little bit bigger one including a lot of codinng and functions. Already more a job then a help.

Anyway, if i find enough time, i will take a look onto it.