GuidesAPI Reference
Guides

Virtual Checkout

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 = "44444444-4444-4444-4444-444444444444";

// 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);

Updated over 1 year ago