For all 'Login with Zip' flows, the customer is redirected to the Zip sign in to approve recurring payments. This is handled in part by the Zip JS library below.

The script can be added anywhere in the body or head and can be loaded asynchronously.

#### Sandbox:



#### Production:



## Loading Zip buttons and Widgets

At various stages in the customer journey you will need to display the Zip call to action buttons or widgets.

### Configuration

Below is an example of how to configure your Zip login or sign up buttons.

#### ClientId

Zip will provide this.

#### redirectUri

This should be a merchant server side endpoint. This is where the customer is redirected when they click the login / sign-up button. From there you will make a server to server /authorize API request to Zip and we will return the Zip login form.

#### returnUri

This is the address the customer will be returned after login. If omitted the customer will instead be sent back to your redirectUri.

📘

You must declare your redirectUri

Your redirectUri must be provided to Zip for each environment to be added to our allowlist.

#### access_token

After the Zip customer logs in, you will [create a token](🔗) server side. If you then pass the access_token back to the font end JS in one of the 2 ways detailed below, user data can be captured (customer name, mobile, email), user accountID for charging and the Zip payment widgets will automatically load the customer account type and balance.

This is not required for the Login or signup buttons, but is needed to show the customer account type and balance on the payment option / account widgets or to pull customer information for account creation.

##### Pass the access_token in script



##### Put the access_token in a cookie



##### Example



### Before customer login

Initially you will load either the login or sign-up button, which can be loaded by simply including the below div tags.

#### Login button





#### Sign up button





### After customer login

After a customer has successfully logged in to Zip and you have generated your customer account and token, you can then use your customer access token to load the account or payment options widgets instead. These will pull customer account information used for charging (accountId) and contain a call to action allowing the customer to 'change' their selected account.

#### Configuration additions

• Add access token

• Map user data in onSuccess function

• Add onAccountSelected handler function to capture the change when a customer uses the 'change' call to action on the payment or account widget.



#### Account widget





#### Payment option

The Zip payment option can be loaded prior to customer login too, but will not show the account balance or 'change' link. You will want to load in this way at checkout for customers who are already members on your site, but have not yet paid or logged in via Zip.



##### Before linking



##### After linking



## Accessing customer data

As long as your access_token was passed in the Zip init function, you will be able to access user, account and token info as below:

### Get access token from front-end



### Get account id from front-end



### Customer data



<br>

📘

Redirect to Zip

Now that the customer can be to redirected onClick to your 'redirectUri', you will need to make some server side API calls to have the user session redirect to Zip