react-wallets
v1.0.0
Published
Made with create-react-library to display iOS and Android passes in any ReactJs project
Downloads
109
Keywords
Readme
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