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:
- Most similar to our traditional integration
- Robust features and options for creating and managing orders
- 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
- 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.
- 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
- 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.
- 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
- Import our package
import ZipWidget from "quadpay-merchant-sdk-react-native/ZipWidget";
- 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
- Import our package
import ZipPaymentWidget from 'quadpay-merchant-sdk-react-native/ZipPaymentWidget'
- 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 6 months ago