Official React Native SDK plugin forPrimer

Set up the Universal Checkout

Step 1. Install the SDK

\# With yarnyarn add @primer-io/react-native\# With npmnpm i @primer-io/react-native --save

Step 2. Initialize the SDK

import*asReactfrom'react';import{Primer,PrimerSettings,PrimerCheckoutData}from'@primer-io/react-native';constCheckoutScreen=(props:any)=>{constonCheckoutComplete=(checkoutData:PrimerCheckoutData)=>{// Perform an action based on the payment creation response// ex. show success screen, redirect to order confirmation view, etc.};React.useEffect(()=>{constsettings:PrimerSettings={onCheckoutComplete:onCheckoutComplete};Primer.configure(settings).then(()=>{// SDK is initialized sucessfully}).catch(err=>{// SDK failed to initialize})},[]);}

Step 3. Generate a client token

constCheckoutScreen=(props:any)=>{// ...constonUniversalCheckoutButtonTapped=async()=>{try{// Make an API request to your backend to create a client session// and fetch a client token.constclientToken=awaitcreateClientSession(clientSessionRequestParams);}catch(err){// ...}};}

Step 4. Show Universal Checkout

constCheckoutScreen=(props:any)=>{// ...constonUniversalCheckoutButtonTapped=async()=>{try{// ...// Present Universal CheckoutawaitPrimer.showUniversalCheckout(clientToken);}catch(err){// ...}};}

Full Code Snippet

import*asReactfrom'react';import{Primer,PrimerSettings,PrimerCheckoutData}from'@primer-io/react-native';constCheckoutScreen=async(props:any)=>{constonCheckoutComplete=(checkoutData:PrimerCheckoutData)=>{// Show a success screen};constonUniversalCheckoutButtonTapped=async()=>{constsettings:PrimerSettings={onCheckoutComplete:onCheckoutComplete};// Configure the SDKawaitPrimer.configure(settings);// Ask your backend to create a client sessionconstclientToken=awaitcreateClientSession(clientSessionRequestParams);// Present Universal CheckoutawaitPrimer.showUniversalCheckout(clientToken);};}

📚 License