README
React Primer Checkout
About
React Primer Checkout is a react library that provides merchants with the tools required to easily collect payment information and generate access tokens using APIs from primer.io. This package contains:
- The React library
- An Example App
- Typescript declarations
Note: This package was engineered to be used in a staging environment only.
Getting Started
Before you begin, do create an account on primer.io so as to obtain your API key. Your API key will be used to generate an API token which is required by this library before payments can be initiated. See Primer API docs here to learn more.
Installation
The React Library
In the project directory, run:
$ npm install react-checkout-challenge
Usage
import React from 'react';
import styled from 'styled-components';
import Checkout from 'react-checkout-challenge';
import { PaymentTokenizationResponse } from 'react-checkout-challenge/dist/esm/helpers/PaymentToken';
import { PaymentMethods } from 'react-checkout-challenge/dist/esm/components/checkout/CheckoutContainer';
//Using styled-components (not required)
const Container = styled.div`
width: 100%;
padding-top: 100px;
display: flex;
flex-direction: column;
align-items: center;`;
const Title = styled.div`
font-size: 1.5em;
font-weight: 500;
text-align: center;
display: flex;
margin-bottom: 8px;
flex-direction: column;
align-items: center;
justify-content: center;`;
const Caption = styled.div`
font-size: 1.2em;
font-weight: 300;
color: grey;
text-align: center;`;
function App() {
const PRIMER_CLIENT_TOKEN = "your-client-token-here";
const onTokenizationComplete = (tokenRes: PaymentTokenizationResponse, err?: Error) => {
console.log(tokenRes);
}
return (
<Container>
<Title>Like what you see? Buy it!</Title>
<Caption>It only costs 50 bucks</Caption>
<Checkout
clientToken={PRIMER_CLIENT_TOKEN}
allowPaymentMethods={[PaymentMethods.Card]}
lang={lang}
amount={50}
currency="£"
btnStyles={{
logoSrc: 'logo.png'
}}
onTokenizationComplete={onTokenizationComplete}
style={{width: '50%'}} />
</Container>
);
}
export default App;
Checkout Props
Here is a list of properties that can be used with the checkout library:
| Properties | Description |
| :-------------: |-------------|
| lang
| optional
Language to use for the checkout component e.g. fr
. Defaults to english en
. This library currently supports fr
and en
languages |
| amount
| optional
Value to display beside the pay button e.g. 150
|
| currency
| optional
The currency to display on the pay button, beside the amount e.g. $
|
| policy
| optional
Terms or policy statement to display between the form and button. This is typically a React Node e.g. <div>Terms and conditionals apply. Click here to learn more</div>
|
| btnStyles
| optional
A styling object used to customize the pay button. Supports three attributes: 1. logoSrc
The url to an icon; 2. btnVariant
A size variant of the pay button. It can be either large
or small
instances of BtnVariant
3. style
The css style to be applied to the button
component |
| allowPaymentMethods
| required
An array of PaymentMethods
you prefer to support on your app. Current methods supported include Credit Cards and PayPal (WIP). |
| clientToken
| required
A token you have generated by calling the primer API endpoint via your backend - /auth/client-token
e.g. eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2Nlc3NUb2tlbiI6ImYwOTZkNjMzLTM1Y...h9CzttPQ7mb3JaaSMQVo1QUSs |
| inputStyles
| optional
An object of css styles to be used on all input fields |
| theme
| optional
Theme to use for the overall interface. It can be dark
or light
|
| style
| optional
CSS Style object to use on the parent form
component |
| onTokenizationComplete
| required
Callback function executed with the following arguments: PaymentTokenizationResponse
and Error
, when the access token generation request is complete |
Sample Tokenization Response
{
"deleted":false,
"createdAt":"2021-05-04T09:33:52.293855",
"updatedAt":"2021-05-04T09:33:52.293855",
"deletedAt":null,
"token":"alooYT5lS4m2JdL60rNo9nwxNjIwMTIwODMy",
"analyticsId":"-NxZbWYcXPiRMynOCdzu2G5L",
"tokenType":"SINGLE_USE",
"paymentInstrumentType":"PAYMENT_CARD",
"paymentInstrumentData":{
"last4Digits":"1111",
"expirationMonth":"03",
"expirationYear":"2030",
"cardholderName":"J Doe",
"network":"Visa",
"isNetworkTokenized":false,
"binData":{
"network":"VISA",
"issuerCountryCode":"US",
"issuerName":"JPMORGAN CHASE BANK, N.A.",
"issuerCurrencyCode":null,
"regionalRestriction":"UNKNOWN",
"accountNumberType":"UNKNOWN",
"accountFundingType":"UNKNOWN",
"prepaidReloadableIndicator":"NOT_APPLICABLE",
"productUsageType":"UNKNOWN",
"productCode":"VISA",
"productName":"VISA"
}
},
"vaultData":null,
"threeDSecureAuthentication":null
}
See API Documentation to learn more
Want to see how it works? Install the Example App in this package.
The Example App
The example app was bootstrapped using create-react-app. To run it, execute the following commands on your terminal:
$ git clone https://github.com/mugambbo/react-primer-checkout.git
$ cd react-checkout-example
$ npm install
$ npm start
Click here or here to see a live demo
Minimum Requirements
This react package supports a minimum React version of v16.8.
Contributing
If you want to contribute to react-checkout-challenge, feel free to fork this repository, create a new branch, make changes and create a pull request. It's that simple!
Notes
This react library is part of the Primer.io React Checkout Challenge