GuidesAPI Reference
Guides

React Native

Overview

The Zip React Native SDK requires react-native >0.59 and uses autolinking — no extra steps required!

Please visit the following link to our SDK where our current version number can be seen: https://www.npmjs.com/package/quadpay-merchant-sdk-react-native/v/2.1.0.

Currently there are two ways to integrate Zip into your mobile React Native apps:

Standard Checkout

  • Most similar to our traditional integration
  • Robust features and options for creating and managing orders

Virtual Card Checkout

  • Quickest to implement when you can accept standard Visa credit cards
  • Uses identical rails to a standard Visa credit card transaction

Overview

Items you will need:

  • The Zip React Native SDK
  • The Start Checkout call in your React Native app
  • An order confirmation endpoint on your server

Implementation

  1. Please visit the following link to our SDK to verify the current version number: https://www.npmjs.com/package/quadpay-merchant-sdk-react-native/v/2.1.0.

📘

iOS Only

Go to your iOs folder and run pod install.

  1. Import our package
import { QuadPay } from "quadpay-merchant-sdk-react-native";

How to start a Zip checkout in your React Native App

Initialize the Zip SDK

  • Your Merchant ID will be provided by your Zip account manager.
  • Please make sure you are using the production merchantId with environment "production" and the sandbox merchantId with environment "sandbox".
  • For enablement in other markets, set locale with your locale variable ("US" for the United States).
// Be sure to init the QuadPay library before making any calls!
merchantId = "[Insert merchant Id]";

// Be sure to make sure your Merchant ID is for the correct environment!
environment = "SANDBOX"; // "SANDBOX" or "PRODUCTION"

locale = "US";
QuadPay.initialize(merchantId, environment, locale);

Start the Zip Checkout
Once presented the customer will be shown the Zip checkout flow.

// Add details about the customer and their order
//  these will be used to autofill fields during the QuadPay checkout
order = {
  amount: "44.44",
  merchantReference: "custom-order-id",
  customerFirstName: "Quincy",
  customerEmail: "<use a unique email>@<test>.com",
  customerLastName: "Payman",
  customerPhoneNumber: "+14076901147",
  customerAddressLine1: "240 Meeker Ave",
  customerAddressLine2: "Apt 35",
  customerPostalCode: "11211",
  customerCity: "Brooklyn",
  customerState: "NY",
  customerCountry: "US",
  merchantFeeForPaymentPlan: "0",
};

Implement the Callbacks

These functions give your application information regarding the result of the Zip checkout flow.

// Register callbacks with the QuadPay library -- these will fire when the customer
//  completes or cancels checkout
//  There is no need to "unregister" any of the callbacks
QuadPay.onCheckoutSuccessful(successfulCheckout => console.log(successfulCheckout));
// The user has completed checkout -- successfulCheckout.orderId must be used to confirm the transaction from the backend


// Handle edge cases
QuadPay.onCheckoutCancelled(reason => console.log(reason));
QuadPay.onCheckoutError(errorMessage => console.log(errorMessage));

// Open the QuadPay checkout view
QuadPay.startCheckout(order);

Confirming your Zip orders

As soon as your customer has completed checkout, an Order Id will be issued. To finalize the transaction this Order ID must be submitted to Zip's confirmation endpoint. The Order Id will last for 24 hours under default settings to be confirmed.

The timing of your shipping can be any time after you have confirmed the order. When submitting the Order ID, you will have a chance to finalize the order amount.

Post the Order Id to the confirmation endpoint

See https://docs.zip.co/docs/custom-integration-guide#signing-requests for information regarding signing requests

Post:

curl -X post https://gateway.us.zip.co/orders/{orderId}/confirm
  -H 'content-type: application/json' 
  -H 'X-QP-Signature: [signature]'
  -d '{
    "orderId": [orderId],
    "totalOrderAmount": <number>, (optional)
    "taxAmount": <number>, (optional),
    "shippingAmount": <number>, (optional)
  }'

An order ID will be returned:

{
  "orderId": [order id]
}

Service after confirmation

Once the order has been confirmed and an order ID has been received the user should be guided to a success page.

This order ID can also be used to update the order using our normal orders integration API at https://docs.us.zip.co/docs/custom-integration-guide.

Overview

Items you will need:

  • The Zip React Native SDK
  • The Start Checkout call in your React Native app
  • A payment processor for credit card transactions

Implementation

  1. Please visit the following link to our SDK where our current version number can be seen: https://www.npmjs.com/package/quadpay-merchant-sdk-react-native/v/2.1.0.

📘

iOs Only

Go to your iOs folder and run pod install.

  1. Import our package
import { QuadPay } from "quadpay-merchant-sdk-react-native";

How to start a Zip checkout in your iOS App

Initialize the Zip SDK

  • Your Merchant ID will be provided by your Zip account manager.
  • Please make sure you are using the production merchantId with environment "production" and the sandbox merchantId with environment "sandbox".
  • For enablement in other markets, set locale with your locale variable ("US" for the United States).
// Be sure to init the QuadPay library before making any calls!
merchantId = "[Insert merchant Id]";

// Be sure to make sure your Merchant ID is for the correct environment!
environment = "SANDBOX"; // "SANDBOX" or "PRODUCTION"

locale = "US";
QuadPay.initialize(merchantId, environment, locale);

Start the Zip Checkout
Once presented the customer will be shown the Zip checkout flow.

// Add details about the customer and their order
//  these will be used to autofill fields during the QuadPay checkout
order = {
  amount: "44.44",
  merchantReference: "custom-order-id",
  customerFirstName: "Quincy",
  customerEmail: "<use a unique email>@<test>.com",
  customerLastName: "Payman",
  customerPhoneNumber: "+14076901147",
  customerAddressLine1: "240 Meeker Ave",
  customerAddressLine2: "Apt 35",
  customerPostalCode: "11211",
  customerCity: "Brooklyn",
  customerState: "NY",
  customerCountry: "US",
  merchantFeeForPaymentPlan: "0",
};

Implement the Callbacks

These functions give your application information regarding the result of the Zip checkout flow.

// Register callbacks with the QuadPay library -- these will fire when the customer
//  completes or cancels checkout
//  There is no need to "unregister" any of the callbacks
QuadPay.onCheckoutSuccessful(successfulCheckout => console.log(successfulCheckout));
// Submit the card and cardholder details through your standard payment processor!

// Handle edge cases
QuadPay.onCheckoutCancelled(reason => console.log(reason));
QuadPay.onCheckoutError(errorMessage => console.log(errorMessage));

// Open the QuadPay checkout view
QuadPay.startVirtualCheckout(order);

Please visit the following link to our SDK where our current version number can be seen: https://www.npmjs.com/package/quadpay-merchant-sdk-react-native/v/2.1.0.

Zip Widget

  1. Import our package
import  ZipWidget  from "quadpay-merchant-sdk-react-native/ZipWidget";
  1. Set the relevant attributes
<ZipWidget
  style={styles.widget}
  alignment="center"
  size="100"
  logoSize="140"
  isMFPPMerchant="true"
  merchantId="[Insert merchant Id]"
  max="20"
  amount="30"
/>

Payment Widget

  1. Import our package
import ZipPaymentWidget from 'quadpay-merchant-sdk-react-native/ZipPaymentWidget'
  1. Set the relevant attributes
<ZipPaymentWidget
  amount="100"
  isMFPPMerchant ="true"
  learnMoreUrl ={learnMoreUrl}
/>

📘

Need Help?

Please reach out to [email protected] if you have any questions or if you need assistance.

Updated 11 months ago