Stripe

• Enable access to raw card APIs on Stripe

• Head over here to submit the request:I would like to request that Stripe enable raw card data APIs for my account

  • You should attach the these two documents in a zip file, and then send the email.

To enable secure communication between OpenPay and your Stripe account, make sure to add your publishable and restricted Stripe keys in OpenPay.

Sign in to Stripe

• Create a new restricted key in Stripe here

• Copy down your restricted key and publishable key (you will need to add these to OpenPay)

• Head over to your payment processors page to add a new processor

• Select Stripe, and enter your publishable key and restricted key

• Toggle on credit card as a payment method

• Click Create

Before you can process payments via Apple Pay or Google Pay, you must register your website's domain in the Stripe dashboard. This ensures your domain is authorized to display Apple Pay and Google Pay elements. Register your domain here.

After you register you domain, toggle on Apple/Google pay in your Stripe processor settings in OpenPay.

OpenPay.jsCopied!

In the OpenPayForm constructor, the onPaymentRequestLoad callback provide applePay and googlePay payment objects statuses

• submit: Used to trigger a regular form submission.

• applePay and googlePay: Objects containing the current status and actions for Apple Pay and Google Pay.

The applePay and googlePay objects have the following structure:

{
  isLoading: boolean,  
  isAvailable: boolean, 
  startFlow: () => void 
}

Object Properties:

• isAvailable: Use this to check if Apple Pay or Google Pay is available to process

• isLoading: Use this to indicate whether the payment method is still loading or processing.

• startFlow(): This triggers the payment flow, launching the Apple Pay or Google Pay UI for the user to complete their payment.

OpenPay ReactCopied!

In your React component, the ElementsForm component provides a callback that contains the following objects for both Apple Pay and Google Pay:

• submit: Used to trigger a regular form submission.

• applePay and googlePay: Objects containing the current status and actions for Apple Pay and Google Pay.

The applePay and googlePay objects have the following structure:

{
  isLoading: boolean,  
  isAvailable: boolean, 
  startFlow: () => void 
}

Object Properties:

• isAvailable: Use this to check if Apple Pay or Google Pay is available to process

• isLoading: Use this to indicate whether the payment method is still loading or processing.

• startFlow(): This triggers the payment flow, launching the Apple Pay or Google Pay UI for the user to complete their payment.

Here’s how to implement the payment buttons for Apple Pay within your ElementsForm. You can easily add Google Pay in a similar manner.

<ElementsForm
  checkoutSecureToken={`checkout-secure-token-uuid`}  // Secure token for payment session
  onChange={() => setError(undefined)}                // Clear any errors on change
  onLoad={onLoad}                                     // Handle form load event
  onValidationError={(message) => setError(message)}  // Show validation errors
  onCheckoutSuccess={onCheckoutSuccess}               // Handle successful checkout
  onCheckoutError={onCheckoutError}                   // Handle any checkout errors
>
  {({ submit, applePay, googlePay }) => (
    <>
      {/* Display Apple Pay button */}
      {applePay.isAvailable && (
        <button 
          onClick={() => applePay.startFlow()} 
          disabled={applePay.isLoading}              // Disable if loading
        >
          {applePay.isLoading ? <Spinner /> : "Pay with Apple Pay"}  {/* Show loading spinner if needed */}
        </button>
      )}

      {/* Display Google Pay button */}
      {googlePay.isAvailable && (
        <button 
          onClick={() => googlePay.startFlow()} 
          disabled={googlePay.isLoading}              // Disable if loading
        >
          {googlePay.isLoading ? <Spinner /> : "Pay with Google Pay"}  {/* Show loading spinner if needed */}
        </button>
      )}
    </>
  )}
</ElementsForm>

Note (For using staging environment for testing purpose) - Please provide baseUrl prop with our staging environment. baseUrl is default to our production environment.

Example:

<ElementsForm
  baseUrl={isStagingEnv ?   "https://cde.openpaystaging.com/": undefined}
>
   ...
</ElementsForm>

You can dynamically show the Apple Pay and Google Pay buttons based on their availability using isAvailable. This ensures that the payment methods only appear if they are supported on the customer’s device. You can also provide user feedback during the loading state by displaying a spinner when isLoading is true.

{applePay.isAvailable && (
  <button 
    onClick={() => applePay.startFlow()} 
    disabled={applePay.isLoading}
  >
    {applePay.isLoading ? <Spinner /> : "Pay with Apple Pay"}
  </button>
)}

{googlePay.isAvailable && (
  <button 
    onClick={() => googlePay.startFlow()} 
    disabled={googlePay.isLoading}
  >
    {googlePay.isLoading ? <Spinner /> : "Pay with Google Pay"}
  </button>
)}