Accept an Australia BECS Direct Debit payment

Server-side

This integration requires endpoints on your server that talk to the Stripe API. Use our official libraries for access to the Stripe API from your server:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Client-side

The React Native SDK is open source and fully documented. Internally, it uses the native iOS and Android SDKs. To install Stripe’s React Native SDK, run one of the following commands in your project’s directory (depending on which package manager you use):

yarn add @stripe/stripe-react-native

Next, install some other necessary dependencies:

• For iOS, navigate to the ios directory and run pod install to ensure that you also install the required native dependencies.
• For Android, there are no more dependencies to install.

Stripe initialisation

To initialise Stripe in your React Native app, either wrap your payment screen with the StripeProvider component, or use the initStripe initialisation method. Only the API publishable key in publishableKey is required. The following example shows how to initialise Stripe using the StripeProvider component.

import React, { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      // Your app code here
    </StripeProvider>
  );
}

You can securely collect Australia BECS Direct Debit payment information with AuBECSDebitForm component, a drop-in UI component provided by the SDK. AuBECSDebitForm provides a UI for customers to enter their name, email, BSB number, and account number in addition to displaying the Australia BECS Direct Debit Terms.

Add an AuBECSDebitForm component to the screen with your company name as a prop. You can also customize AuBECSDebitForm to match the look and feel of your app by providing the formStyle prop. Collect form details with the onComplete prop when confirming the payment.

function PaymentScreen() {
  const [formDetails, setFormDetails] = useState<
    AuBECSDebitFormComponent.FormDetails
  >();

  return (
    <View>
      <AuBECSDebitForm
        onComplete={(value) => setFormDetails(value)}
        companyName="Example Company Inc."
        formStyle={{
          textColor: '#000000',
          fontSize: 22,
          placeholderColor: '#999999',
        }}
      />
      <Button title="Pay" variant="primary" onPress={handlePayPress} />
    </View>
  );
}

Server-side

A PaymentIntent is an object that represents your intent to collect a payment. The PaymentIntent tracks the lifecycle of the payment process through each stage. First, create a PaymentIntent on your server and specify the amount to collect and the aud currency (BECS Direct Debit doesn’t support other currencies). If you already have an integration using the Payment Intents API, add au_becs_debit to the list of payment method types for your PaymentIntent.

To save the BECS Direct Debit account for reuse, set the setup_future_usage parameter to off_session. BECS Direct Debit only accepts an off_session value for this parameter.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "setup_future_usage"="off_session" \
  -d "currency"="aud" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "payment_method_types[]"="au_becs_debit"

After creating a PaymentIntent, Stripe returns a PaymentIntent object containing a client_secret property. Pass the client secret to the client side.

Client-side

On the client, request a PaymentIntent from your server and store its client secret.

const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      currency: 'aud',
      payment_method_types: ['au_becs_debit'],
    }),
  });
  const { clientSecret, error } = await response.json();

  return { clientSecret, error };
};

Retrieve the client secret from the PaymentIntent you created and call confirmPayment. This presents a webview where the customer can complete the payment on their bank’s website or app. Afterwards, the promise resolves with the result of the payment.

function PaymentScreen() {
  const { confirmPayment, loading } = useConfirmPayment();

  const [formDetails, setFormDetails] = useState<
    AuBECSDebitFormComponent.FormDetails
  >();

  const handlePayPress = async () => {
    const { error, paymentIntent } = await confirmPayment(clientSecret, {
      paymentMethodType: 'AuBecsDebit',
      paymentMethodData: {
        formDetails,
      }
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Payment confirmation error', error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.Processing) {
        Alert.alert(
          'Processing',
          `The debit has been successfully submitted and is now processing.`
        );
      } else if (paymentIntent.status === PaymentIntents.Status.Succeeded) {
        Alert.alert(
          'Success',
          `The payment was confirmed successfully! currency: ${paymentIntent.currency}`
        );
      } else {
        Alert.alert('Payment status:', paymentIntent.status);
      }
    }
  };

  return (
    <View>
      <AuBECSDebitForm
        onComplete={(value) => setFormDetails(value)}
        companyName="Example Company Inc."
        formStyle={{
          textColor: '#000000',
          fontSize: 22,
          placeholderColor: '#999999',
        }}
      />
      <Button title="Pay" variant="primary" onPress={handlePayPress} />
    </View>
  );
}

BECS Direct Debit is a delayed notification payment method, which means that funds aren’t immediately available. A BECS Direct Debit PaymentIntent typically remains in a processing state for 2 business days after submission to the BECS network. This submission happens once per day. Once the payment succeeds, the associated PaymentIntent status updates from processing to succeeded.

The following events are sent when the PaymentIntent status is updated:

Because setup_future_usage and customer were set, the PaymentMethod will be attached to the Customer object when the payment enters the processing state. This attachment happens regardless of whether payment eventually succeeds or fails.

When a Direct Debit attempt fails, Stripe sends a payment_intent.payment_failed event containing a PaymentIntent object. The last_payment_error attribute on the PaymentIntent contains a code and message describing details of the failure.

The failures can be transient or final for the mandate associated with the failed PaymentIntent. In the event of a final failure, Stripe revokes the mandate to prevent additional failure costs. When this happens, and you need your customer to pay, it’s your responsibility to contact your customer to establish a new mandate by re-collecting the bank account information.

For the following failure codes returned, Stripe updates the mandate status as follows:

We recommend using webhooks to confirm the charge succeeds or fails, and to notify the customer whether mandate establishment and payment are complete or if they require additional attention.

Test your form using the test BSB number 000-000 and one of the test account numbers below when you call confirmPayment.

Webhook events are triggered when using test account numbers. In a sandbox, PaymentIntents succeed and fail immediately, and as a result, the respective payment_intent.succeeded and payment_intent.payment_failed events trigger immediately as well. In live mode, the webhooks get triggered with the same delays as those of their related PaymentIntent successes and failures.