react-wallets

iOS and Android wallet passes for ReactJs created with create-react-library.

A React.js library for generating Apple and Google Wallet passes previews written in Typescript and Styled components.

iOS and Android live examples

Supported passes in iOS and Android

• Store pass
• Event pass
• Coupon pass
• Plane pass
• Boat pass
• Bus pass
• Train pass
• Metro/Subway pass
• Cinema/Theater pass
• Hotel pass

There are 10 types, each pass contains a front side and a back side, the front side displays relevant informations about the pass whereas the back side displays more details.

Installation

Install with NPM or YARN:

npm install react-wallets

yarn add react-wallets

Start with a template

A template has all the common data fields that will be shared between your passes.

• Store iOS pass example for bus

import { CardIOS } from "react-wallets";

const MyWalletComponent = () => {
return (
<CardIOS
//card-type----------
type='bus'
//styles-------------
backgroundColor='#eaf9fa'
titleColor='#1b38db'
textColor='#ab2'
//header-------------
headerLogoLink='https://seeklogo.com/images/H/hummingbird-logo-D436A31661-seeklogo.com.png'
title='Number'
mainTitle='223'
//information----------
LeftTitle='calais france'
LeftValue='fr'
RightTitle='douvres royaume unis'
RightValue='uk'
topLeftTitle='departure date'
topLeftValue='24/08/2023'
topCenterLeftTitle='arrival date'
topCenterLeftValue='26/08/2023'
topRightTitle='price'
topRightValue='123$'
bottomLeftTitle='passenger'
bottomLeftValue='Alan Jason'
//access---------------
accessImage='https://upload.wikimedia.org/wikipedia/commons/7/78/Qrcode_wikipedia_fr_v2clean.png'
accessType='QR'
accessCodeId='6066e4315abbcc1f9526d392'
//details--------------
descriptionTitle='This trip is about:'
description='Exchangeable and refundable free of charge by voucher up to 8 days before your depature.'
termsAndConditionsTitle='conditions'
termsAndConditions='terms and conditions here'
/>
)}

• Store android pass example for event

import { CardAndroid } from "react-wallets";

const MyWalletComponent = () => {
 return (
<CardAndroid
//card-type
type='event'
//styles------------------------------
backgroundColor='#f5f5f5'
titleColor='black'
//header------------------------------
headerLogoLink='https://seeklogo.com/images/H/hummingbird-logo-D436A31661-seeklogo.com.png'
title='BEST EVENT'
//title--------------------------------
mainTitle='BEST Event'
secondaryTitle='Elysee Montmartre'
//infos--------------------------------
topLeftTitle='Date'
topLeftValue='Jun 21,2023'
topRightTitle='Time'
topRightValue='11:08 AM'
bottomLeftTitle='Door'
bottomLeftValue='1'
bottomCenterTitle='Row'
bottomCenterValue='1stC'
bottomRightTitle='Place'
bottomRightValue='17B'
//access--------------------------------
accessType='CODE128'
accessImage='https://t3.ftcdn.net/jpg/02/55/97/94/360_F_255979498_vewTRAL5en9T0VBNQlaDBoXHlCvJzpDl.jpg'
accessCodeId='5g1hdvb82154df853fca14835'
accessBorder={true}
//footer--------------------------------
bannerImage='https://d1csarkz8obe9u.cloudfront.net/posterpreviews/business-event-banner-design-template-392070a11089eb5fb736443db6abef83_screen.jpg?ts=1618400029'
//details--------------------------------
holderNameTitle='full name'
holderName='Alan Jason'
place='elysee montmartre'
address='72 Street Name'
openTimeTitle='opening date / time'
openTime='2023 21st June, 11 PM'
startDateTitle='starting date / time'
startDate='27 Jul 2023 11PM'
ticketNumberTitle='ticket number'
ticketNumber='123789654'
valueTitle='price'
value='120$'
termsAndConditionsTitle='our terms'
termsAndConditions='this are the terms and conditions'
googleMapsLink='link here'
phoneNumber='+33 555 555'
email='email-email.com'
disableNotifications='disable notifications'
/>
)}

Passes examples

You can find here full examples of all passes with some fake data !

API

This a list of props that you can pass down to the component, all of them are of type string: | Property | Description |Pass |Platform | --- | ------ |------ | ----------- | |type | takes one of these pass types : store/event/coupon/plane/boat/bus/subway/train/cinema/room.Required|all |iOS-Android |backgroundColor | takes pass backgorund color |all | iOS-Android |titleColor | takes pass title's color| all|iOS |textColor |takes pass title's value color| all|iOS |title |displaying subtitle | store/coupon/plane/boat/bus/subway/train -- all|iOS-Android |headerLogoLink |takes logo url |all|iOS-Android |headerTitle |displaying pass title |store/coupon/plane/event/cinema/room |iOS-Android |mainTitle | displaying the main title |store/coupon/plane-room/event/cinema/coupon/store |iOS-Android |accessType | takes on of these code types :QR/CODE128/PDF417/AZTEC. Required |all |Android |accessImage |takes code image url |all| iOS-Android |accessBorder | displaying a colored and animated border for security. boolean type |all| iOS-Android |accessCodeId | takes codes id|all |Android |accessCodeIdTitle | displaying a custom title for the access code id. default value barcode|store | iOS |bannerImage | takes banner or footer image url |store/event/coupon/room/cinema -- train/subway/bus/boat/plane | iOS-Android |bottomCenterTitle |displaying a title |room| iOS |bottomCenterValue | displaying a value|room| iOS |bottomLeftTitle |displaying a title |all -- train/subway/bus/boat/event/cinema/plane | iOS-Android |bottomLeftValue | displaying a value|all -- train/subway/bus/boat/event/cinema/plane | iOS-Android |bottomRightTitle |displaying a title |store/coupon/event/plane/room/cinema -- evet/cinema/plane | iOS-Android |bottomRightValue |displaying a value|store/coupon/event/plane/room/cinema -- evet/cinema/plane | iOS-Android |LeftTitle |displaying a title |plane/boat/bus/subway/train | iOS |LeftValue | displaying a value|plane/boat/bus/subway/train | iOS |RightTitle | displaying a title |plane/boat/bus/subway/train| iOS |RightValue |displaying a value|plane/boat/bus/subway/train | iOS |topCenterLeftTitle | displaying a title |event/plane/boat/bus/subway/train/cinema | iOS |topCenterLeftValue |displaying a value|event/plane/boat/bus/subway/train/cinema | iOS |topCenterRightTitle |displaying a title |plane/cinema| iOS |topCenterRightValue | displaying a value|plane/cinema| iOS |topCenterTitle |displaying a title |plane/room |Android |topCenterValue |displaying a value |plane/room | Android |topLeftTitle |displaying a title |event/plane/boat/bus/subway/train/room/cinema -- room/boat/bus/subway/train/event/cinema/plane/store | iOS-Android |topLeftValue |displaying a value|event/plane/boat/bus/subway/train/room/cinema -- room/boat/bus/subway/train/event/cinema/plane/store | iOS-Android |topRightTitle |displaying a title | event/plane/boat/bus/subway/train/cinema-boat/bus/subway/train/event/cinema/plane/store/room | iOS-Android |topRightValue |displaying a value|event/plane/boat/bus/subway/train/cinema -- boat/bus/subway/train/event/cinema/plane/store/room | iOS-Android |mainTitle|displaying a title |store/coupon/plane-room/event/cinema/coupon/store|iOS-Android |secondaryTitle|displaying a title |room/event/cinema |Android |composedMainTitle:{from - to} | displaying a title |boat/bus/subway/train/plane|Android |composedSecondaryTitle:{from - to} | displaying a title |boat/bus/subway/train/plane |Android |address| displaying a physical address |store/event/cinema/room | iOS-Android |addressTitle| displaying a custom title for the address value. default value address |store -- store/room |iOS-Android |arrivalGate |displaying arrival gate number |plane|iOS-Android |arrivalGateTitle |displaying a custom title for the arrival gate. default value arrival code|plane|Android |arrivingTitle |displaying a custom title for the arriving time value. default value arriving at|boat -- boat/bus/train/subway|iOS-Android |checkInTitle |displaying a custom title for the check in time. default value check in |room|iOS-Android |checkOutTitle |displaying a custom title for the check out time value. default value check out |room|iOS-Android |confirmationCode |displaying confirmation code |plane|iOS-Android |confirmationCodeTitle |displaying a custom title for the confirmation code value. default value confirmation code |plane|iOS-Android |couponId |displaying coupon id value|store/coupon -- coupon| iOS-Android |couponIdTitle |displaying a custom title for the coupon ID value. default value coupon |store/coupon -- coupon| iOS-Android |customTitle |displaying a custom title |cinema/store -- store | iOS-Android |customTitlePhone |displaying a custom title for phone number |store | iOS-Android |customValue | displaying a custom valuestore | iOS-Android |date |displaying date |store | iOS-Android |departureTitle |displaying a custom title for the departure time/date value. default value departure |boat -- boat/bus/train/subway| iOS-Android |description |displaying a description |store/coupon/plane/boat/bus/subway/train -- store/coupon | iOS-Android |descriptionTitle |displaying a custom title for the description value. default value description |coupon/boat/bus/subway/train -- coupon | iOS-Android |destinationTerminal| displaying destination terminal number|plane | iOS-Android |destinationTerminalTitle|displaying a custom title for the destination terminal value. default value destination terminal |plane | Android |details | displaying written details |boat/bus/subway/train/plane/| iOS-Android |detailsTitle | displaying a custom title for the details value. default value details|boat/bus/train/subway|Android |disableNotifications | displaying disable notification text|boat/bus/subway/train/room/plane |Android |email |displaying email |event/cinema/room/event | iOS-Android |emailTitle |displaying a custom title for the email value. default value email|event/cinema/room |iOS |endDate | displaying end date or hour |event/boat/cinema/room -- room/store/cinema/boat/bus/subway/train/room | iOS-Android |endDateTitle |displaying a custom title for the end date value. default value end date|event/cinema -- cinema| iOS-Android |eventName | displaying event name |event| iOS-Android |expires| displaying date of expiry|coupon | iOS-Android |expiresTitle| displaying a custom title for the expires value. default value expires|coupon |Android |flightDetailsTitle| displaying a custom title for the flight details value. default value flight details|plane |iOS-Android |flightNumber | displaying flight number| plane|iOS-Android |flightNumberTitle | displaying a custom title for the flight number value. default value flight number| plane|Android |from |displaying coupon marketer|coupon |iOS-Android |fromTitle |displaying a custom title for the fromvalue. default value from|coupon |Android |googleMapsLink|displaying a custom title for the from value. default value google maps link|event| iOS |googleMapsLinkTitle|takes google maps url |event -- event/cinema/boat/bus/subway/train | iOS-Android |holderId |displaying pass holder id |store| iOS-Android |holderLastName | displaying pass holder last name|store |iOS-Android |holderName |displaying pass holder name |store/room -- store/event/cinema/room |iOS-Android |holderNameTitle |displaying a custom title for the ticket holder name. default value ticket holder|room -- event/cinema/room |iOS-Android |kind | displaying kind| room/store | iOS-Android |kindTitle | displaying a custom title for the room type. default value type| event/room | iOS-Android |movieName |displaying movie name |cinema | iOS-Android |movieNameTitle |displaying a custom title for the movie name value. default value movie name|cinema | iOS-Android |number |displaying a number value |boat/bus/subway/train| iOS-Android |numberTitle |displaying a custom title for a number value. default value number|boat/bus/subway/train| Android |offersTitle |displaying a custom title for the offers value. default value offers|store| iOS |offerId | displaying offer code id|store | iOS-Android |openTime |displaying opening time|event/cinema | iOS-Android |openTimeTitle |displaying a custom title for the open doors/time value. default value doors open|event/cinema | iOS-Android |phoneNumber |displaying primary phone number|store/event/cinema/boat/room -- store/event/cinema/boat/bus/subway/train/room/plane |iOS-Android |phoneNumberTitle |displaying a custom title for the phone number value. default value phone number|store/event/boat/cinema/room -- store|iOS-Android |phoneNumberSecondary | displaying secondary phone number|store | iOS-Android |phoneNumberSecondaryTitle |displaying a custom title for the secondary phone number value. default value after sale service|store -- store|iOS-Android |place |displaying a place name or an address |cinema/room/event | iOS-Android |price| displaying price value|event/boat -- boat/bus/subway/train | iOS-Android |priceTitle| displaying a custom title for the price value. default value price|event/boat -- boat/bus/subway/train | iOS-Android |promoCode | displaying promotion code id|coupon | iOS-Android |promoCodeTitle |displaying a custom title for the promo code value. default value promo code|coupon | iOS-Android |rating|displaying movie rating |cinema| iOS-Android |ratingTitle|displaying a custom title for the rating value. default value rating |cinema| iOS-Android |schedule |displaying a schedule |store | iOS-Android |scheduleTitle |displaying a custom title for the schedule value. default value schedule |store | iOS-Android |scheduledDepartureTime | displaying scheduled departure time| plane| iOS-Android |scheduledDepartureTimeTitle |displaying a custom title for the schedule departure time value. default value scheduled departure time| plane| Android |startDate |displaying start date or hour |event/boat/cinema/room -- store/event/cinema/boat/bus/subway/train/room | iOS-Android |startDateTitle |displaying a custom title for the start date value. default value start date |event/boat/cinema/room -- store/event/cinema/boat/bus/subway/train/room | iOS-Android |termsAndConditions | displaying terms and conditions text|event/boat/cinema/room/bus/subway/train -- event/cinema/room | iOS-Android |termsAndConditionsTitle |displaying a custom title for the terms and conditions value. default value terms and conditions|event/boat/cinema/room/bus/subway/train -- event/cinema/room | iOS-Android |ticketImage| takes ticket image url|boat/bus/subway/train/plane | iOS-Android |ticketNumber| displaying ticket number| event/boat/cinema/room -- event/cinema| iOS-Android |ticketNumberTitle|displaying a custom title for the ticket number value. default value ticket number| event/boat/cinema/room -- event/cinema| iOS-Android |value|displaying a value |event/coupon |Android |valueTitle|displaying a custom title for a value. default value value|event/coupon |Android |walletImage | takes wallet image url | coupon| Android |website | takes the website link value | store|iOS |websiteTitle |displaying a custom title for the website value. default value website | store| iOS

License

MIT © astrolab